Blogger I.Q.

Blogger and WordPress Tips

WordPress

How to edit WordPress comments.php to remove HTML tags

by 7 Comments

Are you an HTML wizard or expert? Then please excuse me as I am going to offend you with this post! Huh!? Just kidding…I will show you how to remove the HTML tags, comments and attributes from the comments section in a WordPress blog.

Read: How to Reopen a Closed Incognito Tab in Google Chrome

WordPress is arguably the #1 platform for blogging.

Especially for those starting out in serious blogging lean on WordPress for flexibility and extensible resources that are available to make blogging experience rich.

However, there are some features that comes with the box when we start using WordPress and not always we will like them to keep. One such feature is the “You may use these HTML tags and attributes” section that appears along with a bunch of HTML tags and codes for readers to use while commenting on your blog. This HTML block comment is quite unnecessary for a regular reader of your blog.

Well, though this gives some knowledge on how to provide a rich comment by using some ‘basic HTML tags’, not everyone will find these ‘basic’.

Read: How To Add Multiple Youtube Channels To Adsense [in Pictures]

In fact, it’s not required at all, as common users and regular readers just want to type their thoughts and leave. They seldom bother with an <href> tag, <a> tag nor the <strong> tag.

So, it makes complete sense to learn to remove this piece out of the comments area of your WordPress blog.

How to Remove “You may use these HTML tags and attributes” in WordPress comments.php file:

Here’s how to remove that section:

  • Go to “Appearance” section on the left side of your WordPress editor
  • Click on “Editor”
  • Click on “Comments.php” on the right hand side.
  • Go to the complete end by scrolling down
  • Replace this code:
<?php comment_form(); ?>
  •  With this code:
<?php comment_form(array('comment_notes_after' => '')); ?>

Click on “Update File”. The page will refresh and you will see this message: File edited successfully.

Go to your posts page (or refresh the page if you have it already open) and check it out.

The “You may use these HTML tags and attributes” section for providing HTML comments will now be gone for good.

Please leave a comment below if you have any questions. Sorry, no HTML tags given below! 🙂

Further research:

WordPress Forum post # 1

WordPress Forum post # 2

Removing the allowed HTML tags

How to Remove HTML Tags from WordPress 3.x Comment Box

How To Change Sidebar Width Using CSS In A Child Theme With Genesis

by 4 Comments

The following technique best applies to CSS style sheets if you have a blog that is designed with a parent and child themes with the use of a framework like Genesis. Nevertheless, even if you have a Blogger Blogspot blog, this should still work seamlessly.

adjust content width or sidebar width using css in studiopress genesis framework nomadic child theme

Problem: You want to adjust the width of your content area or the sidebar for your child theme but don’t know how.

You’ve come to the right place. Just sit back and read till the end and let me know if this helped you or if you have any questions.

First, let’s find the area on your blog which needs the adjustment. You can accomplish this by ‘Inspecting’ your page elements using Google Chrome’s Inspect Element option. (Friendly Note: Firefox fans – please use Firebug extension to do this exercise).

  1. Go to your blog.
  2. Right click on the area that needs alteration/adjustment.
  3. Select ‘Inspect Element’.

Let me show you an example:

For my blog – thekeyponderer.com I wanted to increase my sidebar width by a little more pixels so I can easily fit in some of my widgets. So I right click on my sidebar in the blog.

change sidebar width using inspect element in chrome

If you notice the CSS styles section in the screenshot, my sidebar had a width of 270 pixels.

 

Go here if you want to learn an easy trick to calculate how much width a certain amount of pixels is.

Now, I want to increase my width to 280 pixels so that I know I can fit in a particular widget that doesn’t fit in its current 270 pixel-wide sidebar.

So, I go to my WordPress > Appearances > Editor and start editing my style.css file.

wordpress dashboard appearance theme editor to edit css files in child theme

