Subscribe Via RSS

27895 Subscribers

Subscribe Via RSS
Subscribe Via Twitter

Followers

Subscribe Via Twitter
BLOOpress WordPress Theme

April 24th, 2009 in Wordpress Tutorials by Richard Carpenter

BLOOpress WordPress Theme

1 Star2 Stars3 Stars4 Stars5 Stars14 Votes, Rating: 4.79
Loading ... Loading ...

Hello welcome to part 3 of the BLOOpress wordpress theme. Today we’ll be converting our CSS template into a working wordpress theme.

PREPARATION

Before we go ahead and start ripping away at PHP code we need to do abit of preparation work. The very first thing to do is download a program called “XAMPP”, this program will allow you to use your P.C as a server. I find its the best way to develop a website as you dont need to be connected to the internet, neither do you use any bandwidth uploading and editing files. You can use your own server if you wish. Il be using XAMPP for this tutorial so assuming you have XAMPP installed and setup to run wordpress, download the “starkers theme” by elliot jay stocks. Place your starkers theme inside your wordpress theme’s directory, then rename it too “BLOOpress Theme”. Delete the folder “style” and its contents as they arn’t needed. Create a new folder called “images” inside your themes folder, then copy all your image files from your CSS template then paste them inside the images folder in your themes folder.

Step1

Open up the “style.CSS” file from within the theme directory, you should be presented with some code which looks like this.

/*
Theme Name: Starkers
Theme URI: http://elliotjaystocks.com
Description: The totally nude WordPress theme. Phwoar! (Based on the famous <a href="http://binarybonsai.com/kubrick/">Kubrick</a> by <a href="http://binarybonsai.com/">Michael Heilemann</a>)
Version: 2 (WP2.6.2)
Author: Elliot Jay Stocks
Author URI: http://elliotjaystocks.com
Tags: starkers, naked, clean, basic
*/

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";

The first chunk of code is very important,its not just abit of code telling you who designed the theme. Its actually what makes the theme recognisable to wordpress. We dont actually need all of the code, i like to use a nice stripped back look. Go ahead and change the details to suit your theme. You can also remove the 3 imported style sheets as we’ve already deleted them. My code now looks like this.

/*
Theme Name: BLOOpress
Theme URI: http://www.bloopress.co.uk
Description: Just another wordpress theme by hv-designs
Version: 1 (WP2.6.2)
Author: Richard Carpenter
*/

After you’ve edited the code we need to copy all our CSS styles from our CSS template’s style sheet and paste them inside the theme’s “style.CSS” file. Save your themes’s style sheet and activate the theme in wordpress, view your theme in your browser, you should be presented with something like this.

Step2

MODIFYING THE HEADER.PHP FILE

Open up header.PHP from the theme directory, you should be presented with a bunch of code similar to an ordinary HTML file only with a bit of PHP thrown in. The first chunk of code we can edit is the code between the TITLE tag.

<title>
<?php if (is_home()) { echo bloginfo('name');
} elseif (is_404()) {
echo '404 Not Found';
} elseif (is_category()) {
echo 'Category:'; wp_title('');
} elseif (is_search()) {
echo 'Search Results';
} elseif ( is_day() || is_month() || is_year() ) {
echo 'Archives:'; wp_title('');
} else {
echo wp_title('');
}
?>
</title>

You can remove all the PHP from within the TITLE tag, replace the code with a simple title for your theme.

<title>BLOOpress "just another wordpress blog"</title>

The next thing we need to do is locate this chunk of text right at the bottom of the PHP file.

<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>

All of this code can be removed as its not needed. The last tag at the bottom of the PHP file should be an opening “BODY TAG”. All the code we’ll be adding in a moment will go underneath the “body” tag. Open up your CSS template, locate all the code to do with the header, so we need to select our opening container DIV, the top nav, the header, the search box, the logo and the second nav.

Step3

Copy all the hightlighted code and paste into your header.PHP file underneath the body tag. Once you’ve pasted the code save your .PHP file and check the theme in your browser, heres mine.

Step4

