PDA

View Full Version : Creating a wordpress layout

hdshngout
06-21-2006, 09:08 PM
Wordpress Layouts at first seem extremely hard (and in some cases, not worth the effort), but once you get a feel for how the wordpress templates work, it becomes easier and easier.

Preping the Layout

The first thing you want to do is design a layout in plain html coding, or if you are stuck in a layout block, or are too lazy to design a layout (don’t feel bad, I’ve done the same thing), head over to OSWD.org. It’s an open source template site, which contains literally 1000’s of free templates for you to download and use.

The next thing you want to do is divide your layout into 3 main parts…

Your Header
Your Body
Your Menu Bar
& Your Footer

Typically your header contains
<html>
<head>
<link rel="stylesheet" type="text/css" herf="style.css">
<title>Your Page Title</title>
</head>
<body>

Your Header Information

Take that part of your layout’s coding and save it as header.php. We will come back to this part later.

Now for your footer section. Generally the footer contains…
Your Footer Information
© 2006 Whoever (etc)

</body>
</html>

Take the coding and save it as footer.php

Now whats left in the original template, save as index.php. But Wait! We’re not done yet. Inside the coding find the coding that takes up the menu. This differs per layout, So I theres really not an example I can use, but as a reference its usually in a div called menu, sidebar, navigation, or somthing similar. Take that coding and save it as sidebar.php.

Time To Wordpressify

Lets begin with header.php. To begin find
<link rel="stylesheet" type="text/css" herf="style.css">

and replace it with
<link rel="stylesheet" href="<?php bloginfo(’stylesheet_url’); ?>" type="text/css" media="screen" />

This tells wordpress to look in wp-content/themes/YOURTHEME for the stylesheet. Next find
<title>Your Page Title</title>

and replace it with
<title><?php bloginfo(’name’); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

This coding tells Wordpress to put the title of your blog into the Blue Title Bar at the top of the browser, (and if you are on a page, it will include the page title with a raquo; between the Blog and Page Title.

Between your head tags (<head> & </head>) add the following code

<meta http-equiv="Content-Type" content="<?php bloginfo(’html_type’); ?>; charset=<?php bloginfo(’charset’); ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo(’name’); ?> RSS Feed" href="<?php bloginfo(’rss2_url’); ?>" />
<link rel="pingback" href="<?php bloginfo(’pingback_url’); ?>" />

This code simply gives search engines your RSS information.

The final thing to do to your template is to add your Blog Title and Blog Description to your header. This step is optional as some layouts use images with the blogs name. I figured I should include it for those who don’t.

To do this, find your sites Title and put this in its place
<?php bloginfo(’name’); ?>

and for your blog description
<?php bloginfo(’description’); ?>

This tells wordpress to replace those tags with the Title and Description you chose in your Admin Panel.

Now for the actual blogs. Wordpress uses a loop for its blog, which in english means everything that will be displayed for the entrys must be within 2 tags. This ensures that everything inside the tags will be included with every post. Here is the loop
<?php while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time(’F jS, Y’) ?> <!– by <?php the_author() ?> –></small>

<div class="entry">
<?php the_content(’Read the rest of this entry &raquo;’); ?>
</div>

<p class="postmetadata">Posted in <?php the_category(’, ‘) ?> | <?php edit_post_link(’Edit’, ‘’, ‘ | ‘); ?> <?php comments_popup_link(’No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?></p>
</div>

<?php endwhile; ?>

<div class="navigation">
<div class="alignleft"><?php next_posts_link(’&laquo; Previous Entries’) ?></div>
<div class="alignright"><?php previous_posts_link(’Next Entries &raquo;’) ?></div>
</div>

<?php else : ?>

<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn’t here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>

<?php endif; ?>
hdshngout
06-21-2006, 09:10 PM
Now for the explanation.
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>

This coding simply posts the Title and a Link to the Article. You can change the <h2> tags as needed for your layout. You can also change “Permanent Link to” to whatever you would like.
<small><?php the_time(’F jS, Y’) ?> by <?php the_author() ?> </small>

That coding simply posts the date your Article was written and who wrote it. By simply removing ” by <?php the_author() ?>” you can disable the written by part. This entire tag is optional.
<div class="entry">
<?php the_content(’Read the rest of this entry &raquo;’); ?>

This section posts your enty. The “Read the rest of this entry &raquo; can be replaced with whatever you want.
<p class="postmetadata">Posted in <?php the_category(’, ‘) ?> | <?php edit_post_link(’Edit’, ‘’, ‘ | ‘); ?> <?php comments_popup_link(’No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?></p>
</div>

This bit of coding posts your comments and what categories your entry was entered in. If you don’t want that included, simply exclude the code.

<?php endwhile; ?>

<div class="navigation">
<div class="alignleft"><?php next_posts_link(’&laquo; Previous Entries’) ?></div>
<div class="alignright"><?php previous_posts_link(’Next Entries &raquo;’) ?></div>
</div>

<?php else : ?>

<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn’t here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>

<?php endif; ?>

This final bit gives lets you browse older posts as well as give an error if there are no posts. To put it simply, this coding must stay otherwise you risk breaking your layout.

Now for single.php. It is just like index.php, except it has this extra bit of coding. This extra coding allows users to post comments. I have included the entire loop for single.php. This coding is the exact same as for page.php.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="navigation">
<div class="alignleft"><?php previous_post_link(’&laquo; %link’) ?></div>
<div class="alignright"><?php next_post_link(’%link &raquo;’) ?></div>
</div>

<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h2>

<div class="entrytext">
<?php the_content(’<p class="serif">Read the rest of this entry &raquo;</p>’); ?>

<?php link_pages(’<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>

<p class="postmetadata alt">
<small>
This entry was posted
<?php /* This is commented, because it requires a little adjusting sometimes.
You’ll need to download this plugin, and follow the instructions:
http://binarybonsai.com/archives/2004/08/17/time-since-plugin/ */
/* $entry_datetime = abs(strtotime($post->post_date) - (60*120)); echo time_since($entry_datetime); echo ‘ ago’; */ ?>
on <?php the_time(’l, F jS, Y’) ?> at <?php the_time() ?>
and is filed under <?php the_category(’, ‘) ?>.
You can follow any responses to this entry through the <?php comments_rss_link(’RSS 2.0′); ?> feed.

<?php if ((’open’ == $post-> comment_status) && (’open’ == $post->ping_status)) {
// Both Comments and Pings are open ?>
You can <a href="#respond">leave a response</a>, or <a href="<?php trackback_url(true); ?>" rel="trackback">trackback</a> from your own site.

<?php } elseif (!(’open’ == $post-> comment_status) && (’open’ == $post->ping_status)) {
// Only Pings are Open ?>
Responses are currently closed, but you can <a href="<?php trackback_url(true); ?> " rel="trackback">trackback</a> from your own site.

<?php } elseif ((’open’ == $post-> comment_status) && !(’open’ == $post->ping_status)) {
// Comments are open, Pings are not ?>
You can skip to the end and leave a response. Pinging is currently not allowed.

<?php } elseif (!(’open’ == $post-> comment_status) && !(’open’ == $post->ping_status)) {
// Neither Comments, nor Pings are open ?>
Both comments and pings are currently closed.

<?php } edit_post_link(’Edit this entry.’,'’,'’); ?>

</small>
</p>

</div>
</div>

<?php comments_template(); ?>

<?php endwhile; else: ?>

<p>Sorry, no posts matched your criteria.</p>

<?php endif; ?>

Now for sidebar.php. This as you probably already knew includes your menu items. Simply replace your menu items with this coding, then in your admin panel, add the links you want to appear in the menu.
<?php get_links(’-1′, ‘<li>‘, ‘</li>‘, ‘<br />’, FALSE, ‘order‘, TRUE,
TRUE, -1, TRUE); ?>
hdshngout
06-21-2006, 09:10 PM
To change the way the links are organized, replace order with one of the following.
* ‘id’
* ‘url’
* ‘name’
* ‘target’
* ‘category’
* ‘description’
* ‘owner’ - User who added link through Links Manager.
* ‘rating’
* ‘updated’
* ‘rel’ - Link relationship (XFN).
* ‘notes’
* ‘rss’
* ‘length’ - The length of the link name, shortest to longest.

Replace <li> with what you want to appear before the links and
replace </li> with what you want to appear after the links.

The Home Stretch

open up style.css and add this code
[/code]
/*
Theme Name: The name of your theme/layout.
Theme URI: The address where the layout willl be located.
Description: A description of your theme
Version: The Version number (optional)
Author: Your name
Author URI: Your website address (optional)
*/
[/code]

Finally, open up index.php, single.php, and page.php. Insert

<?php get_header(); ?> at the very top of the page

<?php get_sidebar(); ?> where the sidebar is suppossed to go

<?php get_footer(); ?> at the very bottom

These tags include header.php, sidebar.php, and footer.php into your template, thus creating your theme.

Once you have done this, put all of the files into a folder and name it whatever you want. Then upload the folder and all of the files included into wp-content/themes/.

Go into your Presentation Tab in your admin panel, and select the template. View your site, and take a screenshot if you like (Press Print Screen on your keyboard), go into an image editing program and resize it to 300px By 226px and save it as screenshot.png. Upload it to your folder containing all of the theme files.

After doing this you are done. See it’s not so bad was it? Please be aware that this is ONLY a basic theme tutorial. There are many other things you can do to modify your wordpress. For more information, visit the resources below.

Additional Resources
The Wordpress Codex (http://www.codex.wordpress.org)
Sillyish Wordpress Theme Tutorial (http://sillyish.jemjabella.co.uk/wptheme.php)