Posts tagged blogging

Using WordPress to Build a Website – Part 2

Introduction

In part 1, I wrote about how to create a static home page for the top level of your website, with all of your blog related pages under “/blog” path. This article is about building out the rest of your site using static pages and adding a navigation menu by selecting the right theme.

Before moving on, you should add a few more pages to your site, something like this.

  • About
  • Contact
  • Sitemap
  • Products
    • Subproduct 1
    • Subproduct 2

Of course you should change the names of the pages to suit your needs. Make sure Products is a parent page to Subproduct 1 and Subproduct 2 by setting the Parent attribute of the sub pages.

Finding a Theme

Now that you have some content on your site. It is time to find a theme that you like and to display the site navigation in a way you require.

The important part of selecting a theme is to make sure it uses the page hierarchy as navigation items instead of the post categories. So when previewing the theme, make sure the navigation looks like this:

Page Hierarchy as Navigation

Instead of this:

Post Category as Navigation

You want to provide easy navigation to your pages first, and your blog second. Another thing to look for is a drop down menu to display hierarchy of pages.

CSS Dropdown Menu Items

It is much easier not use the drop down menu feature than to add it later by hacking CSS to add it to the theme you selected.

Managing Your Navigation Menu

Now that your navigation menu is tied to your page hierarchy, you should use a plugin to manage it easily. I use a plugin called pageMash. It allows you to hide pages you don’t want to display in the navigation menu, as well as drag and drop to modify the page hierarchy.

Managing the Navigation Menu

In addition to managing the page hierarchy, you also need to manage the label of the page in the navigation menu vs the title of the page that’s displayed when you view the page. My about page’s actual title is “About AlwaysOn Technologies” but navigation label is just “About”.

This ability is added by another plugin, All in One SEO pack. This plugin has more features than I can get to in the article, you can dig deeper into it in tutorials. All we are going to do for now is set the Title, which will be label displayed on the menu.

Setting the Menu Label

Adding a Contact Page

To making contacting you easier, you need a contact page where users can send message directly without having to fire up an email client. Thankfully, there are plenty of plugins that will create a contact form for you. The one I used is Contact Form 7 which uses markup to create the form so it is very flexible.

By now, you should have a functional website that the users can actually navigate and contact you. The next article will be about sending your site information to search engines and leveraging social media.

Using WordPress to Build a Website – Part 1

Introduction

WordPress is a popular and well supported blogging platform and I’ve been using it for years for blogging. Now I am using it to build up a small website.

I am getting ready to launch an iPhone application called Cloud Browse and need a web presence to promote my company and the product. Since I am going to blog on this new site, using WordPress to do everything makes a lot of sense.

There are a lot of articles on the web talking about how to use WordPress as a Content Management System (CMS), but most of them are a jumbles list of tips and plugin suggestions.

I am going to write step by step how I got my site up and running, along with the plugins I used to and why I chose them. My site is very simple so hopefully it will be useful to others to get started before diving deeper with other articles.

The Basic Steps

Disclaimer: I am using WordPress 2.9.1, so if you are using an older version, the steps I am using may not work for you.

A plain WordPress install already include all you need to get a simple site up and running. Assuming you want a home page at http://example.com, and the blog at http://example.com/blog, just follow the steps below. I’ll describe what each step in detail after.

  1. Add two pages called “Home” and “Blog”

    Add Pages

  2. Go to Dashboard > Settings > Reading and set the Front Page Display to “A static page” with Front Page as “Home” and Post Page as “Blog”

    Setting Front Page to a Static Page

  3. Go to Dashboard > Settings > Permalinks, change Common settings to “Custom Structure” to “/blog/%year%/%monthnum%/%day%/%postname%/” and set Optional > Category Base to “blog/topics” and Optional > Tag Base to “blog/tags”

    Move Blog Permalinks to a Custom Path

If you’ve been following the steps, now you should have a basic web site displaying the “Home” page at the top level, and a regular blog under “/blog.” Read on to dive into what each of the steps actually did and how to customize each step.

The Gory Details

  1. The Home and Blog pages are required for step 2. The title of the home page isn’t important, but the contents of the page is what gets displayed at the top level of the site.The title of the Blog page is important since it is what determines the path the blog shows up under, more specifically, it is the slug of the page that determines the path. So if you want your blog to show up under “/diary” then make sure you name your page “Diary.”
  2. Front page displays is the important setting that allows the blog section of your site to be separate from the rest of the pages. WordPress will show the Front page as the top level content and the list of of blog postings when viewing the Posts page. WordPress won’t even display the contents of the Posts page so don’t bother putting any content in it.
  3. Using a custom permalink structure is important for two reasons. One is so users can see the title of the post within the url, which is also important for search engine ranking, and the second is so all blog posts shows up under “/blog”. You can customize the structure but be sure to start with “/blog.”Setting the Category base and Tag base is again to keep all blog related urls under “/blog.” If you don’t set this, the default url would look like “http://example.com/categories/a-category.”

Now you’ve got enough knowledge to start a basic site using WordPress. The next article will focus on creating a site structure by adding more pages and setup the navigation menu.