Nimbus WordPress Themes

By Evan

Increasingly, WordPress is becoming an ideal content management option for non-blog, static style sites. Over the last few years the platform has evolved to include several options, making the transition from a blog site to a custom themed, non-blog WordPress site easy. In this tutorial, I will go over the steps to make this transition using the Slate theme.

Before we dig into the code, we need make a few changes from your WP-admin dashboard. Select Permalinks from the Settings dropdown section. Select the custom radial button and enter/%postname%/ into the field that follows. This will ensure that the URIs for your pages will use the custom slug, like www.yourpage.com/slug/, rather then the default number string. This is important because we will be hand coding in the navigation tabs selectively rather then calling up all the pages at once.

The next step is to create the page where we will direct the blog to. I know that the goal of this tutorial is to create a static, or non-blog style WordPress site, so this step seems odd, but it’s important, as you will see. Create a new page, title it blog, and publish it.

Since you are in the Pages administrator already, create another page that will act as your site’s home page, or front page. Call it whatever you would like, but make sure it has a clean usable slug in the permalink field. I am calling mine Frontpage and using the slug frontpage.

Now we need to redirect the blog and assign your new front page. All of this is accomplished in the Reading Settings panel under Settings on your dashboard. Under the heading Front page displays, select the A static page radial button. Below that, select the page you created for your front page in the front page dropdown, and select the page blog in the blog page dropdown. By saving these changes, you have turned your blog into a non-blog style WordPress website. Now we need to make the navigation in your theme reflect this.

Out of the box, the navigation for the Slate theme looks like this:

<div id="nav">
    <ul>
	 <li class="left <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_option('home'); ?>/" title="<?php _e('A link to home page', 'default'); ?>"><?php _e('Home', 'default'); ?></a></li>
	 <?php wp_list_pages('sort_column=menu_order&depth=1&title_li');?>
         <li><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>
     </ul>
</div>

This section of the file header.php makes up the navigation consisting of three sections. The first section:

<li class="left <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_option('home'); ?>/" title="<?php _e('A link to home page', 'default'); ?>"><?php _e('Home', 'default'); ?></a></li>

This links to the page you have assigned as the front page. We will keep this code because, while our front page no longer includes the blog loop, we do want to include our new home page in the navigation.

The second two items:

<?php wp_list_pages('sort_column=menu_order&depth=1&title_li');?>
         <li><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>

The first of these lines of code calls all of the pages you have created. Because we will be excluding our new page blog, we will erase this line and code our pages in individually. The second line is a link to the RSS feed for your site. As you are developing this site as a non-blog themed WordPress site, you will not need the RSS feed. You can erase that line as well.

In the place of the deleted lines of code you will want to add links to any page you wish to include on your site. This is the format for these links:

<li <?php if (is_page(Pagetitle)) echo('class="current_page_item" '); ?>><a href="<?php bloginfo('url'); ?>/slug/">Tab Title</a></li>

In the place of ‘Pagetitle’ you will write the title of the page. In the place of ‘slug’ you will write the slug for that page. You can use anything you wish as the ‘Tab Title’.

Here is an example. Let’s say I create a page called Blogging (note the upper case B), and give it the slug blogging (note the lowercase b). I add a linked tab to my navigation like this:

<li <?php if (is_page(Blogging)) echo('class="current_page_item" '); ?>><a href="<?php bloginfo('url'); ?>/blogging/">The Blogging Life</a></li>

You can see that I used the title with the uppercase B in the first instance, and the slug with the lowercase b in the second instance. The tab title is whatever I wanted visible on my page.

If you followed these steps, you now have a non-blog style WordPress site using the Slate theme. Just remember that when you decide to add an additional page to your site you will need to manually code in the linked tabs.

Happy Blogging!

Related Media

  1. Free Photoshop Texture: Graffiti No. 2
  2. The Roundup of Roundups
  3. Cool Fonts: Calligraphy Fonts & Wedding Fonts
  4. Weekly Blog Stats Review: 07.11.09-07.17.09
  5. Organize your Photoshop Brushes

Comments

  1. Jason
    10.16.09

    … I also find myself torn between the coffee shop and my dual monitor setup :)

  2. Cyndi Hall
    11.04.09

    May I suggest ABR Viewer as an alternative to loading and trying each brush in Photoshop? It’s free, and I use it regularly. You may find this a great time-saving alternative!

    http://abrviewer.sourceforge.net/

    Hope it helps!

  3. Kendall
    11.04.09

    Thanks for the referral, Cyndi! I’ll have to spend some time tonight trying it out.

  4. 4elves
    02.11.10

    I love you to pieces man!!

  5. Lia
    10.14.10

    I wished and wished for a Mac, then was given one at work.

    So I moved all my files over.

    I HATE it. I’m a designer. I have about 50 folders for 50 different projects. I name the banner psd “banner.psd” for all of them. Try and search for them all, yeah the Mac finds them but then you have to do “get info” for each one (or change some such setting and still click on each to see where the dang thing is located. On windows. I glanced at the path to the folder and voila. Yeah changing permissions on Vista is a headache but it’s far better than the constant problems I have on the Mac. Photoshop is twitchy at best, the thing crashes, although my Roku, PS3, Wii, personal laptop all do fine with my wirless, the mac drops it all the time. I use multiple monitors. Oh my god what idiot thought of leaving the application menu on one screen when the application is on another? You can only choose one little sprout because Steve Jobs knows better than you how you should work.
    can’t wait to ditch it.

    sorry tirade over.

    ps tons of free windows applications out there.

  6. Obcali
    11.26.10

    Um… how about not naming all of your files the same name? Sounds more like an organizational issue than an operating system issue, either way.

    I might recommend using an identifier and THEN _banner.psd? I assume it’d be difficult to find photos as well if every picture on a drive had its own folder and was named “photo.jpg”.

    Examples:
    Projectname_size_banner.psd
    Clientname_size_banner.psd
    etc…

  7. Russell
    04.17.11

    Ok, so… I’m a total newbie to photoshop. I have CS5 and a brickton of brushes. I have tried renaming them, but they do NOT show up in the list like I want them to. I’ve played around with it for like a half hour. Can anyone please help?

Leave a Comment