StyleYourBlog

Step 4 - Categorizing your posts

Filed Under: Themes, Wordpress

Okay, so you want to use the category command to post a link to your category? Well its actually pretty easy to get this done. The first step would be to open up your file that you want your category list to display on. So, if you would like your categories to be on the right side than, open up your rightside.php.

Now, once you are in there, figure out where you wanted your category list to display. If you just created the page without a unorder list (ul) than you need to do so. Wordpress uses a ul for there category listing, so you need to define that in your css so it looks the way you want it to. Once you have that, you leave your opening and closing ul tags, and delete all of your li tags out of the list. Your ul should now look like this:

<ul>
<?php wp_list_categories(); ?>
</ul>

You can go to Wordpress Codex: WP List Cats page and look at the parameters list for this function. Any parameters that you use, goes in between the parentheses in this function, and then inside of single quotes. Put as many parameters in there as you want and watch how Wordpress changes what displays.

Now, once you have that in there, and you upload it to your server, you can go ahead and tell your Wordpress blog to use your new theme! That’s it you did it! You have just finished your mind-blowing Wordpress design.

Step 3 - Guts and glory - The real content

Filed Under: Themes, Wordpress

So you think that you are ready for Step 3? Great! Now that you have the basic files set up lets go ahead and get things going.

Wordpress uses what is called a loop to display their content. Basically what it does is it tells the server to go into your MySQL database and display however many posts that you have. You can go into your dashboard and tell it to only disply two posts on your homepage or how ever many posts you want displayed on your homepage. It will display however many posts you tell it, unless you do not have that many yet. Go ahead and open up your file that you want all your articles to display in. If you want the articles on the right side and a sidebar on the left side, then open up the right side, otherwise open up the leftside file.

Now copy the code from your single page layout, that is just for displaying the articles, and paste it into your file that you want the article display to be in. Lets look at how to start the loop first.

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

Okay, so this code needs to go wherever you want your loop to start. So, if you say have a div tag in your code that contains the code for every article. So, if you need to have the article in that div everytime, put the loop start there. The loop will than create the code that is inside the loop everytime that a article is displayed. Now let’s set it up to end the code.

