alex sysoef
expert wordpress

WordPress Guide – Customizing WordPress Theme Part 3

In last and final part of Customizing WordPress Theme Guide I want to provide details on how to take advantage of your Sidebar even more, while using less of valuable real estate.

Taking advantage of Javascript Domtab technology we will create a tabbed sidebar section exposing your best and most popular content much like Darren at Problogger does but I will make it simple enough that even a brain dead can follow and implement.

But before I begin describing HOW we will accomplish the task I want to present the example of what you will get. You can see the exact code implemented on my sidebar and in image below:

tabs.jpg

And here is explanation of 4 tabs you will create:

  1. Most Recent - List of 10 most recent articles on your blog
  2. All Time – List of 10 post ALL Time popular on your blog
  3. One Month – List of 10 Most Popular articles in one month. This list will vary based on where on your blog it is accessed as it uses dynamic values to get Value of the month. So if your last post on index page is dated February – you will get list of 10 most popular articles in February, if someone is browsing older archives – they will get a list of most popular articles for that month.
  4. Your Favs – List of 10 or however many posts you decide to add that you personally create and edit. Use this section to highlight content you want to be exposed.

Requirements:

In order for this tutorial to work – you will need to have 2 things in place:

  • Popularity Contest – you must have installed and activated latest version of this plugin by Alex King
  • Domtab Script – download latest version, this tutorial created using 3.1415927. Just get it to your desktop and I’ll explain how we will use it.

Once you have installed and activated Popularity Contest plugin and downloaded and extracted to your local drive you are ready to move into next stage…

Installation Of The Domtab Script

Once Domtab script is extracted into its folder on your hard drive (desktop in my case) I need you to go inside the folder and create a NEW file: bestof.php

See image below, I pointed to 2 files: bestof.php you have just created and domtab.js that came with the script:

domtab.jpg

Your bestof.php file is empty at this point but don’t worry, we will fill it in with some useful stuff soon Smile.

In next step I want you to upload 2 files pointed above to your blog’s theme folder. Once again I outline the what and where in image below

uploaddomtab.jpg

And here is what I point in image:

  1. Location of the files on your local drive
  2. 2 files you need to upload to your theme folder
  3. Your theme folder on your host
  4. Files already uploaded into your theme root folder

Once your files are uploaded into the theme folder you will need to call the domtab.js from within your theme to activate it and be able to use it. We will do it by inserting a small piece of code from header.php file.

Go to Admin->Presentation->Theme Editor and open header.php for editing. Insert this code right before the </head> closing tag:

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/domtab.js"></script>

activatedomtab.jpg

Make sure to type code into text editor and not simply copy/paste as it WILL NOT work properly.

Style Your Future Tabs

Before we do anything else we need to add some styling to our theme to be able to handle the new tabbed content properly. I’m not a theme designer so I have borrowed the code from WPDesigner and simply adopted it to my theme:

/* Best Of Integration */
#sidebar ul.domtabs{
float: left;
width: 384px;
list-style-type: none;
margin: 0;
padding: 0px;
background: #fcfcfc;
border-bottom: 1px solid #eee;
font-family: “Trebuchet MS”, Verdana, Arial, Helvetica;
clear: both;
}
#sidebar ul.domtabs li{
float: left;
display: inline;
}
#sidebar ul.domtabs li a{
display: block;
padding: 10px;
border-right: 1px solid #eee;
text-decoration: none;
color: #F25805;
font-weight: bold;
font-size: 1.2em;
background: #fcfcfc;
}
#sidebar ul.domtabs li a:hover{
text-decoration: underline;
color: #0D6AA6;
}
#sidebar ul.domtabs li.active a{
background: #fff;
}

As you can see in example above I had to add #sidebar statement to style due to the tabs going into that specific section of my theme. You can find original code on WPDesigner and adopt it to your theme. Sorry, I have no way of knowing what your theme requirement will be so you will just have to experiment, please don’t ask for support here as once again – I’m no designer…

Add Content To You “Best Of” File

Now we are ready to add content to the bestof.php file we have uploaded to our theme. Simply navigate to Admin->Presentation->Theme Editor and open bestof.php for editing.

Download this text file, add its contents to the bestof.php file and save it. You will need to edit it to your liking before saving and I pointed out section below you need to edit:

bestof.jpg

Simply replace “#” with your URL and Link 1 with Name of Article. Copy entire line and add below first line and edit accordingly for more links. Simple huh? Cool

Showing Your Creation To The World

The time is here to show your newly created Tabbed Content to the world… and possibly work out any kinks you encounter. This is done by inserting your new file into sidebar using include statement we have learned to use in Part 2 of this tutorial. Do remember it needs to be done outside of The Loop as I have described in previous tutorial:

<?php include (TEMPLATEPATH . ‘/bestof.php’); ?>

Code above will tell your sidebar template to include your new file into the rendering. Once again I can’t provide details on where that code needs to go due to many differences in configuration but here is example of where I put it:

addtosidebra.jpg

Now that concludes the tutorial but with much more coming I suggest you subscribe to my RSS and would appreciate a social plug.

Series NavigationWordPress Guide – Customizing WordPress Theme Part 2WordPress Guide – Enhancing Image System
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

