Loading ...
; ?>/images/title.png” border=”0″ alt=”BLOOpress” /><br />
[/sourcecode]</p>
<p>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.</p>
<p>[sourcecode language='php']</p>
<div id=)
; ?>/images/title.png” border=”0″ alt=”BLOOpress” /></a>
</div>
<p><!--title image end--><br />
[/sourcecode]</p>
<p>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.</p>
<p>[sourcecode language='html']</p>
<div id=)
[/sourcecode]
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.
[sourcecode language='php']
‘); ?> Posted in |
[/sourcecode]
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.
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.
Once you’ve done that copy and paste over all your sidebar code from the CSS template.
[sourcecode language='php']
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
Stay Connected…
; ?>/images/rss_icon.png” border=”0″ alt=”RSS” /></a>
</div>
<p><!--RSS icon ends--></p>
<div class=){kind=icon}
; ?>/images/twitter_icon.png” border=”0″ alt=”TWITTER” /></a>
</div>
<p><!--TWITTER icon ends--></p>
<div class=){kind=icon}
; ?>/images/mail_icon.png” border=”0″ alt=”EMAIL” /></a> </div>
<p><!--EMAIL icon ends--></p>
<div class=){kind=icon}
-
Archives
-
Meta
Pages
‘ ); ?>
Categories
‘); ?>
[/sourcecode]
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.
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.
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.
[sourcecode language='php']
[/sourcecode]
Scroll down right to the bottom of your file, just above the get sidebar PHP code add your ending left-content DIV.
[sourcecode language='php']
[/sourcecode]
Head over to your index.PHP file, highlight and copy your post loop to the clipboard.
Highlight the post loop inside the search.PHP file and hit delete.
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.
[sourcecode language='php']
‘); ?>
‘
Pages: ‘, ‘after’ => ‘
‘, ‘next_or_number’ => ‘number’)); ?>
‘, ‘
‘); ?>
[/sourcecode]
Underneath the DIV CLASS “post” you need to add our “post-box” class.
[sourcecode language='php']
Read the rest of this page &raquo;
‘); ?>
‘
Pages: ‘, ‘after’ => ‘
‘, ‘next_or_number’ => ‘number’)); ?>
[/sourcecode]
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.
[sourcecode language='php']
Read the rest of this page &raquo;
‘); ?>
‘
Pages: ‘, ‘after’ => ‘
‘, ‘next_or_number’ => ‘number’)); ?>
[/sourcecode]
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”.
[sourcecode language='php']
Archive for the ‘’ Category
Posts Tagged ‘’
Archive for
Archive for
Archive for
Author Archive
Blog Archives
[/sourcecode]
Underneath the PHP_the_content tag we need to close our post-box DIV.
[sourcecode language='php']
” rel=”bookmark” title=”Permanent Link to “>
[/sourcecode]
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.
[sourcecode language='php']
” rel=”bookmark” title=”Permanent Link to “>
[/sourcecode]
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.
[sourcecode language='php']
[/sourcecode]
[sourcecode language='php']
[/sourcecode]
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.
[sourcecode language='php']
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…
[sourcecode language='html']
[/sourcecode]
Take note of the “cols attribute” see how it says 100% we need to change that to 72. So the code now becomes.
[sourcecode language='html']
[/sourcecode]
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.
[sourcecode language='php']
/>
/>
Website
[/sourcecode]
Your comments area should now look something like this.
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.
[sourcecode language='css']
.float-right {
float:right;
}
ul, ol {
list-style:none;
}
[/sourcecode]
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.
[sourcecode language='php']
to &#8220;&#8221;
id=”comment-“>
comment_approved == ’0′) : ?>
Your comment is awaiting moderation.
[/sourcecode]
Change post-box from post-box to post-box2 and change post-footer to post-footer2. Now paste these styles into your style sheet.
[sourcecode language='css']
.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*/
}
[/sourcecode]
While your in your style sheet you can also paste in these styles.
[sourcecode language='css']
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;
}
[/sourcecode]
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.
[sourcecode language='html']
[/sourcecode]
Delete your exampple thumbnail and replace with this.
[sourcecode language='php']
[/sourcecode]
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.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
21 Responses to “BLOOpress WordPress Theme”