In Part 1 of this WordPress As CMS tutorial, I will show you some quick settings that will transform your WordPress installation into a simple website. I already did a clean WordPress install on my local web server and I will use Corporate Sandbox, my simple two column WordPress theme, as a starting point. It’s a light theme, with just a few images, ideal for the kind of website we’re trying to build.

There are just a couple of things that we need to change, before moving forward. The theme already has a Home link in the main menu, but since we’ll create a custom homepage, we’ll have to delete that link.

Open functions.php, go to line 4 and delete the following code:

<li><a href="'.get_option('home').'/" title="'.__('Homepage', 'sandbox').'">'.__('Home', 'sandbox').'</a></li>

We also have to insure the main menu only displays links to main pages and not child pages (that will come in handy when you implement a dropdown menu system, but not now), so replace line 5 with this one:

$menu = wp_list_pages('title_li=&sort_column=menu_order&echo=0&depth=1');

Now it’s time to get down to business:

1. Enable nice permalinks

Once you install WordPress, the permalinks (permanent links, basically the URL of a certain page) look something like this: http://www.example.com/?p=123 for Posts and http://www.example.com/?page_id=3 for Pages. That is the default structure, that we need to change. Website links usually look like this: http://www.example.com/about-us (much better for SEO and usability).

You can do that by going to Settings > Permalinks, choose Custom Structure, input /%postname%/ (we’ll change it later, but for now use this) and hit Save Changes.

If your links still work, than you’re all set. If not, you may have to change your htaccess rules for nice permalinks. Jeff Starr has a nice tutorial there, that saved me a lot of time when I first started using WordPress.

2. Create a home page and blog page

As you probably noticed, WordPress shows by default your latest posts on your front page. That’s not very practical if you want to turn the blog into a website (I know… for many people a blog is a website, but let’s not get into that right now).

So besides the Pages you already created (like About Us, Services, etc.) you need to create two more pages: one for the home page, which I like to call Home (clever, isn’t it?) and the other one for your blog page. Depending on what you want to use the WordPress Posts for, you can call it Blog, News, Press Releases, etc. I will create an empty page and name it Blog.

In case you didn’t know, you can change the Page Order (the order in which the links to Pages will show up in a menu, for example) at the bottom of the Write Page screen. You should use 0 for Home, the others are up to you.

Next go to Settings > Reading and where it says Front page displays, check the second radio button, then choose the appropriate Page from the dropdown.

Now hit Save Changes and go check your website. If you’ve done everything right, your home page will display the content from the Page you just created (Home) and your Posts will be accessible under Blog. Just the way most websites are set up to work.

3. Add main navigation to the header

Like I said, the Corporate Sandbox theme already has a built in header menu that automatically updates the links whenever you add a new page. But if you decide to start with another theme, that doesn’t have a header menu, all you have to do is add the following lines of code in your header.php file.

<div id="menu">
	<ul>
	<?php
		$menu = wp_list_pages('title_li=&sort_column=menu_order&echo=0&depth=1');
		echo str_replace(array("\r", "\n", "\t"), '', $menu);
	?>
	</ul>
</div>

This will generate a nice ordered list with links to your website pages, that we can style using CSS. You can go check my WordPress Tutorial: Rounded Corner Tab Menu Using CSS. I used categories as menu items, but it’s pretty much the same thing.

4. Add secondary navigation to the sidebar

This is where the fun part begins. Right now, all your pages will display the same blog sidebar, usually containing stuff like latest blog posts, categories, RSS, etc. That’s ok for the News / Blog page, but it’s not very useful for your other pages. We can make better use of that space.

You’ll probably decide to use subsections to split your content using a tree like structure (most websites do). So the sidebar will be a great place to add a secondary navigation menu. So for example the Services page can have three child pages: let’s say… Web Design, Print Design and Interactive. Create these three pages.

There are many ways to customize the sidebar, to display a secondary navigation menu instead of the default blog sidebar, but the easiest way is to use Conditional Tags. Basically if the current page is a Page (in WordPress terminology), we’ll show a secondary menu. Otherwise, we’ll leave the sidebar content intact.

<?php if (is_page()) {
	if ($post->post_parent) {
		$children = wp_list_pages("title_li=&depth=1&child_of=".$post->post_parent."&echo=0");
	} else {
		$children = wp_list_pages("title_li=&depth=1&child_of=".$post->ID."&echo=0");
	}
?>

<h3>Choose Subsection</h3>
<ul id="sidemenu">
	<?php echo $children; ?>
</ul>

<?php } else { ?>

//existing sidebar.php content goes here

<?php } ?>

Some pages will have an empty sidebar menu, but we’ll leave like that for now. Remember, this part of the tutorial is only about making a few settings to get us started. In WordPress CMS Part 2: Theme Implementation, we’ll start to build the actual theme, with CSS and everything.

LATER EDIT: I just realized the title says “settings and plugins”, but I didn’t mention anything about plugins. To be honest, there are no specific “must have” plugins (not that I know of) for building a website using WordPress as CMS, but there is one that I would recommend: Breadcrumb NavXT.

Was this useful?

I hope you enjoyed this tutorial! More WordPress tutorials like this one are coming your way. If you want to know more about using WordPress on your projects, you might want to subscribe to my RSS feed. Feel free to show your support by bookmarking this post and sharing it with others.