When you check your theme in your browser take note of the missing images, you should have two images that dont load up, the logo and the search button. The reason why they dont show up is because direct linking to images within the wordpress themes folder doesnt work its blocked by the htaccess file. The only way to get the images to load up is to either place the files in a directory outside the wordpress installation OR use some PHP code which looks like this.

<img src="<?php bloginfo('template_directory'); ?>/images/title.png" border="0" alt="BLOOpress" />

So in the header.PHP file inside the title DIV, you need to change the img src to the code above. It should looks something like this.

<div id="title"><!--title image start-->
<a href="http://www.hv-designs.co.uk"><img src="<?php bloginfo('template_directory'); ?>/images/title.png" border="0" alt="BLOOpress" /></a>
</div><!--title image end-->

As for the search form we need to get rid of it and replace with a wordpress search form. The one we put on was just an example. Remove the example search fields from within the “search-from” DIV.

<div id="search-form"><!--search form starts-->

</div><!--search form ends-->

If you open up the “index.PHP” file and locate the following code.

Step5

The code highlighted in the image above is a PHP include, which basically displays a PHP file within the PHP file but the file is seperated from the rest of the file…. hope that makes sense. Copy the code from the index.PHP file and paste it between our “search-form” DIV.

<div id="search-form"><!--search form starts-->
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
</div><!--search form ends-->

Now we need to alter our PHP file “searchform.php”. Go ahead and open up the file in dreamweaver. You should be presented with a simple form structure some what similar to the one we had before.

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<label class="hidden" for="s"><?php _e('Search for:'); ?></label>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</form>

The first thing we can do is remove line 2, the label class.

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">

<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</form>

Now we can start adding our personnal touches, in the first input type remove the bit of php from within the value attribute and replace with “Search…”. Then on the 2nd input type change the “value” attribute from search to “go!”.

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">

<input type="text" value="Search..." name="s" id="s" />
<input type="submit" id="searchsubmit" value="Go!" />
</form>

Now add your classes, remember in our CSS template we had two styles one for the button and one for the text field.

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">

<input type="text" value="Search..." name="s" id="s" class="search-field"/>
<input type="submit" id="searchsubmit" class="search-button" value="Go!" />
</form>

We now need to replace our submit button with our picture button to do that we need change our 2nd input type from type to name. Then add another attribute called “type=image”. Next to the “type=image” attribute we need to add our image SRC.

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">

<input type="text" value="Search..." name="s" id="s" class="search-field"/>
<input name="submit" type="image" src="<?php bloginfo('template_directory'); ?>/images/submit_bg.png" alt="Submit Form" id="searchsubmit" class="search-button" value="Go!" />
</form>

Save your header.PHP file and searchform.PHP file and test your theme in your browser. The search should be fully functional and look the same as our CSS template. Now you need to edit the links in the top navigation to point to where you need to.

<div id="nav1"><!--nav1 starts-->
<ul class="nav1-links">
<li><a href="http://www.hv-designs.co.uk">Home</a></li>
<li><a href="http://www.hv-designs.co.uk">Sitemap</a></li>
<li><a href="http://www.hv-designs.co.uk">Contact Me</a></li>
</ul>
</div><!--nav 1 ends-->

Our second navigation is for our wordpress pages which will involve some PHP but if you want to you can add static links to other pages around the web, just use a setup similar to nav#1. To make the 2nd navigation use dynamic wordpress pages you first need to clear all the text we stuck in there when we coded our CSS template. Just leave one empty list.

<div id="nav2"><!--nav2 starts-->
<ul class="nav1-links">
<li></li>
</ul>
</div><!--nav2 ends-->

We now need to use a chunk of PHP code to display our pages, the PHP code will get the pages from within wordpress and display each page as our CSS template did. Inbetween the LI tag add this code.

<div id="nav2"><!--nav2 starts-->
<ul class="nav1-links">
<li><?php wp_list_pages('title_li='); ?></li>
</ul>
</div><!--nav2 ends-->

Step6

Thats it the header.PHP file is complete.

MODIFYING THE INDEX.PHP FILE

Our next file to modfiy is the index.PHP file, this file relates to the main page of the document, its the first page everyone see’s upon entering your blog. The bit we’ll be modifying now is the post loop, to get more of an idea on how the code works and how it relates to live post check the image below.

Step7

The code above is the part we’ll be editing now, like i said its known as the wordpress loop, everytime you make a post the same code is used over and over. Open up your CSS template and locate our example post. Our post started with an opening DIV of left-content, so copy the first DIV of left-content and paste it under the PHP code “get header”. Our post starts with “post-box” paste our class of post-box underneath the PHP code “have posts”. Add your left-content ending DIV right at the bottom of the file above the “get sidebar” PHP code.

<?php get_header(); ?>

<div id="left-content"><!--left content starts--> 

<?php if (have_posts()) : ?>

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

<div class="post-box"><!--wordpress post content box starts-->

Underneath our post loop add the ending DIV for left-content.

<div class="post-box"><!--wordpress post content box starts-->

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

<?php the_content('Read the rest of this entry &amp;amp;raquo;'); ?>

<p><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &amp;amp;#187;', '1 Comment &amp;amp;#187;', '% Comments &amp;amp;#187;'); ?></p>
</div>

The next part generally involves moving chunks of code around, copy and pasting our DIV’s from our CSS template over to our post loop. We’ll start from the top and work our way down. There is a floating ending DIV above our ending left-content DIV, this needs to be moved up to the begining of our post loop.

Step8

In the loop there is a H2 tag, which is our post title, change the H2 tag to a H1 tag. Then wrap the H1 tag in our post title class from our CSS template. Above the post-title class add our post-thumb class.

<?php get_header(); ?>

<div id="left-content"><!--left content starts--> 

<?php if (have_posts()) : ?>

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

<div class="post-box"><!--wordpress post content box starts-->

<div class="post" id="post-<?php the_ID(); ?>"></div>

<div class="post-thumb"><!--wordpress post thumbnail starts-->
<img src="images/example-thumbnail.gif" alt="EXAMPLE THUMBNAIL" />
</div><!--wordpress post thumbnail ends-->

<div class="post-title"><!--wordpress post title starts-->
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
</div><!--wordpress post title ends-->

Underneath our post-title class we need to add our post-content class, inside the post-content class you need to add the PHP code for our wordpress content, you can refer back to the post loop image i created ealier.

<div class="post-content"> <!--wordpress content starts-->
<?php the_content('Read the rest of this entry &amp;amp;raquo;'); ?>
</div><!--wordpress content ends-->

Underneath our post-content class we need to add our ending content box DIV then add our footer class. Inside our footer class we need to add the remaining code which is the PHP code for the author, time & date and number of comments. Try and keep the whole thing nice and tidy if you can. The new post loop looks like this.

<div class="post-box"><!--wordpress post content box starts-->

<div class="post" id="post-<?php the_ID(); ?>"></div>

<div class="post-thumb"><!--wordpress post thumbnail starts-->
<img src="images/example-thumbnail.gif" alt="EXAMPLE THUMBNAIL" />
</div><!--wordpress post thumbnail ends-->

<div class="post-title"><!--wordpress post title starts-->
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
</div><!--wordpress post title ends-->

<div class="post-content"> <!--wordpress content starts-->
<?php the_content('Read the rest of this entry &amp;amp;raquo;'); ?>
</div><!--wordpress content ends-->

</div><!--wordpress post content box ends--> 

<div class="post-footer"><!--wordpress posts footer-->
<p><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --> |<?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div><!--wordpress post footer ends-->

Save your file and test your theme in your browser, mine looks like this. The posts display how we want them to, ignore all the rest, it will loook quite messy still as were yet to add code to the other files.

Step9

Thats it for our index.PHP file for now, we’ll come back later and sort out our thumbnail for our posts, as at the minute it still contains our example image, we might also have to do some minor fixes, but we’ll see how it goes.

MODIFYING THE SIDEBAR.PHP FILE

