Building a wordpress theme without heavy lifting (Part II)

In this part of we’ll go through the use of dynamic page navigation, displaying page content, using page templates and getting your way around in wordpress in general.

In the first part of the post we’ve covered everything ’till this point so if you haven’t read it go back and start from there.

Before we begin it would be of great help for you if you bookmark the Codex WordPress page, since there is a great resource of functions, best practices and help in general.

Picture 16.png

So let’s get started with our dynamic menu on the top of the page. By dynamic I mean that it will highlight the current portion of the site.

The current menu is organized like so:

  • Home – page
  • Plan a cruise – page with info on cruising the Adriatic coast
  • Customer Support – page, faq …
  • About us – page
  • Contact us – page with the cForm driven input form

Before we go on creating the menu we should make those pages in the backend (administration) part of the site. Since we started doing this with the template provided by I’ve experienced a sudden surge of intelligence/inspiration and decided that from now on the site we’re working on will have some real content to promote upcoming summer season on the adriatic cost in Croatia.

And if you’re wondering why croatia, well, take a look at the answer over here, you’ll get the idea.

Every site has a story so this one will be about a small agency by the name “Adios” which is orientated to spanish spoken tourist looking for the best holiday on the Adriatic sea, in english… I know it’s ingenious 🙂

We’ll now create those pages in the backend. Go to Pages and make those 4 remaining pages as per top menu. We’ll fill the content later, first we need to build the dynamic highlight menu.


In case you’re wondering what’s “wrong” with my wp-admin… You’re looking at a regular wordpress plugin that themes only the administration side of the site. It’s called fluency2 by Dean Robinson and besides the good looks it is far more usable then the regular admin panel.

We’ll use those exact names you see in the picture for the current page reference.

The step where we created the pages is crucial because we’ll now need the names of those pages so that wordpress can recognize the current page.

As you might noticed, the url on the line 54 says: “plan-a-cruise” which is nice and readable and also SEO friendly way of displaying the link to the page. The way to do that is to go over the permalink part of WordPress administration (Settings -> Permalinks) and under the Custom structure select the radio button and enter /%category%/%postname%/ in the input field. Save changes. This way you’ll have your links formatted like they are supposed to.

Go and checkout an individual page in the admin panel and you’ll notice a editable link under the title of the page where wordpress renamed the page according to the title and added hyphens instead of the whitespace. Note: you can change the end part of the url by clicking inside the name (highlighted in yellow) and editing the content. Don’t forget to “Update Page” Neat 🙂 Here’s the picture:


Now we have to get down an dirty with our header.php where our main navigation is.

At this point the menu has only first two links converted for dynamic highlighting but just repeat the process for the rest of the links and everything should be fine.


OK here’s the code so you don’t have to type it yourself:

<div id="menu">
			<li <?php if (is_page('Home')) 
                echo " id=\"current\"";
       <a href="<?php bloginfo('url') ?>/" accesskey="H" title="Home"><b>H</b>ome</a>
			<li <?php if (is_page('Plan a cruise')) 
                echo " id=\"current\"";
       <a href="<?php bloginfo('url') ?>/plan-a-cruise" accesskey="P" title="Plan a Cruise"><b>P</b>lan a Cruise</a></li>
			<li <?php if (is_page('Customer support')) 
                echo " id=\"current\"";
       <a href="<?php bloginfo('url') ?>/customer-support" accesskey="S" title="Customer Support">Customer <b>S</b>upport</a></li>
			<li <?php if (is_page('About us')) 
                echo " id=\"current\"";
       <a href="<?php bloginfo('url') ?>/about-us" accesskey="U" title="About Us">About <b>U</b>s</a></li>
			<li <?php if (is_page('Contact us')) 
                echo " id=\"current\"";
       <a href="<?php bloginfo('url') ?>/contact-us" accesskey="C" title="Contact Us"><b>C</b>ontact Us</a></li>

As you see the php logic has been added inside of the <li> element and when the user is on the current page it adds an id to that element making it easy to style that with a new css rule inside the “style.css“, like this or similar:


Once you’ve edited the header.php and style.css as described above you should have everything in order and working. We’re done with the dynamic menu highlighting, congratulate yourself and prepare for the next step: The page templates.

Page templates

Page templates offer another way of making more customized content per page. Although there are certain plugins for wordpress templates it’s better to get yourself familiar with making them on your own when you can. Less plugins more social life, and a speedier and more maintainable site in the future.

To make a template is pretty easy ’cause all you have to do is to create or duplicate (better and quicker sometimes) the page you want to use as a template (in our case it will be the home.php file) and modify it to your likings. The only prerequisite is to put this piece of code at the top of the template file:

< ?php
Template Name: Special promotions

A good practice would be to name those templates meaningfully so when you choose them in the admin panel it’s easy to know which template is the right one, also give a meaningful filename like special-promotions.php.


As you can see from the image, it’s very easy to assign the template to an existing page. All you have to do now is to decide what the page will look like and what content will be presented here.

That’s it for now. We’ve covered dynamic page navigation, displaying page content, using page templates and getting your way around in wordpress in general.

Next time we’ll go ahead with the content editing and implementing the blog part back in our wordpress site as a special part of the site.

You made it all the way down here so you must have enjoyed this post! You may also like:

Creating a Magento theme from scratch Nenad Andrakovic
Nenad Andrakovic, | 18

Creating a Magento theme from scratch

Fancy Magento Global Messages Davor Budimcic
Davor Budimcic, | 29

Fancy Magento Global Messages

TWIG with WordPress part1 Darko Goles
Darko Goles, | 1

TWIG with WordPress part1

1 comment

  1. Nice post but we can get this same result with the use of wp_nav_menu() function.Its add “current-menu-item” class in li item so we can add css to meat our requirement.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.