WordPress Logo

Creating a website is no easy task. WordPress is an easy solution for creating a Blog, but sometimes something a little more, in terms of functionality, is needed. After trying many other platforms, I have found WordPress to be the easiest to use. Because of it’s wide array of themes, great plugin system, and easy to use administration system, WordPress takes the cake. Using a Custom Write Panel, Custom Options, and manipulating the theme files, the possibilities are almost endless. In This post we have a few ways you can transform your plain WordPress powered Blog into an easy-to-manage Internet Identity.

The Layout

There are a few things that even the novice WordPress user can do. You can work straight out of your admin panel for a quick solution, or if you are feeling adventurous, editing some theme files can help produce a fresh new structure for your site.

Static Homepage

Anyone who has explored the WordPress admin panel has probably seen the options required for this, but may have not known what they do. WordPress has a built in feature which allows for the Blog owner to select a published page to show up as their default homepage, and select a separate page to list the blog posts. This is great if you want your visitors to see a static page first (ex. About Me page), before they go on and view the blog posts.

You first need to select the page which will show first. Just select any page from the drop-down list that has content on it. Next, you will need to select a blank (but published) page to show the blog posts on. Just create a page like you would normally, adding a title (ex. Blog), but no content. Select that page from second option’s drop-down

home.php

WordPress has another built in feature (it seems they love to make our lives easier) that allows for a completely custom homepage. If your homepage has a different layout from your blog, you can create a separate file, and have that loaded as your homepage. As seen in the template hierarchy, WordPress first checks to see if a home.php file exists. If so, it will load that instead of index.php.

So by creating a file named home.php, filling it with whatever you would like, and uploading it into your theme’s root folder, you are able to create a separate homepage. By utilizing the Loop, this is a great way to show only certain posts when the guest first views the site.

Note: All HTML Markup is based on the WordPress Default Theme.

<?php get_header(); ?>

<div id="content" class="narrowcolumn">

<h2>Welcome!</h2>

<p>This can be a custom part of the <code>home.php</code>, just a little custom welcome text. You can check out some of our latest <b>News Posts</b> below.</p>

This should all look pretty familiar if you have any experience working with WordPress themes. First, I’ve included the header.php file with the get_header(); function. Then just some basic HTML Markup that includes a welcome message at the top of the page.

<h2>News Posts</h2>

<ol>

<?php query_posts( 'cat=60' ); if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>

<?php endwhile; ?>

<?php else : ?>

<li>There are no new posts in this category.</li>

<?php endif; ?>

</ol>

Here is where we are going to list our latest Blog posts. It is just a basic loop, except for one minor difference:

<?php query_posts( 'cat=60' ); ?>

query_posts can be used to modify a WordPress loop. I’ve modified this loop to only show one category, in my case, a news category.

The last part of our home.php:

</div>

<?php include_once( TEMPLATEPATH . '/sidebar-homepage.php' ); ?>

<?php get_footer(); ?>

The last difference is the way I include a sidebar. By using an include_once(), I can include a different sidebar in our home.php. You can use a Include Tag to include a separate file. In the same directory as your theme files, create a file you would like to include in your sidebar.

Live Examples

WooThemes

Custom Page Templates

Like using a home.php, using a Custom Page Template is useful for creating unique pages that do not fall under the same layout as your main blog. However, custom Page Templates allow for any page to be custom, not just the homepage. The best part about them, is they are super easy to make.

If I wanted my “About Me” page to include a different sidebar then the rest of my blog, and perhaps the Search Form above it, there is a very easy way to go about this. In your theme’s directory, just create a file called about.php

<?php
/*
Template Name: About
*/
?>

That is the most important part. WordPress will read the top of the file and realize that this file is supposed to be used as a Page Template. Below that, you can add whatever code you like. There are two ways of doing it. You can add static content to your post, or add the Loop again, so the content is retrieved from WordPress. Here is an example of the latter:

<?php
/*
Template Name: About
*/
?>

Live Example:

Cushy by WooThemes

Conditional Tags

Let’s face it. Viewing the same style pages eventually get’s a little mundane. If you’re looking for a way to spice up your site, or just show different information on certain pages, there are a few ways to do it. Conditional Tags as well as custom pages allow for the ultimate control. Below are just a few scenarios:

If you are not currently viewing a Page, show the sidebar. If you are on a Page, do not show the sidebar.

<?php if( !is_page() ) : ?>
<?php get_sidebar(); ?>
<?php endif; ?>

If you are on the homepage, get a special footer file. If not, show the normal one. This could be used to show more information about your company or site when the visitor first views the site.

<?php if( is_home() ) : ?>
<?php include (TEMPLATEPATH . "/footer-info.php"); ?>
<?php else : ?>
<?php get_footer(); ?>
<?php endif; ?>

For a full list of Conditional Tags, check out the Codex.

The Loop