Once you’ve opened up your sidebar.PHP file highlight everything from LINE 4 to LINE 43, and hit the delete key as the code isn’t needed.

Step10

Once you’ve done that copy and paste over all your sidebar code from the CSS template.

<?php 	/* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

<div id="right-content"><!--sidebar starts-->

<div id="stay-connected"><!--stay connected box starts-->
<h1>Stay Connected...</h1>

<div class="sc-icon"><!--RSS icon-->
<a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/rss_icon.png" border="0" alt="RSS" /></a>
</div><!--RSS icon ends-->

<div class="icon-text"><!--RSS icon text-->
<p class="subscribe">Subscribe via RSS</p>
<p class="subscribe2">Updates in your reader</p>
</div><!--RSS icon text ends-->

<div class="sc-icon"><!--TWITTER icon-->
<a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/twitter_icon.png" border="0" alt="TWITTER" /></a>
</div><!--TWITTER icon ends-->

<div class="icon-text"><!--TWITTER icon text-->
<p class="subscribe">Subscribe via twitter</p>
<p class="subscribe2">Updates on your twitter</p>
</div><!--TWITTER icon text ends-->

<div class="sc-icon"><!--EMAIL icon-->
<a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/mail_icon.png" border="0" alt="EMAIL" /></a> </div>
<!--EMAIL icon ends-->

<div class="icon-text"><!--EMAIL icon text-->
<p class="subscribe">Subscribe via email</p>
<p class="subscribe2">Updates in your mailbox</p>
</div><!--EMAIL icon text ends-->

</div><!--stay connected box ends-->   

<ul>

<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>

<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>

<?php wp_list_categories('show_count=1&amp;amp;title_li=<h2>Categories</h2>'); ?>

<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
<?php wp_list_bookmarks(); ?>

<li>
<h2>Meta</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php } ?>

<?php endif; ?>
</ul>

</div><!--sidebar ends-->

</div><!--container ends-->

Once you’ve pasted in your code you’ll need update your image paths on your icons with PHP, just like we did our blog title image and search submit button. You’ll also need to link your icons to the relivant source, I.E twitter, rss etc… Save your sidebar.PHP file and check your theme in your browser.

Step11

MODIFYING THE FOOTER.PHP FILE

Open up footer.PHP, select all the code and hit the delete key. Open your CSS template and copy all the code for the footer.

Step12

Paste all your footer code into your footer.PHP file. Save the file then test your theme inside your browser. We’ve now modified some of the main files for our theme, its now time to make a start on some of the other files.

MODIFYING THE SEARCH.PHP FILE

The search.PHP file is the file which is called when a search is made, the search.PHP file provides you with the search results, the file is structure pretty much the same as the index.PHP file, which will make things easier to edit. Open up your search.PHP file, underneath the first line of PHP code (get header) add your opening DIV of left-content.

<?php get_header(); ?>

<div id="left-content"><!--left content starts-->

Scroll down right to the bottom of your file, just above the get sidebar PHP code add your ending left-content DIV.

</div><!--left content ends-->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Head over to your index.PHP file, highlight and copy your post loop to the clipboard.

Step13

Highlight the post loop inside the search.PHP file and hit delete.

Step14

Paste in your code from the index.PHP file. Save your work and test out the search function on your theme, providing you have some posts you should see your search results display somet what similar to the index.PHP file.

MODIFYING THE PAGE.PHP FILE

The page.PHP file relates to actual pages that you have on your blog. The pages will also be displayed the same as the index.PHP file but instead of being loads of seperate boxes imagine it as one big post box. Inside your page.PHP file you need to add again the left-content DIV, place the opening DIV underneath the first big PHP (get header) and the ending DIV above the get sidebar bit of PHP code.

<?php get_header(); ?>

<div id="left-content"><!--left content starts--> 

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

</div><!--left content ends-->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Underneath the DIV CLASS “post” you need to add our “post-box” class.

<?php get_header(); ?>

<div id="left-content"><!--left content starts--> 

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

<div class="post" id="post-<?php the_ID(); ?>">

<div class="post-box"><!--wordpress post content box starts-->

<?php the_content('<p class="serif">Read the rest of this page &amp;amp;raquo;</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
<?php endwhile; endif; ?>

Underneath the PHP endwhile; endif we need to add our closing post-box DIV. Then simply add our post-fooer class. Inbetween our post footer class add the PHP edit_post_link. The page.PHP file should something like this.

<?php get_header(); ?>

<div id="left-content"><!--left content starts--> 

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

<div class="post" id="post-<?php the_ID(); ?>">

<div class="post-box"><!--wordpress post content box starts-->

<?php the_content('<p class="serif">Read the rest of this page &amp;amp;raquo;</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
<?php endwhile; endif; ?>	

</div><!--wordpress post content box ends--> 

<div class="post-footer"><!--wordpress posts footer-->
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div><!--wordpress post footer ends-->

</div><!--left content ends-->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

If you have any pages on your blog, save your work and try them out.

MODIFYING THE ARCHIVE.PHP FILE

The archive page again is styled in pretty much the same way as the index.PHP file. We start by adding our content-left class underneath our get header PHP code, then ending it above the get sidebar PHP code. We then have to locate the post loop, add our post-box class underneath the “have posts PHP”.

<?php get_header(); ?>

<div id="left-content"><!--left content starts-->

<?php if (have_posts()) : ?>

<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
<?php /* If this is a category archive */ if (is_category()) { ?>
<h2>Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category</h2>
<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
<h2>Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</h2>
<?php /* If this is a daily archive */ } elseif (is_day()) { ?>
<h2>Archive for <?php the_time('F jS, Y'); ?></h2>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<h2>Archive for <?php the_time('F, Y'); ?></h2>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<h2>Archive for <?php the_time('Y'); ?></h2>
<?php /* If this is an author archive */ } elseif (is_author()) { ?>
<h2>Author Archive</h2>
<?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<h2>Blog Archives</h2>
<?php } ?>

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

