I enjoy my Job, Web programming and more!!!   1 comment

Step 1 – Let’s start with the necessities…

Create a new folder in your ‘wp-content/themes/’ folder, and name it whatever you want to name the skin we’re about to make. Make 2 new files in this new folder, one called ‘index.php’ and the other ‘style.css’. We are going to start off with some basic wordpress code. This ‘base code‘ is what I start off with every time I create a full wordpress skin, because it includes most of the necessary information. I’ve kept it in here because you might want to develop this into a full skin. I also use a default stylesheet for my themes, so copy this code snippet into your ‘style.css’, and edit the content respectively. The stylesheet is reled in with the line:

  1. <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

You’ll also need 2 JavaScript files, one being a copy of jQuery and an empty .js file called myTheme.js. Don’t forget to rel these in with this in your head element:

  1. <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/jquery-1.2.6.min.js”></script>
  2. <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/myTheme.js”></script>

Don’t forget to change the name of the jQuery rel if you’re using a different package to me, which you most likely are. ‘myTheme.js’ must come under the jQuery link, not above.

Note: jQuery 1.2.6 is also packaged with WordPress 2.2 and above, so if you don’t want to download it, you can find it in wp-includes/js/jquery/jquery.js. To include THIS jQuery document, use this instead of the jQuery rel above. You’ll still need myTheme.js though!

  1. <script type=”text/javascript” src=”<?php bloginfo(‘url’); ?>/wp-includes/js/jquery.js”></script>

Step 2 – The PHP/Wordpress/XHTML code.

Once you’ve selected and activated your new theme, open ‘index.php’ with your favourite editor, and let’s get coding!

Here is all the XHTML/PHP/Wordpress code we need to set out the content and the metadata for each post. Paste or type it inbetween the html open and close tags. I will explain it bit by bit below!

  1. <div id=”wrapper”>
  2.     <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
  3.         <div class=”post”>
  4.             <div class=”left”>
  5.                 <p class=”postmetadata”>
  6.                     <strong>Post Details</strong><br />
  7.                     Posted: <em><?php the_time(‘l, jS F, Y’); ?></em>
  8.                     at <em><?php the_time(‘g:i a’); ?></em>.<br />
  9.                     Written by: <em><?php the_author(); ?>.</em><br />
  10.                     Number of comments: <em><?php the_comments_number(‘none’, ‘1’, ‘%’); ?></em>.<br />
  11.                     Posted in: <em><?php the_category(‘, ‘); ?></em>.
  12.                 </p>
  13.             </div><!– end div.left –>
  14.             <div class=”right”>
  15.                 <h2><?php the_title(); ?></h2>
  16.                 <div class=”entry”>
  17.                     <?php the_content(‘more…’); ?>
  18.                 </div><<!– end div.entry –>
  19.             </div><!– end div.right –>
  20.         </div><!– end div.post –>
  21.     <?php endwhile; ?>
  22.     <?php endif; ?>
  23. </div><!– end div#wrapper –>


  1. <div id=”wrapper”>

The wrapper div basically wraps the whole thing so we can lay it out nicely later on. All divs are pretty self explanitory, and I have also commented in the ends of the divs, so I’ll skip them while explaining. In short, I’ve wrapped everything accordingly so it’s easy to style. the .left div is the left column, the .right div is the right column, the .entry div is the post entry, so on and so forth. I’ve used classes within the loop, as if there are more than one posts, the id’s would back up and create a validation error.

The famous WordPress Loop.

  1. <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

If you don’t get what this is, go back to wordpress school. It basically loops through the database’s information in respect to the calls made within the loop. If you ask for the title, the loop will look into the database for the title for you.

The Post’s MetaData.

  1. <p class=”postmetadata”>
  2.     <strong>Post Details</strong><br />
  3.     Posted: <em><?php the_time(‘l, jS F, Y’); ?></em> at <em><?php the_time(‘g:i a’); ?></em>.<br />
  4.     Written by: <em><?php the_author(); ?>.</em><br />
  5.     Number of comments: <em><?php comments_number(‘none’, ‘1’, ‘%’); ?></em>.<br />
  6.     Posted in: <em><?php the_category(‘, ‘); ?></em>.
  7. </p>

Now for the nitty gritty stuff. Everything above contains the information that we want to display about the post. In respective order, we ask for;

  • Date and Time – We ask for the date in the format of l, jS F, Y (e.g. Sunday, 8th June, 2008), and the time in the format of g:i a (e.g. 4:45 pm). I’ve used the_time(); twice, because if we use the_date();to ask for the date, it will only show it once per day. If you posted numerous posts on the same day, the date wouldn’t show once per post, but once on the first post of the day.
  • Author – This is self explanitory, we are simply asking for the author of the post.
  • Comments Number – This calls for the number of comments on a post. If the post has no comments, it will return the value ‘none’. If it has one, it will return the value ’1′, and, yep you guessed it! If it has more than one, it will return a value like ’21′ or ’6′, all depending on how many comments the post has.
  • Category – the_category(); asks the database for the categories that a post have been assigned to. Thanks to wordpress, we don’t have to worry about using an extensive and raw php foreach loop, as the (‘, ‘); seperates the categories with a comma for us. Thanks WordPress!

The Content.

  1. <h2><?php the_title(); ?></h2>
  2. <div class=”entry”>
  3.     <?php the_content(‘more…’); ?>
  4. </div><<!– end div.entry –>

Does it get more self explanitory than that? We ask for the title (wrapped in a h2 element so we can style it accordingly), and the content (wrapped in a .entry div so that all content is nested in it’s own div for easy styling and access too.). ‘more…’ in brackets are for when you use the <!– more –> tag in the wordpress post editor.

Come on… The loop end!

  1. <?php endwhile; ?>
  2. <?php endif; ?>

You code bunnies should get this… It’s the basic loop again! It closes off the loop so that only the contained ‘functions’ within the loop are executed over and over.


Posted August 18, 2011 by daphnebaafi in Uncategorized

One response to “I enjoy my Job, Web programming and more!!!

Subscribe to comments with RSS.

  1. Hi, this is a comment.
    To delete a comment, just log in, and view the posts’ comments, there you will have the option to edit or delete them.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: