Building a wordpress theme without heavy lifting (Part II)

Featured Image

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 frecsstemplates.org 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.

wordpress-admin.png

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:

Untitled.png

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.

wordpress-dynamic-menu.png

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

<div id="menu">
		<ul>
			<li <?php if (is_page('Home'))
                {
                echo " id=\"current\"";
                }?>>
       <a href="<?php bloginfo('url') ?>/" accesskey="H" title="Home"><b>H</b>ome</a>
       </li>
			<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>
		</ul>
		</div>

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:

current-css-Cropped.png

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.

choosing-template.png

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.

1
Top

Care to rate this post?

Author

Zeljko Prsa

Ex. Inchooer

Zeljko worked at Inchoo from 2008. to 2012. as a frontend developer.

Other posts from this author

Discussion 1 Comment

Add 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.

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top
  • Wordpress with E-Commerce?

    Wordpress with E-Commerce?

    It is a neat idea for a small businesses. Especially if you want to test your market. However, if you want to switch to an enterprise solution, Magento is the best choice. Take a look at our services and find out what we can do to help.

    Learn more Get a quote
  • Hire Magento Developers

    Magento Certified Developers

    Teams of certified Magento developers are available to work on your next big thing!

    Hire Magento Developers Get a quote
  • Our Latest Project

    Wholesale Boutique

    Wholesale Boutique

    Wholesale Boutique supplies their customers with the best embroidery blanks perfect for personalisation.

    See our work
  • The Inchooers

    Meet The Inchooers, the funny bunch of magento developers.

    Archive