<div class="post-box"><!--wordpress post content box starts-->

Underneath the PHP_the_content tag we need to close our post-box DIV.

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

<div class="post-box"><!--wordpress post content box starts-->        

<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<p><?php the_time('l, F jS, Y') ?></p>
<?php the_content() ?>

</div><!--wordpress post content box ends-->

Then underneath our post-box ending DIV we need to start our post-footer class, inside our post footer class we use the META data from the post loop. Then underneath our P tag with the the PHP code for “the_time” add a BR tag. Doing this will space out the post abit so it isnt all muggled together.

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

<div class="post-box"><!--wordpress post content box starts-->        

<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<p><?php the_time('l, F jS, Y') ?></p>

<br />

<?php the_content() ?>

</div><!--wordpress post content box ends-->

<div class="post-footer"><!--wordpress posts footer-->
<p><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &amp;amp;#187;', '1 Comment &amp;amp;#187;', '% Comments &amp;amp;#187;'); ?></p>
</div><!--wordpress post footer ends-->

MODIFYING THE SINGE.PHP & COMMENTS.PHP FILE

These two files ive left untill last because they are the most fiddly especially the comments.PHP file. We’ll start with the sing.PHP file as this wont take too long to do, this file is for out posts, once you click on a post it loads this file. We modify the single.PHP file in the same way we did our other files, we need to add our left content DIV at the top underneath our get header PHP code, then we need to end it at the bottom of the file above the get footer PHP code. If you want the sidebar to be in with the single.PHP file then you need to add the get sidebar PHP tag.

<?php get_header(); ?>

<div id="left-content"><!--left content starts-->
</div><!--left content ends-->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

We’ll then begin to add our post CSS styles from our style sheet again, this part will be similar to the the page.PHP file we edited earlier. Under the PHP code have posts add our psot-box class then underneath the PHP code the_content add your closing DIV.

<?php get_header(); ?>

<div id="left-content"><!--left content starts--> 

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

<div class="post-box"><!--wordpress post content box starts-->

<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>

<?php the_content('<p>Read the rest of this entry &raquo;</p>'); ?>

</div><!--wordpress post content box ends-->

