Firebug to tweak wordpress theme

By in Software Reviews on March 12, 2010


If you use wordpress theme, usually there are a place for you to put widgets. Somehow, there is a time when you want to insert something (ex: banner) at other area than the widget. You might find this quite difficult to do especially if you do not have enough skill in CSS and PHP language.

In this case, you can try to install a Mozilla Firefox addon called Firebug to help you inspect a blog theme. After inspecting a theme, you will have an idea where to put the desired coding for the banner.

Although in this post I focus more in [intlink id=”959″ type=”post”]Wordpress theme[/intlink] inspecting, you can also use Firebug for Blogspot theme or inspecting any kind of websites.

Okay, lets go for a tutorial of how to put banner at the header by using element inspection from the Firebug Firefox.

After activate the Firebug application (located at the right corner of your Mozilla Firefox browser), you need to activate the Inspect Element button.

In this case, I want to put the banner below the main navigation bar. So I just placing my mouse around the navigation bar until I find the desired table (Firebug will show the table with blue color).

Thanks for the Inspect Element feature, I can easily know which part of the theme coding that I need to tweak that is inside the div class menu span-24. Since I want to place the banner below the navbar, I should put the coding of the banner below the navbar coding (that is located in the div class menu span-24).

After knowing which div class you should put the code of the banner, then you need to find the exact part in the wordpress theme that make the table. The wordress theme function that you need to find may vary according to the theme that you are using.

For IT and engineering students that already learn programming language such as C++ or verilog, they may find this to be no more than a child’s play. For this wordpress theme, the coding for the table is situated in the head.php.

After inserting the banner code, don’t forget to save. That’s all.

<div class=”menu span-24″>

<div class=”paddings”>

<ul class=”menu”>

<li class=”<?php if ( is_home() ) { ?>current_page_item<?php } ?>”><a href=”<?php echo get_option(‘home’); ?>/” title=””>Home</a></li>

<?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?>

</ul> (the orange part is for the main navigation bar)

</div>

<center><a href=”/picjoke-com/”><img src=”http://mrr2.com/marathon-banner.jpg”></img></a></center> (the green part is for the banner coding)

</div>

</div>

And finally, there it is. A banner under the main navigation bar.

Comments are closed.