The Loop. The Loop. The infamous loop. The Loop can be a wonderful thing, or a scary one. It all depends on how you approach it. I’m going to show you a more advanced way of using a Loop, because you can find some great info on the Loop on the WordPress site.

Creating a Gallery Site

Creating a gallery can be great for a portfolio site, a “best web gallery” site, or anything that requires showing some images of stuff. :P

The code and/or information below assumes you have successfully setup Custom Write Panels

The basic structure for a gallery type site is simple. Create the post adding the necessary information, and list the posts in the gallery page. To start off, make sure you have added the following Custom Write Panels.

  • Image
  • Website

These are the only ones needed to create a simple gallery, but of course it can be easily modified to fit any of your needs. The next part would be to create the actual Gallery page. This can be done using a Custom Page template.

<?php
/*
Template Name: Gallery
*/
?>

<?php get_header(); ?>

<?php get_footer(); ?>

Now it’s time to add the loop (in between get_header(); and get_footer();) which will show our posts.

<div id="content" class="widecolumn">

<?php query_posts( 'category_name=Gallery' ); if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>

</div>

You will of course need to change category_name=Gallery to the name of your category.

For now, I’m just going to do the basic markup. No styling or anything, just so you can get how the the code will be set up. First, we’ll do our gallery item’s title like normal:

<h2><?php the_title(); ?></h2>

Now the cool part. Using a great script called TimThumb we can dynamically create thumbnails of any size. Download the source, and upload it into your theme’s folder under thumb.php

Download TimThumb

Now we’ll start a link so the thumbnail is clickable.

<a href="<?php echo get_post_meta( $post->ID, "website_value", true ); ?>" title="<?php the_title(); ?>">

I’m setting the URL to be equal to the value entered in our custom field.

Next the image: This gets the value of the image field, and applies the TimThumb code, setting the thumbnail to 100x100px.

<img src="<?php bloginfo( 'template_directory' ); ?>/thumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>&amp;w=100&amp;amp;amp;amp;amp;h=100&amp;amp;amp;amp;amp;zc=1" alt="<?php the_title(); ?>" />

And end the link:

</a>

The last part would be to show the description of the website. We can do that by showing an excerpt of the post body.

<?php the_excerpt(); ?>

That’s it for our gallery.php. Now it’s time to activate the Gallery page. In your WordPress admin panel, go to Write > Page. Create a new page with a title of “Gallery.” Leave the body blank, and apply our Page Template

Now, create a post with the correct information, and visit your gallery page. It should list all of your information! Of course, the gallery.php is a very simple, minimalistic page; but it functions.

Note: If your thumbnails are not showing up, please make sure you created a folder named “cache” in your theme’s directory, and it is writable.

Custom Loops

Sometimes you may find yourself needing to use more then one loop. However, an important note on the WordPress codex tell us that instead of using query_posts like we did in our gallery system (it was okay there, because it was the main, and only loop, in our page), we need to use something called WP_Query();. This can be used to fetch any posts, and best of all, it uses the same parameters are query_posts.

First, we need to define a variable as a new query. Then we take that variable, and apply some parameters to it:

<?php $latest = new WP_Query(); $latest->query( 'showposts=10&amp;amp;amp;amp;amp;cat=-63' ); ?>

Next, we simply loop through the results just like we would with a normal loop.

<?php while ($latest->have_posts()) : $latest->the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
<?php endwhile; ?>

Like I said, you can use any of the Parameters, making this a great tool to grab posts from certain categories and displaying them around your site.

Social Networking

With the amount of social networking sites, topsites, and tons of ways to spread the word about your articles and blog posts, there has to be an easier way to submit them. By adding links to the bottom of your posts, you can get users to submit your articles for you!

Site RSS

<a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">Subscribe</abbr>'); ?></a>

Stumble Upon

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="Submit to StumbleUpon">StumbleUpon</a>

Digg

<a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>&amp;bodytext=<?php the_excerpt() ?>" title="Digg this story">Digg this</a>

Del.ic.ious

<a href="http://del.ic.ious/post?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" class="delicious" title="Add to Del.icio.us">Del.icio.us</a>

Design Float

<a href="http://www.designfloat.com/submit.php?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>">Float This</a>

Mixx

<a href="http://www.mixx.com/submit?page_url=<?php the_permalink(); ?>">Mixx</a>

Obviously there are tons more. All you have to do is figure out what variables the submit page takes to fill in the fields, and then create the URL dynamically. Here is a list of some variables you can use.

  • the_title(); – The Post Title
  • the_permalink(); – The Post’s URL
  • the_excerpt(); – A small portion of the article

Conclusion

There are a million ways you can customize and expand your WordPress powered site. I’ve touched on a few, but of course, there are many more. If you are interested in learning a different aspect of WordPress, please leave a comment and let me know. I’ll leave you know with some great WordPress powered sites, that you may or may not have known ran WordPress.

Resources
WordPress Powered Sites

CNN Blogs

Best Web Gallery

Fuel Your Creativity

Number 10.co.uk

Outlaw Design Blog