Do you have a WordPress blog? If you do, you’ll realize that one of the big advantages is its use of PHP to dynamically include the same chunks of HTML on multiple pages.
This page will be showing you how to use this feature to add an information box to the bottom of every post on your blog without a plugin.
An HTML element that’s always present
Scroll down to the bottom of the page. See the information box sitting under the main content? It’s automatically added onto the end of every page on this website.
This kind of information box is great if you run a blog, especially one that makes money, as you can use it to display info about yourself, or give your readers a ‘call to action’ after they’re done reading your article.
You may think this was included by means of a plugin, and there are no doubt plugins available to do this, but any WordPress user knows that plugins are notorious for slowing down your site. So when possible, you should take the opportunity to roll your own WordPress functionality instead of using a plugin, and this page will be showing you how to create an information box that’s automatically appended on to every post on your blog, just like the one you see here.
Put the HTML at the bottom of the single.php file
To create a box that automatically gets appended onto every post in your blog, the place you’ll need to put your HTML is at the bottom of the single.php file, which you can find under Appearance > Editor in your WordPress dashboard. On the right hand sidebar you can click onto single.php and edit the source code directly from your browser – no FTP required.
Make sure that the HTML goes before the comments code, otherwise your info box will get displayed after the comments section on your posts.
Add a call to action or two
As for what you can put in your information box, a call to action or two won’t hurt, such as encouraging your readers to leave a comment or subscribe. Alternatively write a short bio and link to your ‘about me’ page. This part’s really up to you.
Also make sure you give every element a class or ID, to make CSS styling easier later on. When doing this you want to make sure your class or ID name is not already taken by another element, or you might get a nasty CSS surprise later on.
Style your code with CSS
Now you’ve got your HTML all written out, it’s time to go into the style sheet (also accessible from the Appearance > Editor page in your WordPress dashboard) and style your content. If you’ve given your info box a class or ID name, you can use that as your selector, place it anywhere you like within the style sheet and code away.
And that’s it! A snippet of HTML that automatically appends itself onto every post on your blog. No need to manually paste the code onto each individual post you write, and no need for a plugin that slows down your site!
What other functionalities have you been able to add to your WordPress blog without using a plugin? Tell us!
Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.