<?php endwhile; else: ?>
	<?php _e('
           Sorry, no posts matched your criteria.'); ?>
	<?php endif; ?>

Okay, these lines need to go wherever you want the loop to stop. So, with the example, this would after the ending div tag for your main article div. What this code is doing is telling that server that, if there is no article matching what the user is trying to get to, to display “Sorry, no posts matched your criteria.” on the page and not display anything else inside the loop. and than it tells it to end the loop if it does not meet that. That’s it. You have your basic loop set up.

Now you may be wondering why when you upload this file, your lovely Hello World post does not show up on the screen. Well, simple. All you are doing is telling the loop to display what is inside of the loop how ever many times you have set inside of your dashboard. You are not calling anything from the database to be displayed. Now, Wordpress has an awesome codex page. Visit it, read it, sleep with it, memorize that thing as much as you can! Now, go do it! Wordpress Codex Page

Look up codes on that page, and implement them until you get what you want. If you need some assistance or jsut have some basic questions, stop by and send me a email on our contact page. Stay tune and check back soon for Step 4 - Categorizing yor posts.

Step 2 - Polished Design to Mind-Blowing Theme

Filed Under: Themes, Wordpress

Alright, so now you have generated your single page polished design? Great, now you are ready to buckle your seat belt and hold on! The ride is going to be bumpy and a little rough, but you are going to thank yourself after this.

What’s that you’re telling yourself? I don’t know PHP? No problem! I had no knowledge of PHP when I began using Wordpress, thanks to the help of fellow bloggers, and the awesome Wordpress Codex Template Tags page, I figured it out. Now I am creating mind-blowing themes, just like you are going to be able to.

Okay, well first things first, you need to do what is called stubbing out your files. So, let’s open up the directory on your computer where you are saving your theme to (I just created a My Webs folder, inside of there the sites main folder /StyleYourBlog/, and then inside of there a Wordpress folder). Okay, now we are going to create a few different files. Below is a list of the files that you need to create. You don’t need to put anything in them, or open them yet. Let’s just stub them out. Here’s the naming convention:

index.php
leftside.php
rightside.php
header.php
footer.php

Now, these are the basic files that you need to make your template work properly. Now let’s copy any images (preferably in an image folder for organization and ease) and your stylesheet into this folder. Got those in there? Great, now let’s open up index.php in your favorite editor.

Okay, now that you got that open, we are going to start knocking out some PHP. Don’t get discourage, just relax, by the end of this series you are going to be a master. Now, in this file, you do not have to have too much code. If you are using a two column design, this file can have as little as four lines. Below is the code for the whole page, copy it into your index.php and save it. I will explain it after the code. Here it is:

Okay, now that you have that in there. Let’s get some basic understanding of the code. We will go line by line.

Line 1:

<?php get_header(); ?>

This is a basic PHP function, which the creator of Wordpress has used. All you are doing here is telling the server to include your file called header. Now, on this line, you do not have to include the name of the file, such as we do in line two and three, because you cannot change the name of this file and still get Wordpress to work. If your header file is not called header.php, your page will not load the header at all. Simple enough right? Stay with me we are almost there.

Lines 2 and 3:

Okay, this line does very similar to the first line. It, once again, tells the server to go find leftside.php or rightside.php and include it in the page. Now, you can name this file virtual anything that you wish to call it, I just use leftside and rightside to keep the file names very simple. You could name this whatever you want, such as billyjoesleftsidestuff.php or thebestrightside.php. Wordpress does not care on these files what you name it. Just as long as you keep the include lines in here, and change the name to whatever you name it, you will be fine.

Line 4:

<?php get_footer(); ?>

This last line is the same thing as line one. It is also a PHP include file that has been built into Wordpress. All that the server is doing is once again, calling in the footer.php file that we generated before.

Now, you can upload your files, but all that you are doing is telling Wordpress to pull up blank pages! Remember, that the only file that we have created is the index.php page. Everything else is still blank! This is where the real fun begins! Let’s get started and start copy and pasting from your original design.

Okay, now let’s open up your header.php file in your editor. Once you get that open let’s go ahead and copy the code from your original template for the header part, into this file. Now, this should be pretty simple and straight forward. Make sure to include everything, include the opening html tag here. Once you get that, there are a few things that we should look at before we get going.

First things first is that we should change the stylesheet declaration in your code. Since Wordpress is ran by PHP and MySQL, it does not have static pages, it will be changing its location. So, the creator of Wordpress was very nice to us designer. He has included in Wordpress the ability to call your stylesheet URL directly! This makes things very easy. All that you do, is in your stylesheet declaration, that looked like this:

<link href="style.css" rel="stylesheet" type="text/css" />

Place this code:

<?php bloginfo('stylesheet_url'); ?>

Into your declaration so that it now looks like this:

<link href="<?php bloginfo('stylesheet_url'); ?>" 
rel="stylesheet" type="text/css" />

Now, all that this code is telling the server, is that this file is located where ever your Wordpress template is. You don’t even have to type in your folder location or nothing! Just this one little line of code and it does it all for you. You can also place this code:

<?php bloginfo('template_directory'); ?>

Into your image declarations inside of header or anywhere else on your design and it will tell the server the same thing! All you have to do is place the folder location for your images, I used /image, after the closing tag of the PHP, and it will tell the server to go to that location and then go into the image folder and get that image.

Easy enough huh!

Alright, now let’s open up the footer.php file into your editor and get to working on that one. Now let’s go ahead and copy your footer information into this new file. Make sure that you include the closing body and html tags into this file or your template will not display properly. That’s it! If you are using any kind of image declaration in your footer, don’t forget to put that code above in your declaration.

That is the basics of your template. You can now upload those files. They go in wp-content/themes/yourthemename. Of course, you need to change yourthemename to the title of your theme. Do not use spaces though. Browsers never like spaces. Don’t log in yet and set your blog to use this theme. We still need to create the left and the right side of your blog. Now you can come back later and go to Step 3 - Guts and glory - The real content and we will get started on plugging in the real PHP code to make Wordpress do all the magic!

Step 1 - Entering the new frontier - Wordpress!

Filed Under: Themes, Wordpress

So you want to create a blog, huh? Well great, that’s awesome! It is easier than everyone makes it sound. Before we get started, lets cover first things first.

This blog is generated using Wordpress. There are many other types of blogs that you can download. You could get a Xanga, a MySpace, a Blogger, or a Wordpress.com account, but these systems do not enable you to have full customization like a Wordpress.org setup does.

Well, the first step you have to do, is download all the files. Go to Wordpress.org and download the zip file. Than once you got that downloaded, unzip the files, and then upload them. Now you need to run the five minute setup for Wordpress. So, open up your favorite browser window, I use Mozilla Firefox, and then go to this URL: http://www.yourdomain.com/wp-admin/install.php. Of course, you have to replace yourdomain.com with your domain name and suffix. Now, follow the basic on screen steps and you are good to go.

Now that we have that done, we should design a template. You can go to Google and search for Wordpress templates, or you can go to http://www.wordpress.org/themes. You could also be a brave soul and create your own design. Which one sounds good to you? If you are creating a template on your own, that’s great! I applaud you! This will give you more customization options.

Okay, now go get a coke and a banana, some basic brain food, and hit the good old notepad, or boot up Dreamweaver and get going. Once, you got your design figured out, come back here and follow the basic instructions on how to transform your polished design into a mind-blowing theme. Go get it done and then go to Step 2 - Polished design to mind-blowing theme.