How to edit the tabbed interface of BranfordMagazine
BranfordMagazine comes with a nice tabed interface on the homepage. By default (see my demosite) it has three pre-defined tabs but of course you can add or remove tabs to meet your specific requirements.
Changing the names of the tabs
By default the names of the tabs are:
- “Leadarticle” which holds the most recent article from a specific category (e.g. “news”)
- “Recent Posts” which lists the 7 most recent posts from any category
- “About” which shows just a few lines of regular text that explains a bit about the theme
In order to change the tabed section you need to open the file ui.tabs.php located in the /includes subfolder in the themes-directory. First I show you where and how to change the names of the tabs. Look up this piece of code on top of the file:
<div id="container-4">
<ul>
<li><a class="ui-tabs" href="#fragment-1">Lead Article</a></li>
<li><a class="ui-tabs" href="#fragment-2">Recent Posts</a></li>
<li><a class="ui-tabs" href="#fragment-3">About this Theme</a></li>
<!– Just add tabs as you like by following this scheme:
<li><a class="ui-tabs" href="#fragment-X">Link name here</a></li> –>
</ul>
If you want to delete e.g. the “About this Theme” tab just delete the whole line:
If you want to add another tab, add a line following this scheme (“X” needs to be a number):
That´s it for the names of the tabs. Let´s now change the content of the tabs.
Changing the content of the tabs
I´ll use the “Recent Posts” tab as an example. Again look into ui.tabs.php:
<div id="fragment-2" class="bullets">
<h3 class="title">Recent Posts</h3>
<p>To show the recent posts is just one thing you can use this tabbed section
for. There are many more. It´s up to your creativity.</p>
<?php wp_get_archives(‘type=postbypost&limit=7′); ?>
</div>
<!– END RECENT POSTS –>
As you can see this area is wrapped by a DIV element with the ID=”fragment-2″ corresponding to the ID of the link that defines the tab-name. This must match. Otherwise it can´t work.
<p>To show the recent posts is just one thing you can use this tabbed section
for. There are many more. It´s up to your creativity.</p>
This is just regular HTML-formated text you can put here almost everything you like. Just make sure it uses HTML-markup. If you like to put an image here you must use the whole HTML image-reference code. If you don´t know about HTML please learn at least some basics. Have a look at this documentation or use Google to find out more.
The next piece of code is the WordPress template tag that shows the 7 most recent articles.
You can now add or delete tabs and their content. Always make sure you do both. Just deleteing the “About this Theme” tab-name will not remove the content of that tab. If you add another tab (name) like “Info” and don´t enter any corresponding content you will not see anything.
I hope it´s clear so far. It´s no rocket-science but you need to work inside the code a little bit. That requires at least basic HTML, CSS and maybe PHP knowlege. Always backup your files before you make any changes!