The single.PHP file is complete, move onto your comments.PHP file. If you take alook at one of your posts, you’ll see what a mess the comments area is in.

Step15

The first we can do to tidy it up abit is shorten the big text area and add some spaceing between each form field. We’ll start with the big text box, scroll right down to the bottom and locate the form field. The part of code you want to look for is…

<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>

Take note of the “cols attribute” see how it says 100% we need to change that to 72. So the code now becomes.

<textarea name="comment" id="comment" cols="72" rows="10" tabindex="4"></textarea>

To align each of the text boxes, underneath each other add opening & closing P Tags either end of the code. After the last P tag add a BR tag.

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author">Name <?php if ($req) echo "(required)"; ?></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="email">Mail (will not be published) <?php if ($req) echo "(required)"; ?></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url">Website</label></p><br />

Your comments area should now look something like this.

Step16

The footer could do with being pushed down alittle, open up your style sheet and add “margin-top: 40px;” to the #footer-bg DIV. Now were going to add some styling to our actual comments, your going to need to add new styles to your style sheet but we’ll try and use the ones all ready made. Add these styles into your style sheet.

.float-right {
	float:right;
}

ul, ol {
list-style:none;
}

Begin to add some of your styles to the comments loop. Im going to style each comment to look like one of our wordpress posts.

<!-- You can start editing here. -->

<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &amp;amp;#8220;<?php the_title(); ?>&amp;amp;#8221;</h3>

<ol>

<?php foreach ($comments as $comment) : ?>

<div class="post-box"><!--wordpress post content box starts-->

<p <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<div class="float-right"><?php echo get_avatar( $comment, 72 ); ?></div>
<h2><?php comment_author_link() ?></h2>
<?php if ($comment->comment_approved == '0') : ?>
<br />
<p>Your comment is awaiting moderation.</p>
<br />
<?php endif; ?>
<?php comment_text() ?>
</p>

</div><!--wordpress post content box ends-->
<div class="post-footer"><!--wordpress posts footer-->
<p><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit','&amp;amp;nbsp;&amp;amp;nbsp;',''); ?></p>
</div><!--wordpress post footer ends-->

Change post-box from post-box to post-box2 and change post-footer to post-footer2. Now paste these styles into your style sheet.

.post-box2 {
	background-color: #292929; /*adds a background color to our post box*/
	border: 1px solid #2f2f2f; /*gives our box a 1px border*/
	padding: 10px; /*adss 10px padding all the way around our box*/
	float: left; /*floats our box left inside "left-content div*/
	width: 578px; /*gives our box a width of 580px*/
	margin-top: 10px;
}

.post-footer2 {
	border: 1px solid #0c5b7d; /*adss 10px padding all the way around our box*/
	float: left; /*floats our box left inside "left-content div*/
	width: 578px; /*gives our box a width of 580px*/
	background-image: url(images/post_footer_bg.png); /*adds background image*/
	background-repeat: repeat-x; /*repeats background horizontally*/
	height: 20px; /*gives our class a height of 20px*/
	padding-top: 6px; /*adss 6px padding to the top*/
	padding-right: 10px; /*adds 10 px padding to the right*/
	padding-left: 10px; /*adds 10px padding to the left*/
	margin-bottom: 5px; /*adds a 20px margin between each post*/
}

While your in your style sheet you can also paste in these styles.

a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #0099FF;
}

h1,h2,h3,h4 {
	color: #0c78a8;
}

.post-title h1 a{
	color: #0c78a8; /*h1 tag text color*/
}

.post-box2 p {
	margin: 5px 0 10px;
}

#left-content p{
	margin: 5px 0 10px;
}

Should clean some of our bad link colors up and some spacing issues. Now finally re-open your sidebar.PHP file, locate all H2 tags and replace with H4 tags. Re-open your index.PHP file and locate your example thumbnail.

<div class="post-thumb"><!--wordpress post thumbnail starts-->
<img src="images/example-thumbnail.gif" alt="EXAMPLE THUMBNAIL" />
</div><!--wordpress post thumbnail ends-->