20 Responses to “WordPress Guide – Customizing WordPress Theme Part 3”

  1. I still don’t get it? It keep giving me this when I load my page :

    * Tab 1
    * Tab 2
    * Tab 3

    Insert contents of the first tab here, e.g. The code for a plugin.

    Insert contents of the second tab here.

    Insert contents of the third tab here.

    I think a lot of people are having this trouble and it seem Till now I still don’t get a even descriptive steps to solve this problem….

    Wong Chendongs last blog post..Insider Tips To Maintaining A Successful Blog

    • TheSpot-er says:

      Wong,

      I’m not sure the intent of your comment … Are you asking for help? Stating the problem?

      Layout of the tabs defined by css and content via code your insert there OR static content defined and formated via css again. It is fairly simple.

  2. I mean I have put the Domtabs.css and .js files in my theme and have insert the code above my , and put the long code into my side bar, but it display the words I mention on my previous post.

    So, I was wondering why is it displaying text on my site but not the domtabs I wanted?

    thanks for the reply…

    Wong Chendongs last blog post..Insider Tips To Maintaining A Successful Blog

  3. TheSpot-er says:

    Wong,

    More then likely because your css definitions are not working properly. In fact I’m pretty sure that is the issue. Sorry, I can’t help you with that and you will need to find a designer. Generally this shouldn’t be more then $15-20 if you post project on elance ….

  4. Oh thanks for the recommendation, I will try to get a designer ….

    Wong Chendongs last blog post..Insider Tips To Maintaining A Successful Blog

  5. Steve says:

    The ideal solution is to leverage a WYSIWYG editor for theme development. Such an editor did not exist until now. With the ThemeDreamer extension to Dreamweaver, you can now use Dreamweaver’s native features to open a WordPress theme file, make edits, navigate its code, see common template tag options in action, and use Dw’s Design View to apply CSS settings, dragn’ drop positioning of highlight code, etc. Code Hints and context sensitive help simplify development even further. Using ThemeDreamer eliminates 90% of what would normally be slow, blind edits to files (aka trial and error modifications). See before/after and you’ll notice the ease of having a realtime ‘approximation’ WYSIWYG editor can do for you, just google ThemeDreamer and have a look at the screenshots!

    Steves last blog post..New Version 0.2 Available for Download!

  6. Rangarajan says:

    Hi Alex,

    Which are the plug-ins available to customise:

    1. The fonts of text messages in the widgets and

    2. To hyperlink the textlinks in the widgets ?

    Thank you,

    Rangarajan

    • TheSpot-er says:

      Sorry – no idea. I use HTML for that as I don’t think extra plugins needed. Just use Text Widget and put HTML code to format the text as you need it to be. Adding extra plugin just for that is a waste of resources as it will add to page load time, for no reason.

  7. Vince
    Twitter: volaer
    says:

    Hello again,

    Well, I am trying this method. But I am not seeing any tabs on my blog… do you know what may be wrong??? pls visit my website: http://www.thedisciplers.com so that you can see what is wrong. Thanks for this post. I know I am near. I just can’t make it perfect.

    Vinces last blog post..New Host Servers

    • TheSpotter says:

      Vince,

      You have to properly define css classes. Sorry – it is not something I can teach or do for you. Just try, research, you will find the answer!

      Alex

  8. Vince
    Twitter: volaer
    says:

    Another question, where should I put this code?:
    /* Best Of Integration */
    #sidebar ul.domtabs{
    float: left;
    width: 384px;
    list-style-type: none;
    margin: 0;
    padding: 0px;
    background: #fcfcfc;
    border-bottom: 1px solid #eee;
    font-family: “Trebuchet MS”, Verdana, Arial, Helvetica;
    clear: both;
    }
    #sidebar ul.domtabs li{
    float: left;
    display: inline;
    }
    #sidebar ul.domtabs li a{
    display: block;
    padding: 10px;
    border-right: 1px solid #eee;
    text-decoration: none;
    color: #F25805;
    font-weight: bold;
    font-size: 1.2em;
    background: #fcfcfc;
    }
    #sidebar ul.domtabs li a:hover{
    text-decoration: underline;
    color: #0D6AA6;
    }
    #sidebar ul.domtabs li.active a{
    background: #fff;
    }
    I really don’t know where to put this. SHould I add this to the Sidebar.php or to the Styling.css??? ahhh… really can’t get the tab look of “Domtab” please help….

    Vinces last blog post..New Host Servers

  9. Sajid Latif says:

    Customizing Your Theme Part is nice and good. I think I got some result. Thank you here.

  10. Thanks dear. Great one to help me for my wordpress customisation.

Trackbacks/Pingbacks

  1. [...] WordPress guru, Alex Sysoef, has written a great series about how to customize your WordPress theme. If you are new to the concept, you should not miss these posts! WordPress Guide – Customizing WordPress Theme Part 1,WordPress Guide – Customizing WordPress Theme Part 2, WordPress Guide – Customizing WordPress Theme Part 3 [...]

  2. [...] themes and until now it required either manual hacking, like I have explained in my previous post WordPress Guide – Customizing Your Theme Part 3, or using brand new plugin that was recently [...]

  3. [...] themes and until now it required either manual hacking, like I have explained in my previous post WordPress Guide – Customizing Your Theme Part 3, or using brand new plugin that was recently [...]

  4. RT @MartyVettel: WordPressGuide Series: WordPress Guide – Customizing WordPress Theme Part 3: http://bit.ly/3ZsIIM #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.