Since, I want to edit my sidebar section I will search for .sidebar { as seen in my STYLES section.
.sidebar {
display: inline;
float: right;
font-size: 13px;
line-height: 20px;
width: 270px;
}

 

I simply take a backup (copy/paste to a Notepad file) of my existing style.css code, then replace the width: 270px; with width: 280px;

Save and update the style.css file.

After I refresh my webpage, Voila! the sidebar width is now increased by 10 pixels; from 270px to 280px.

css style changed

Changing the content width or any other area of your webpage is also similar. Just follow the steps given above.

I used Nomadic Child Theme for this above example and obviously, I use Genesis Framework. (Psst…I recommend this Framework strongly – one of the best and its the Industry standard in my humble opinion).

Buy Genesis Framework for your blogs. One time purchase, use it on all your WordPress blogs!

Genesis Theme Framework for WordPress

Hope this helped you in changing the content width or sidebar width for your blog. If it did, let me know and share your happiness with me below via comments.

Have questions, just shoot! I will do my best in helping you out.

Click to download the Genesis Guide for Absolute Beginners

Click to download the Genesis Guide for Absolute Beginners

 

How To Host Images (and Files) On Dropbox for Free

by 2 Comments

Dropbox as Image hosting for free
Host images or any file on Dropbox and reduce your blog’s loading time

This process also saves you storage space on your precious hosting account, by hosting static files. But please remember that Dropbox cannot act as a CDN in the long run and you might inevitably find yourself looking for a regular CDN someday. Till then, and up to a point you want to scale up to that level, you may use Dropbox as the CDN.

Get your Dropbox from here – this special referral link gives additional FREE 500MB storage!

If you want to learn how to use Dropbox for file storage and use it as a CDN, then skip directly to that section below by clicking here.

Some people do the mistake of uploading images to their WordPress blog by uploading it to their WP images directory.

This not only increases the website’s loading time but also adds up to your hosting space, eventually.

Fortunately, there is a neat way to mitigate this issue. We do this by using Dropbox’s free account feature as our CDN (Content Delivery Network)

If you don’t have Dropbox account yet, it’s now time to signup.

Login to dropbox and upload any image to your account that you want to add to the blog post.

After uploading, click on the image icon to see a button called ‘SHARE‘.

Clicking on the ‘SHARE‘ button will give the link you want to paste to your blog HTML.

Dropbox share image button

Important Note: change the default URL from this:

https://www.dropbox.com/s/azlux46yurbqkpp/Dropbox%2S…………..

to this:

https://dl.dropboxusercontent.com/s/azlux46……….

This setting is necessary to make sure the images show up correctly because Dropbox has set the image preview as default with a black background.

To get only the image to display after we host images on Dropbox, we will now replace ‘www.dropbox.com’ with ‘dl.dropboxusercontent.com’ in the URL.

Update: both ‘dl.dropboxusercontent.com’ and ‘dl.dropbox.com’ works. (Just remember to delete ‘www’)

How to Host Files on Dropbox as CDN

If you want to host files instead, simply follow the similar process of uploading the files to your Dropbox and get the link.

Change the URL endpoint from dl=0 to dl=1. Here’s a FREE PDF file for download for demo. This should take care of it!

How To Make Navigation Menu Stick On Top When Scrolling

by Leave a Comment

navigation menu on top sticky when scrolling webpage

WordPress: Create Sticky Menu That Stays On Top When Scrolling Using CSS

This post is a little techy which involves working with code in WordPress > Appearance > Editor section. In particular, the menu items can be found in style.css file which can be fixed on scrolling.

If you don’t want to worry by coding or making changes to your WordPress themes, just check out the various plugins that are available in the WordPress market which does this job.

For those who want to fidget with the codes to create fixed menu when scrolling page, continue reading:

1. Go to your website as it is now. Right click on the menu you want to float while scrolling. Click on Inspect Element.

Home menu right click to see inspect element

2.  The name for your menu depends on which theme you use. It will mostly be named appropriately – ‘#navbar‘ or ‘#menu‘ or ‘#mainmenu‘ or ‘#subnav’. In this example, it’s named as ‘subnav‘. Expand this line by clicking on the small triangle icon to see all your menu items listed.

3. Now search this ‘subnav‘ in your style.css file. It’s better to take a backup of this file by copy-pasting the style.css contents to a Notepad file.

4. Find the attribute that says position: relative; and change it to position: fixed; you can also add other attributes like width, right, top, left depending on your preference to position your sticky item. Just check this w3.org article to know and read further.

5. Save. Exit. Refresh your webpage and you’ll notice that the menu bar sticks on top when you scroll down. I have Genesis Framework installed, so I had an option to install a custom plugin to do this job. However, following the above steps will help you accomplish the same tasks without installing any plugin.

Alternatively, jQuery also comes to rescue and you can find more details in this post and this post.

What other ways do you know to keep menu stick on top floating while scrolling? Let us know using the comments box below.