WordPress Guide – Customizing WordPress Theme Part 2
- WordPress Guide – Dissection Of File Structure
- WordPress Guide – Dissection Of WordPress Theme
- WordPress Guide – Customizing WordPress Theme Part 1
- WordPress Guide – Customizing WordPress Theme Part 2
- WordPress Guide – Customizing WordPress Theme Part 3
- WordPress Guide – Enhancing Image System
- WordPress Guide: Howto Force Your Blog Load Fast
- WordPress Guide – Installing Plugins And Themes
- How To Control Comments.php In WordPress 2.7
- 5 Steps To Practical WordPress Security
- Copywriting Tricks Of The Pros
WordPress Sidebar is the prime real estate for every blogger, no matter if you are trying to earn or simply gain more exposure and perhaps provide interactivity to your blog. While content is the king – sidebar is your virtual vault and making sure its space properly and most efficiently allocated one task we all go through.
In Second Part of Customizing Your WordPress Theme tutorial I wanted to dedicate enough time to talk about things that are fairly basic and don’t require much of technical knowledge and yet, hard to do unless you know how. I want to show How To EXTEND Your Sidebar Functionality and help you understand how it will work to your advantage…
And once again before I will move into customization a few things worth mentioning:
- This tutorial assumes that you are working with a theme that is WordPress 2.3 compatible and supports widgets
- I assume that you ARE using widgets for most of your functionality and simply need more as I will not be covering working with widgets itself.
1. Understanding The Loop
Widgets are wonderful invention that allows us easily customize our theme to our liking and add more functionality or expose existing functionality to our visitors by simply placing a Widget into a correct location in sidebar.
But to make it work dynamically all WordPress themes required to have “the loop” coded into their templates. Loop is nothing more then a fancy word that simply allows dynamic operations and insertion of certain code into predefined location. I have no intention of going into details on this one but understanding where “loop” starts and where it ends is critical for the rest of the tutorial and you will see later WHY.
Sidebar Loop Starting Point:
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar()): ?>
Sidebar Loop End:
<?php endif; ?>
You will see whole bunch of code in between those lines but they are ignored once you place AT LEAST ONE widget into that zone. That part is important to understand…
- Unless You Are Not Planning To Use Widgets, Don’t Place ANY Code Within The Loop!
Here is an example of Loop start in WordPress Default theme
As you can see in image above – Loop begins almost from the very start and once you examine the file you will find that end is last piece of code, besides closing tags for HTML formating. That gives you ability to place pretty much anything that is available as Widget or can be inserted as Text Widget.
And if existing options are not enough – I recommend Exec-PHP plugin that will also allow you to place PHP code into Widget and have it executed. Great plugin if you need its functionality! But what if you need even more?
2. Extend Sidebar Beyond Widgets
As I and many of my customers have found – widgets sometimes are simply not enough. Take the blog you are currently reading for example. If looking on sidebar you will notice at the very top 3 distinctive sections that are NOT part of the original theme and are NOT Widgets:
- Translate Code
- About Me
- Subscribe Form
- Our Sponsors
So how do you add those extra options without messing with your sidebar code too much? Answer is fairly simple – use “include” function. And let me provide a specific example as it is used on my own blog:
In example above you can clearly see that all I do is use a code to include my custom files BEFORE the Loop starts. This part if very important as I have outlined in step 1.
Simply create a new file with *.php extension and place your HTML or custom text or PHP code and use “include” statement to add it to sidebar.
Very same procedure can be used to add custom inclusions AFTER the loop. Obviously choices are yours and when used properly it allows you to have a custom files you can re-use across multiple blogs or simply put something extra into your sidebar that is not going to be interfering with your widgets and something that you can format to fit your theme better, as was case with my sponsors code.
I understand that my tutorial has plenty of shortcomings and possibly you will need more information. Instead of covering what was already nicely described I provide links to articles and blogs I have found particularly useful:
- WPDesigner blog run by Tung Do, better known as Small Potato in blogosphere has a great collection of tutorials for WordPress design and one resource I recommend you have a look at.
- 40 Resources for WordPress theme Designers is an article with every relevant piece of information you might find useful, even if you are not a designer.
- The Advanced WordPress Help Sheet is a great resource that has most relevant pieces of code for your blog.
- 30 Ways To Increase readability is a great post Michael Martin at ProBlogDesign and he has quite a few more, so visit his blog to get more useful tips and tricks for your theme.
- WP Themer Kit – create your own WordPress themes to fit your needs. Perhaps the best tool (kit) I have seen outside of Theme Generator for WordPress themes and the main reason I like is because it allows you to use CSS styles from cssZenGarden
As always – your feedback will be greatly appreciated and help me understand how detailed I need to go into my guides and social plugs are always welcome!Tags: first impression, howto, howto-guides, tutorial, visual message, Web Design, WordPress, wordpress blog, wordpress guide