alex sysoef
expert wordpress

WordPress Guide – Customizing WordPress Theme Part 2

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

theloop.jpg

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:

wordpress-sidebar-custom-inclusions.jpg

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!

Series NavigationWordPress Guide – Customizing WordPress Theme Part 1WordPress Guide – Customizing WordPress Theme Part 3
Tags: , , , , , , , ,

About The Blog Author

Alex Sysoef is an IT Consultant, Internet Marketer and ProBlogger who shares his passion and knowledge of WordPress, SEO, Social Media and traffic strategies on his blog WordPress Howto Spotter. Connect on Twitter or Facebook

14 Responses to “WordPress Guide – Customizing WordPress Theme Part 2”

  1. Wow, this is great. It’s understandable, and it’s something I could actually do. I like your list of resources, too. I’m bookmarking this one so I can come back to it. Thanks!

    Darlene Norris’s last blog post..Feline Eye Diseases

  2. TheSpot-er says:

    Thanks Darlene,

    More to come, so stay tuned :)

  3. Anthony says:

    I’ve been cautiously considering changing my theme from the default “TypoXP” in your product. This post makes me feel a bit more sure about it. Only thing that worries me is the possible loss of widgets using the Themer/ZenGarden combo. There’s probably some code we can add though right?

    Thanks again Alex!

    Anthony’s last blog post..UFC82: Pride of a Champion The Main Event. Finally Some Cards I Can Play!!!

    • TheSpot-er says:

      Anthony,

      There sure is but that is outside of the product scope. You can simply identify and add the code you need if you understand the process. It really is not that complicated but I simply don’t support it within the product.

      Alex

  4. Leland says:

    Great article! I plan on writing similar tutorials on my blog as well. Just one little thing I thought I’d add: you mentioned using the Exec-PHP plugin for executing PHP code within widgets. I think a more practical way would be using Daiko’s Text Widget which is actually an extension of the Exec-PHP plugin. It is specifically designed for executing PHP code in widgets.

    Leland’s last blog post..What exactly is a widget-ready WordPress theme?

    • TheSpot-er says:

      Leland,

      Thanks for tip … I just used to using Exec-PHP and since it has proven for me to work nicely and do all I need in one plugin – I stick with it but looks like interesting widget there. Thanks for sharing

  5. techguide says:

    Great article.. thanks… was real help in customizing my wordpress installation.

    techguide’s last blog post..Sony Ericsson’s T303 slider phone

  6. Doug C. says:

    Ok, this is by far the closest I’ve come to finding an answer for my problem, which is that my theme is always interfering with the way my widgets look. I can see that this may be an answer, but first I have a question….

    Say I have Twitter widget with it’s own script code and I want to paste this into a text widget to put in my sidebars. How would I “include” that in sidebar.php so my theme doesn’t mangle the appearance?

    Thank you.
    .-= Doug C.´s last blog ..Draw On Yourself =-.

  7. Doug C. says:

    Nevermind, I figured it out for myself.
    .-= Doug C.´s last blog ..Draw On Yourself =-.

  8. @judiknight says:

    Nice post Spot-er. Would you please make the links to the other resources live? Thanks so much!

  9. daus says:

    what a great post ! thanks for sharing ya, i really appreciated your hardwork for write this post.

    keep up your hardwork.
    My recent post Apple Ipad2 Bakal Dilancarkan Dapatkan Percuma Di Denaihati

  10. daus says:

    what a great post ! thanks for sharing ya, i really appreciated your hardwork for write this post.

Trackbacks/Pingbacks

  1. RT @MartyVettel: WordPressGuide Series: WordPress Guide – Customizing WordPress Theme Part 2: http://bit.ly/3DQk0e #WordPress

  2. Zna Trainer says:

    RT @delwilliams RT @MartyVettel: WordPressGuide Series: WordPress Guide Customizing WordPress Theme Part 2: http://bit.ly/3DQk0e #WordPress

Leave a Reply

Comment Guidelines: All your links are DoFollow links. No Keywords In Name. No inappropriate or offensive comments. No links to inappropriate or offensive sites. Comments must contribute to the discussion. ALL SPAM DELETED!

Comments Manually Approved prior to appearing!

CommentLuv badge

Notify me of followup comments via e-mail. You can also subscribe without commenting.