ulyssesonline.com

I’ve just added a Tab Menu on the WordPress default theme. Look above. I got the inspiration from Michael Heilemann of binarybonsai. As Mike has indicated, it’s perfectly ok to rip the code out from his website. That I did. If you are curious how I got it to work, then read on!

The following are step-by-step instructions on how to create a Tab Menu on your WordPress default theme. The Tab Menu works mainly with WordPress Pages. As a reference, a “Page” refers to pages created in WordPress, while a “page” means any generic web page. I also created a tab for the WordPress default page otherwise known as a blog page.

3 Easy Steps

1. Edit the CSS file.
2. Edit page.php file.
3. Edit index.php, archive.php, search.php and single.php.

Step 1
The first thing we need to do is to make backups of the files I mentioned above. Now, that’s completed. Let’s get started. Add the following code to your existing “style.css” file. I’ve added it to the end of the file so that it’s easy to locate them later on. You’ll probably need to adjust the positioning of the Menu Tab later to make sure it’s flush between the main content area and the header. This gives the impression of a tabbed menu. Also, don’t forget to change the color scheme to match your theme.

Step 2
Edit “page.php” and place this code just below the php get_header() statement which is located on the first line of the file. This code adds menu tabs to each of the WordPress Pages.

Step 3
Edit “index.php” and place this code just below the get_header() statement which is located on the first line of the file. This entry adds a home tab on the WordPress default page (blog). Repeat the same process for the next three files: archive.php, search.php and single.php. This is to make sure the Tab Menu appears in other pages within WordPress.

That’s it. Upload the modified files to your web server. Enjoy your new Tab Menus.