Delete your exampple thumbnail and replace with this.

<div class="post-thumb"><!--wordpress post thumbnail starts-->
<a href="<?php $values = get_post_custom_values("url"); echo $values[0]; ?>" title="<?php the_title(); ?>">
<img src=" <?php $values = get_post_custom_values("image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" /></a>
</div><!--wordpress post thumbnail ends-->

This will now allow you to insert you thumbnail and link for the thumbnail through the custom fields part within creating a wordpress post. You should now have something you can use for your own website, dont get me wrong this theme isnt 5 stars, but should learn you some basics on getting started with wordpress.

Thats all from me, hope you’ve enjoy this LONG tutorial. Im sorry some things are abit short and sweet but ive had such little time to get this one out and live. Feel free to ask any questions il be happy to help you in any way i can.

About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter and im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of Photoshop Plus. You can follow me on twitter HERE. You may also view my portfolio HERE.

 

Richard Carpenter has written 364 posts.

Be Part Of The Community!

Become part of the hv-designs community.

Subscribe Via RSS or Follow Us On Twitter.

Subscribe Via RSS Follow Us On Twitter

31 Responses to “BLOOpress WordPress Theme”

  1. It’s very god work
    Thank you very muche

  2. John says:

    Awesome! I love your wordpress conversion tuts. They really help a lot more than others do. Thanks for taking the time to explain things fully. ^_^

  3. yassin says:

    Nice Tut Thank So Much …
    I Wait Next Tut about Coding End Conversion In WordPress …

  4. luke says:

    i was da first to rate

  5. Marius says:

    Great tutorial! So many which only take care of the Photoshop part… Very precise! Thank you! :D

  6. Craig S says:

    Big ups dude, this was very helpful. You’re providing a service that’s really hard to find. Nuff Respec

  7. miniMAC says:

    YOU are A W E S O M E !

  8. Great tutorial thanks

  9. A stunning result!

  10. dzk says:

    iam beginer, i have my www domain name, i have all, and i want my theme and i just cant understund how to make one. this will bee 5th tutorial. lets seeee how goood it will bee this time… i could pay if someone just could mee teach how…dzk@fotoable.com

    at the moment i start reading this one:) ufff

  11. Juls says:

    Nice one! One of the best WP tutorial out there! Well done!

  12. dynallis says:

    Great tutorial! The best tutorial of making a wordpress template :)

  13. Webchester says:

    Nice tutorial, Thanks.

  14. Clayton says:

    i need some serious help on the side bar. it keeps putting it the content way at the bottom of the page. it doesnt seem to keep a consistent format either. PLEASE help

  15. Adobe Photoshop is simply the best photo editing tool on the market. I often use it a lot on my photo studio and also in webpage design |

  16. those who are in the graphics business could never live without Adobe Photoshop.*~~

  17. michael s says:

    my wordpress theme is looking different. I did the header and the initial part and it looks different from yours. There is no searchform.php file in the folder. I am wondering if I have the correct wordpress theme? I installed the starkers theme like you said perhaps its a different version?

    I would be so appreciative if you could please give me a link to the theme I need to download or tell me why there are these differences? I would really love to finish this tutorial as I have come this far and this is the part I really wanted to learn from.

    Thank you heaps and I love your work!

  18. Jahid says:

    hello, I need first two part. How can I get that two parts. I am waiting for your answer

  19. Aaron says:

    You can find all the information regarding the BLOOpress designs at http://www.hv-designs.co.uk/?s=bloopress

  20. Von Walshe says:

    I like the valuable info you provide in your articles. I will bookmark your weblog and check again here regularly. I am quite certain I’ll learn plenty of new stuff right here! Good luck for the next!

  21. Great blog right here! Also your site loads up fast! What web host are you the use of? Can I am getting your affiliate link for your host? I desire my site loaded up as quickly as yours lol

  22. wao awesome i like it ;)

  23. Pouya says:

    Thank you for this learn.

  24. RomPJ says:

    Richard you are amazing!!! i have learned so much in just 1 week!!!!

Leave a Reply