How to edit the tabed 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!
More Stuff from Elsewhere
Leave a Reply
Do not use this comment section for support requests. Please use the support forum for this purposes only. Comments containing support topics will be deleted without further notice!
4 Comments
Wilfried Voss - 17.02.2010
The options allow me to define the content of the first tab, and that’s great. But, apparently, nobody else but you needs the content for the third tab, and I would like to fill it up with something else. That’s where an example would be helpful.
Michael Oeser - 17.02.2010
Well but I do give an example and this works similar for any tab: “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.”
For any additional support please use the support forum. Thanks.
Wilfried Voss - 17.02.2010
First of all, this is a great theme! Complex to handle for somebody too lazy to do programming, but still great.
You explain nicely the content of the second tab, but you don’t really explain how to change the content. Another example with different content might be a great help.
Michael Oeser - 17.02.2010
For the basic setup you don´t even need to touch the code. There is an options page in the WP-Admin. I don´t get your point with the tabed section. Which content do you mean?