hv-designs » Wordpress Tutorials

WordPress Posts Explained…

Packt Publishing — Fri, 11 Sep 2009 14:53:27 +0000

Once your WordPress installation is up and running, you are ready to start blogging. WordPress is the right choice for blogging because it’s quite a powerful tool with a seemingly infinite array of options and possibilities.

The main focus of this article is to explain how to make a blog post and how to control all of the information for that post, and not just the title and content. In this article by Hasin Hayder and April Hodge Silver, we will explore how to keep your content organized and searchable using tags and categories.

Adding A Simple Post

Let’s review the process of adding a simple post to your blog. Whenever you want to do maintenance on your WordPress website, you have to start by logging in to the WP Admin (WordPress Administration panel) for your site. To get to the admin panel, just point your web browser to http://yoursite.com/wp-admin.

Remember that if you have installed WordPress in a subfolder (for example, blog), then your URL has to include the subfolder (that is, http://yoursite.com/blog/wp-admin).

When you first log into the WP Admin, you’ll be at the Dashboard. The Dashboard has a lot of information on it. The very top bar, which I’ll refer to as the top menu, is mostly dark grey and on the left, of course, is the main menu. The top menu and the main menu exist on every page within the WP Admin. The main section on the right contains information for the current page you’re on. In this case, we’re on the Dashboard. It contains boxes that have a variety of information about your blog, and about WordPress in general.

The quickest way to get to the Add New Post page at any time is to click on the New Post link at the top of the page in the top bar (top menu).

This is the Add New Post page:

To quickly add a new post to your site, all you have to do is:

–Type in a title into the text field under Add New Post (for example, Making Lasagne).–
–Type the text of your post in the content box. Note that the default view is Visual, but you actually have a choice of the HTML view as well.–
–Click on the Publish button, which is at the far right. Note that you can choose to save a draft or view a preview of your post.–

In the following image, the title field, the content box, and the Publish button of the Add New Post page are highlighted:

Once you click on the Publish button, you have to wait while WordPress performs its magic. You’ll see yourself still on the Edit Post page, but now the following message has appeared telling you that your post was published and giving you a link to View post:

If you go to the front page of your site, you’ll see that your new post has been added at the top (newest posts are always at the top):

Common Post Options

Categories and tags are two similar types of information that you can add to a blog post. We use them to organize the information in your blog by topic and content (rather than just by, say, date), and to help visitors find what they are looking for on your blog.

Categories are primarily used for structural organizing. They can be hierarchical. A relatively busy blog will probably have at least 10 categories, but probably not more than 15 or 20. Each post in this blog will likely have one to four categories assigned to it. For example, a blog about food might have these categories: Cooking Adventures, In The Media, Ingredients, Opinion, Recipes Found, Recipes Invented, and Restaurants.

Tags are primarily used as shorthand for describing the topics covered in a particular blog post. A relatively busy blog will have anywhere from 15 to 30 tags in use. Each post in this blog will likely have three to ten tags assigned to it. For example, a post on the food blog about a recipe for butternut squash soup may have these tags: soup, vegetarian, autumn, hot, easy.

Let’s add a new post to the blog. This time, we’ll give it not only a title and content, but also tags and categories. When adding tags, just type your list of tags into the Tags box on the right, separated by commas:

Then click on the Add button. The tags you just typed in will appear below the text field with little xs next to them. You can click on an x to delete a tag. Once you’ve used some tags in your blog, you’ll be able to click on the Choose from the most popular tags link in this box so that you can easily re-use tags.

Categories work a bit differently than tags. Once you get your blog going, you’ll usually just check the boxes next to existing categories in the Categories box. In this case, as we don’t have any existing categories, we’ll have to add one or two.

In the Categories box on the right, click on the + Add New Category link. Type your category into the text field and click on the Add button. Your new category will show up in the list, already checked. Look at the following screenshot:

If in the future you want to add a category that needs a parent category, select Parent category from the pull-down menu before clicking on the Add button. If you want to manage more details about your categories, move them around, rename them, assign parent categories, and assign descriptive text. You can do this on the Categories page, which we’ll see in detail later in this article.

Now fill in your title and content here:

Click on the Publish button and you’re done. When you look at the front page of your site, you’ll see your new post on the top, your new category in the sidebar, and the tags and category (that you chose for your post) listed under the post itself:

Adding An Image To A Post

You may often want to have an image show up in your post. WordPress makes this very easy. Let’s add an image to the post we just created. You can click on Edit underneath your post on the front page of your site to get there quickly. Alternatively, go back to the WP Admin, open Posts in the main menu, and then click on Edit underneath your new post.

To add an image to a post, first you’ll need to have that image on your computer. Before you get ready to upload an image, make sure that your image is optimized for the Web. Huge files will be uploaded slowly and slow down the process of viewing your site. You can re-size and optimize images using software such as GIMP or Photoshop. For the example in this article, I have used a photo of butternut squash soup that I have taken from the website where I got the recipe, and I know it’s on the desktop of my computer. Once you have a picture on your computer and know where it is, follow these steps to add the photo to your blog post:

Click on the little photo icon, which is next to the word Upload/Insert and below the box for the title:

In the box that appears, click on the Select Files button and browse to your image. Then click on Open and watch the uploader bar. When it’s done, you’ll have a number of fields you can fill in:

The only fields that are important right now are Title, Alignment, and Size. Title is a description for the image, Alignment will tell the image whether to have text wrap around it, and Size is the size of the image. As you can see, I’ve chosen the Right alignment and the Thumbnail size.

Now click on Insert into Post. This box will disappear, and your image will show up in the post on the edit page itself:

Now click on the Update Post button and go look at the front page of your site again. There’s your image!

You may be wondering about those image sizes. What if you want bigger or smaller thumbnails? You can set the pixel dimensions of your uploaded images and other preferences by opening Settings in the main menu and then clicking on Media. This takes you to the Media Settings page:

Here you can specify the size of the uploaded images for:

–Thumbnail–
–Medium–
–Large–

If you change the dimensions on this page and click on the Save Changes button, only images you upload in the future will be affected. Images you’ve already uploaded to the site will have had their thumbnail, medium, and large versions created already using the old dimensions.

Using The Visual Editor Vs The HTML Editor

WordPress comes with a Visual editor, otherwise known as a WYSIWYG editor (pronounced wissy-wig, which stands for What You See Is What You Get). This is the default editor for typing and editing your posts. If you’re comfortable with HTML, you may prefer to write and edit your posts using the HTML editor—particularly useful if you want to add special content or styling.

To switch from the rich text editor to the HTML editor, click on the HTML tab next to the Visual tab at the top of the content box:

You’ll see your post in all its raw HTML glory and you’ll get a new set of buttons that lets you quickly bold and italicize text as well as add link code, image code, and so on. You can make changes and swap back and forth between the tabs to see the result.

If you want the HTML tab to be your default editor, you can change this on your Profile page. Navigate to Users | Your Profile, and select the Disable the visual editor when writing checkbox.

Drafts, Timestamps, and Managing Posts

WordPress gives you the option to save a draft of your post so that you don’t have to publish it right away but can still save your work. If you’ve started writing a post and want to save a draft, just click on the Save Draft button at the right (in the Publish box), instead of the Publish button. Even if you don’t click on the Save Draft button, WordPress will attempt to save a draft of your post for you about once a minute. You’ll see this in the area just below the content box. The text will say Saving Draft… and then the time of the last draft saved:

At this point, after a manual save or an auto-save, you can leave the Edit Post page and do other things. You’ll be able to access all of your draft posts from the Dashboard or from the Edit Posts page.

WordPress will also let you alter the timestamp of your post. This is useful if you are writing a post today that you wish you’d published yesterday, or if you’re writing a post in advance and don’t want it to show up until the right day. The default timestamp will always be set to the moment you publish your post. To change it, just find the Publish box and click on the Edit link (next to the calendar icon and Publish immediately), and fields will show up with the current date and time for you to change:

Change the details, click on the OK button, and then Publish your post (or save a draft).

If you want to see a list of your posts so that you can easily skim and manage them, you just need to go to the Edit Posts page in the WP Admin by navigating to Posts in the main menu. You’ll see a detailed list of your posts, as seen in the next screenshot:

Advanced Post Options

By now, you have a handle on the most common and simple options for posts and you may be wondering about some of the other options on the Edit Post page. We’ll cover them all in this section.

A quick display tip:
When you first visit the Edit Post page, all of the four advanced options (Excerpt, Send Trackbacks, Custom Fields, and Discussion) are ‘open’ below the post content. If you never use them and want to clean up the look of this page, you can single-click each bar and they’ll collapse. You can also rearrange them by dragging them to a new order. You can also use Screen Options (top right of the page) to uncheck certain boxes, and thus not display them at all.

Excerpt

WordPress offers theme designers the option to show a post’s excerpt (instead of its full content) on pages within the theme. If you enter some text into the excerpt box on the Edit Post page, that text will be used as the post’s excerpt on theme pages that call for it. However, if there is no text in this box, WordPress will use the first 55 words of the post’s content (which is stripped of HTML tags) followed by […] (which is not a link).

The more tag should not be confused with the excerpt. This is different from the excerpt because you, not the theme designer control its use. Text before this tag, for any post that has it, will be the only thing that’s shown on all blog pages (for example homepage, category page, search results page, and so on). The full post text will only show up on the post page. All you have to do is put the more link at the spot in your post where you’d like the cut-off to be. WordPress will automatically cut off the post there and replace it with a Read the rest of this post link.

To add this tag to a post, first place your cursor in the spot where you’d like the post to be split up. Then click on the more tag button in the editor. If you’re using the Visual editor, the button you want to click looks like this:

If you’re using the HTML editor, the button looks like this:

Trackbacks

Trackbacks are useful if you write a blog post that is a response to a post on someone else’s blog and you want them to know about it. Just copy the trackback URL from that person’s blog post and paste it into this box. An excerpt of your blog post will show up as a comment on their blog post.

If someone wants to display a blog post on their blog about a post on your blog using the default theme, he or she can find the trackback URL on the post page for every post. For example, click on the title of one of your posts on your blogs’ front page and you’ll go to the post page:

All this person has to do is right-click on the trackback link and select Copy Link Location, which in this case is http://packt:8888/2008/11/a-great-sandwich/trackback/. If permalinks are not turned on, it would be http://packt:8888/wptrackback.php?p=6.

Trackbacks are becoming somewhat out-of-date with the advent of pinging. In fact, many WordPress themes are written to essentially disable trackbacks. Pinging is WordPress’s way of notifying popular update services, such as Ping-o-Matic!, which other people use to keep up-to-date with your blog and other people’s blogs. We will explain more about pinging in the following section.

Discussion

A Discussion box has two checkboxes in it: one for allowing comments, and the other for trackbacks and pingbacks. When you first install WordPress, both these checkboxes will be checked by default. You have to uncheck them if you want to turn off the comments or trackbacks and pingbacks for the post.

Pingbacks are essentially the same as trackbacks, but differ in two important ways:

The notification from your blog to the blog of the person you’re commenting on happens automatically—you don’t have to enter a special URL into a special field. All you have to do is link your blog post to their blog post.
Pingbacks don’t send any content.
If you uncheck the comments box, visitors will not be able to comment on this blog post.

If you uncheck the trackbacks and pingbacks box, when other people mention your blog post and link to it on their own websites, your blog post won’t notice and won’t care. So, if you are using WordPress to run a non-blog website, this is the best option for you.

If the box stays checked, other people’s pingbacks about this post will show up under your post along with comments, if any. If you’re using WordPress to run a blog website, you’ll want pingback to stay checked—especially if you want sites such as Technorati and other rating/authority sites to stay alerted.

If you want either or both of these boxes to be unchecked by default, go to Settings and then Discussion in the main menu. You can uncheck either or both of the boxes labeled Allow link notifications from other blogs (pingbacks and trackbacks.) and Allow people to post comments on the article:

Custom Fields

Custom Fields are a way for you to add additional information about your blog posts that are not part of WordPress by default. By default, every WordPress post has a number of pieces of information (fields) such as title, content, date, categories, and so on. If there is a field you want all or many of your posts to have, you can add it here.

For example, let’s say you are a gadget reviewer and every blog post is a review of some new gadget. Every time you write a review, you’re writing it about a product made by some company, and you’d like to have that company’s logo associated with the blog post. You can make a custom field called company_logo and the value can be the path to the logo image.

To use this custom field information, you either have to manually modify your theme files, or use a plugin.

Password & Private Protection

WordPress gives you the option to hide posts. You can hide a post from everyone but yourself by marking it Private, or you can hide it from everyone but the people with whom you share a password by marking it as Password protected. To implement this, look at the Publish box at the upper right of the Edit Post page. If you click on the Edit link next to Visibility: Public, a few options will appear:

If you click on the Password protected radio button, you’ll get a box where you can type a password. Visitors to your blog will see the post title along with a note that they have to type in a password to read the post.

If you click on the Private radio button, the post will not show up on the blog at all to any viewers, unless you are the viewer and you are logged in.

If you leave the post Public and check the Stick this post to the front page checkbox, this post will be the first post on the front page, regardless of its publication date.

Be sure to click on the OK button if you make any changes.

Post Slug

This box may not be visible by default, in which case you have to open Screen Options at the top of the page and check the box next to Post Slug.

The post slug is used in the URL if your blog is using permalinks. Permalinks are a way to prettify your URLs. For example, right now, the URL for my Butternut Squash soup post is http://packt:8888/?p=10. If I turn on permalinks, by default the URL would be http://packt:8888/2008/11/butternut-squash-soup/. The very last part of the URL, butternut-squash-soup, is the slug. WordPress chose the slug by taking my post title, making it all lowercase, removing all punctuation, and replacing spaces with dashes. If I’d prefer it to be something else, such as squash-soup, this Post Slug box is where I can change it. The slug is something that Google search loves, so using them helps to optimize your site for search engines.

Adding Writing Options

WordPress offers a neat bookmark called Press This. You can put it into your browser’s bookmarks or favorites, which will let you quickly write a blog post about the website you’re visiting. (This used to be called the bookmarklet.) You may have encountered this same feature as offered by Facebook, Del.ico.us, and other social networking sites.

You just have to add Press This to your browser once, and then you can use it anytime. To add the Press This link to your browser in the WP Admin, go to the Tools menu. At the bottom of the Tools page is a Press This link. Just grab it with your mouse and drag it up to your browser’s bookmark bar.

Now it’s available to you. For example, if you’re reading a newspaper website and you read an article you’d like to mention in a blog post, just click the Press This bookmark (or favorite). A window will pop up with the Edit Post page in it and the URL of the site you’re looking at already written in as a link:

You can then write whatever additional text you want, add tags and categories, and then either save it as a draft or publish it right away.

Posting Via Email

If you want to add a post to your blog without having to open the WP Admin and log in, you can set up your WordPress installation to accept posts sent via email. First, you have to set up a special secret email address that is accessible via POP. WordPress will check that email address and turn any emails in it into posts. So you have to be sure not to use this email address for any other purpose!

Once you have the email address set up at your mail server, go to your WP Admin and navigate to Settings | Writing. Scroll down a bit to Post via e-mail:

Now just enter the server, login name, and password into the Writing Settings page and be sure to click on the Save Changes button

Adding and Managing Categories

Earlier in this article, you learned how to quickly add a category when adding a post. Now let’s talk about how to manage your categories in a bigger way. First, navigate to Posts | Categories in your WP Admin. You’ll see the Categories page:

This is a useful page that combines the ability to add, edit, and review all of your categories. As you can see, any categories you’ve added via the Edit Post page are listed. You can Edit, Quick Edit, or Delete any category by clicking on the appropriate link in the list.

If you add a category on this page, you can also choose its slug. The slug is the short bit of text that shows up in the URL of your site if you have permalinks enabled. If you don’t choose a slug, WordPress will create one for you by taking the category name, reducing it to all lowercase, replacing spaces with dashes, and removing any other punctuation marks.

Another thing you can do on this page is choose a parent category for any category. If you choose to use parent categories, your categories will be displayed hierarchically, just as your pages are displayed.

Summary

In this article you learned everything you need to know to add content to your blog and manage that content. You learned about posts and categories. You discovered tags and excerpts. You also learned about adding images, using the rich text editor, changing timestamps, customizing excerpts, and the different ways of posting.

Liked This Article? Why Not Buy The Book

Create your own complete blog or web site from scratch with WordPress.

Learn More…

About The Author

Richard Carpenter — Thu, 13 Aug 2009 20:37:35 +0000

Hello everybody welcome to tutorial 221, in this tutorial il show you how to hard code an “about the author box” at the bottom of every post.

What We’ll Be Creating

Firstly let me show you what we’ll be creating, recently i added an about the author box to this blog. Located at the bottom of every post you will see a grey box which looks like this.

The way its constructed is really easy, we’ll use simple CSS and HTML for the box and the way its looks then we’ll use author template tags to add the dynamic content, which includes the thumbnail.

You can see all the tags associated with the author tag within wordpress here

The Box HTML Markup

The HTML has to be added within the wordpress loop, the HTML markup for the box looks like this.



About The Author: Richard Carpenter






Hi im Richard Carpenter im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of HV-Designs. You can follow me on twitter HERE. You may also view my portfolio HERE.
 
Richard Carpenter has written 254 posts.

We start off with a DIV of “article-author”, within that DIV we add our header wrapped in a H3 tag. Yours might be a different header depending on how your blog is designed and coded.

Still inside the “article-author” DIV there’s two more DIV’s “author-image” and “author-text”. The “author-image” DIV will contain our 80px X 80px thumbnail image and the “author-text” DIV will contain our text. Pretty straight forward stuff.

The Box CSS Styles

The CSS styles for the HTML markup look like this.

#article-author {
float: left;
width: 598px;
margin-top: 30px;
border: 1px solid #d9d9d9;
background-color: #E9E9E9;
padding: 10px;
clear: both;
}

#article-author a {
color: #56b0d8;
}

#article-author a:hover {
color: #000;
}

#author-image {
float: left;
height: 80px;
width: 80px;
border: 1px solid #d9d9d9;
background-color: #FFFFFF;
padding: 10px;
}

#author-text {
float: left;
width: 486px;
margin-left: 10px;
margin-top: 8px;
}

#author-text p {
font-size: 12px;
line-height: 18px;
}

h3 {
color: #000000;
text-transform: capitalize;
font-weight: normal;
font-size: 18px;
letter-spacing: -1px;
margin-bottom: 10px;
}

Integrating The First Template Tag

To integrate the tags we just need to replace some of the words in our HTML markup to the PHP template tags. The first tag we can integrate will be the “the_author_link();” tag, here’s the description from the wordpress codex, located HERE

This tag displays a link to the Website for the author of a post. The Website field is set in the user’s profile (Administration > Profile > Your Profile). The text for the link is the author’s Profile Display name publicly as field. This tag must be used within The Loop.

Replace the bits of text which uses your name or the “authors name” with the “author-link” template tag.

The markup should now look like this.



About The Author: 






Hi im Richard Carpenter im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of HV-Designs. You can follow me on twitter HERE. You may also view my portfolio HERE.
 
 has written 254 posts.

Author Images

If your the only author on your blog you can add your 80px X 80px image using the normal method, just linking to the image from one of your folders within your site directory. If you have multiple authors you can use the “author-id” tag to display the image. Each author on your blog providing you’ve setup the author in the wordpress users panel is assigned a unique ID. You can find out the ID by hovering over a author link in the edit posts area.

Once you’ve found out the unique ID label the image as the ID, so my unique ID is “1″ so id rename my image “1.png” or “1.gif” place the image in a folder on your server. We then add the “author-id” template tag where the name of the image would be. The HTML looks like this


.gif" alt="About The Author" />

Author Description

Inside the author-text DIV we need to delete the text and the paragraph tags then replace with the “author-description” tag. You then need to fill in the biography part under users within wordpress with some author text.

The HTML looks like this



 
 has written 254 posts.

Optional Tags

On my about author section i have also got abit of text which says “php the_author_link();” has written 254 posts. Where 254 is we can add in another template tag so this number updates every time the author posts. The template tag we use for this is the “author-posts” tag.

Displays the total number of posts an author has published. Drafts and private posts aren’t counted. This tag must be used within The Loop. More info HERE

The HTML looks like this.


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

The Whole Code

So finally our about author code looks like this.



About The Author: 


.gif" alt="About The Author" />




 
 has written  posts.

and that concludes this tutorial.

Widgetizing WordPress

Richard Carpenter — Sun, 28 Jun 2009 07:56:31 +0000

Widgetizing your wordpress theme sounds harder than it actually is. In this tutorial il show you how.

What Are WordPress Widgets

WordPress Widgets (WPW) is like a plugin, but designed to provide a simple way to arrange the various elements of your sidebar content (known as “widgets”) without having to change any code.

Taken from the wordpress codex

Widget Friendly HTML

When designing your wordpress theme theres a certain way you should concider coding your sidebar or part of the sidebar you want to widgetize. The best way is to use a simple list markup. Take the example below for instance.


Widget Title

Item #1
Item #1
Item #1
Item #1
Item #1

In the code above we have a simple class of “sidebar-widget” inside our class we have a simple unordered list and our list items. This is an ideal markup for a wordpress widget.

Registering Our Sidebar

Now we have our ideal widget ready HTML code we’ve go to register our sidebar in our “functions.php” file. Open up your file in your code editor then add the code below.

 'Right Sidebar',
'before_widget' => '',
'after_widget' => '
',
'before_title' => '',
'after_title' => '',
));
}
?>

Let me explain the code above in abit more detail. There are 5 parameters you need to set, the first one is “name” which will be the name of your widget area, when you add the name it will appear in the widget pallette.

The second parameter is “before_widget” in this part you need to put the start of your widget, which in our case is our div class “sidebar-widget”. The third parameter is “after_widget” this will be the end of our widget, in the space we need to put our ending div.

The last two parameters we need to input are “before_title” and “after_title”, if you look in our simple HTML list we have a widget title wrapped in a “H3″ tag.

Adding The Widget Into The Widget Area

You can have a widget any where you see fit, but for the widget to work you first need to add a couple lines of PHP into the area of your theme where you want the widgets to appear. The code looks like this.

Notice in the code above we have our “right sidebar name” if you were to have more than one widget area on your theme you can easily define what goes in what widget area and where. To add a second widget area you need add another snippet of widget code like this.

 'Left Sidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
}
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'Right Sidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
}
?>

Once you’ve inserted your widget code into the area you want it, upload your files and give it a whirl, just dont forget to style your HTML in your stylesheet. Thats it all done, any questions dont hesitate to ask.

Xampp & WordPress

Richard Carpenter — Mon, 27 Apr 2009 09:44:25 +0000

Good evening everybody today il be doing a quick tutorial on install wordpress to use with XAMPP.

New Screencast

Written Tutorial

When developing websites or wordpress themes i always use xampp as it makes life so much easier. Basically the program allows you to use your computer as a server, saving you time & bandwith uploading to servers online. Firstly your going to need xampp and a fresh copy of wordpress, you can get wordpress from wordpress.org and xampp from apachefriends.org. Once you’ve downloaded both, extract wordpress to a folder on your desktop and install xampp. After xampp has installed open up your hard drive and locate the xampp folder, inside the xampp folder there should be a folder called “htdocs”.

The “htdocs” folder is where you’ll place your wordpress installation, website ,script etc… Copy your wordpress folder into the htdocs folder make sure the wordpress folder aint a wordpress folder within a wordpress folder. The contents of the wordpress folder should be on the next level. Open your wordpress folder and rename the file “wp-config-sample.php” to “wp-config.php”. Open the “wp-config.php” file you should be greeted with some PHP, the only chunk of code you need to edit are listed on the image below.

You need to enter a database name, username and password. Make sure you remember them, save your file then start up xampp, when you load xampp you’ll be greeted with a box like this.

The only two functions you need running are the first two. “apache & mysql”, press start on the two services. Your computer is now running as a server using the “htdocs” folder as your main server directory. Open your web browser and type “http://localhost”.

You should get a big orange website come up called xampp, in the sidebar under tools click “phpmyadmin”. In phpmyadmin you need to create a new database, the database has to be the same as what ever you put in your wordpress config file.

Once the database has been created click the privilages tab and create a new user. Make sure the username and password are the same as your wordpress config file. Point your browser to “http://localhost/wordpress” you should get the wordpress installation page, enter your blog title and e-mail address. Take note of the username and password that comes up on the next screen its wise to change the password to something more rememberable. Your wordpress installation is complete. You can now start adding your themes into the normal theme directory as you would if you were on a server online. You can also look at any offline webpages you might have, just create a folder called “what ever” inside the “htdocs” folder, place your index.html file inside the “what ever” folder. Point your browser to “http://localhost/what ever folder/index.html.

Many thanks for reading, dont forget to subscribe via rss and twitter, your support is much appreciated. See you soon.

BLOOpress WordPress Theme

Richard Carpenter — Fri, 24 Apr 2009 18:07:00 +0000

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.

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 Kubrick by Michael Heilemann)
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.

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.


<?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('');
}
?>

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

BLOOpress "just another wordpress blog"

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

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.

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.

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.

/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.


/images/title.png" border="0" alt="BLOOpress" />

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.

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

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.

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.

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

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!”.

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

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.

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.



Home
Sitemap
Contact Me

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.

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.

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.

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.

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





 



'); ?> Posted in  |

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.

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.

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.

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.













 



 


'); ?> Posted in  |   |

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.






Stay Connected...


/images/rss_icon.png" border="0" alt="RSS" />



Subscribe via RSS
Updates in your reader



/images/twitter_icon.png" border="0" alt="TWITTER" />



Subscribe via twitter
Updates on your twitter



/images/mail_icon.png" border="0" alt="EMAIL" /> 



Subscribe via email
Updates in your mailbox


   



Pages' ); ?>

Archives





Categories'); ?>





Meta



Valid XHTML
XFN
WordPress

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.

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

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.



 




Read the rest of this page »'); ?>
 'Pages: ', 'after' => '', 'next_or_number' => 'number')); ?>


', ''); ?>

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



 







Read the rest of this page &amp;raquo;'); ?>
 'Pages: ', 'after' => '', 'next_or_number' => 'number')); ?>

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.



 







Read the rest of this page &amp;raquo;'); ?>
 'Pages: ', 'after' => '', 'next_or_number' => 'number')); ?>

	

 


', ''); ?>

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”.









Archive for the ‘’ Category

Posts Tagged ‘’

Archive for 

Archive for 

Archive for 

Author Archive

Blog Archives

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

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.



        












'); ?> Posted in  |

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.

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.



 








Read the rest of this entry »'); ?>

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.

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…

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

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.

 />
Name 

 />
Mail (will not be published) 


Website

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.

.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.




 to &amp;#8220;&amp;#8221;







id="comment-">


comment_approved == '0') : ?>


Your comment is awaiting moderation.








 at

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.

Delete your exampple thumbnail and replace with this.


" title="">
" alt="" />

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.

Seperating Trackbacks & Pingbacks

Richard Carpenter — Sat, 04 Apr 2009 17:34:46 +0000

Hello, welcome to another tutorial by hv-designs. Today we’ll be diving into wordpress again looking at seperating our comments and our trackbacks.

Most blogs i visit or have seen dont bother to seperate there comments and tracksbacks, personnally i think it looks better and more orgainised. It can be achived with minium effort and very little code. In todays tutorial il be seperating our trackbacks and comments using the “mywordpress theme” tha we previously created a couple of days ago. Open up your comments.php file in dreamweaver or notepad. The file should be located in the theme directory.

Once open locate the line “php foreach $comments as $comment”.

After this line paste this snippet of code.

Your code should now look like this.

Scroll down and locate the end of comment loop. “php endforeach; /* end for each comment */”.

Just before the code above we need to end our “is comment statment”. Which looks like this.

The code should look like this.

What does all this code do i here you shout????? Basically the code will seperate all your trackbacks and pingbacks from the main comments loop. This will allow us to add a second comments loop to the comments file to display the trackbacks and pingbacks only.

Locate this snippet of code inside your comments.php file.

Just before it add this code.

Trackbacks

If you are using the “mywordpress theme” change the H3 tag from H3 to H1 or H2. Thats it all done, the code above can then be styled as you wish, its not that different from when we styled our comments.php file in the “my wordpress theme tutorial”. If you liked this tutorial please subscribe to our twitter and RSS feeds. Thanks for reading, till next time.

PSD to CSS to WordPress Pt.3

Richard Carpenter — Tue, 31 Mar 2009 08:41:11 +0000

Hello welcome to part 3 of the PSD to CSS to WORDPRESS tutoral, in this part of the tutorial we’ll be converting our CSS template into a working wordpress theme. You can download the theme for free using the button below you can also down all 3 tutorials in PDF format.

DOWNLOAD ALL 3 TUTORIALS IN PDF format HERE.

Before we start converting our theme over to wordpress you might want to download and install “xamp” this will allow you to run wordpress on your local hard drive saving on bandwidth and internet load times. Your also going to need a theme by “elliot jay stocks” called “starkers”. The theme is a completely naked theme, its been stripped of all its CSS and HTML, basically giving you a blank wordpress canvas to work on, its ideal for wordpress developers to start from. The theme uses files from wordpress 2.6.2. But this doesnt mean its not going to work with the latest wordpress software, i started with the exact same theme to build my hv-designs website and thats running in wordpress 2.7. If your thinking “bummer i wanted threaded comments” well you can easily grab a 2.7 comments file and replace it. Hopefully “elliot jay stocks” will release a naked 2.7 theme soon. Any way lets press on once you’ve downloaded the “stalkers theme” extract it to your desktop, rename the stalkers theme folder to “mywordpress”, you can also change the screenshot if you wish.

In your stalkers theme there is a folder called “style” inside this folder are some additional CSS files for IE hacks, typography and reset files. You dont really need this folder so if you want to you can delete it, but keep it by all means if you wish to keep it. Open up the “style.css” file in the main “mywordpress” theme directory. Once its open you’ll be greeted with this.

/*
Theme Name: Starkers
Theme URI: http://elliotjaystocks.com
Description: The totally nude WordPress theme. Phwoar! (Based on the famous Kubrick by Michael Heilemann)
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";

Delete the 3 imported .CSS files at the bottom of the page, then edit the theme name, description etc… Mine looks like this.

/*
Theme Name: MyWordpress
Theme URI: http://www.hv-designs.co.uk
Description: A wordpress theme
Version: 1
Author: Richard Carpenter
*/

Save your .CSS file when you load up the theme in wordpress under the appreance tab you’l now see this.

If you havent changed your image you should see a wooden naked body. Which was the orginal starkers theme screenshot. Back to your .CSS file underneath the information we just edited, copy and paste the whole of your CSS templates CSS file into it save and exit. Now open up the “header.php” file, you’ll now be greeted will loads of PHP mixed in with some HTML, the first thing we can do is remove all the code from the TITLE tag at the top of document.


>




<?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('');
}
?>

Once you’ve deleted the php from the title tag, just replace it with what ever you want to display at the top of the browser.


>



MYWORDPRESS "your wordpress slogan can go here"

If you didnt want to manually add your wordpress title instead you can use your blogname, when you installed wordpress it asked for the name of your blog, it is also displayed in your wordpress admin panel at the top. If you wanted to dynamically display that instead of the manual title you can use this bit of code.


>



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

Next still inside the header.php file at the very bottom delete everything underneath the body tag your header.php document should look like this.


>



MYWORDPRESS "your slogan can go here"

All the content we add now will be pasted in underneath the body tag. Copy your images folder from your CSS templates directory and paste it into the themes directory. Open up your index.html file from your CSS template. Copy everything from the opening “container DIV” to the ending “navigation DIV”. Paste it underneath the body tag. Save your header.php file, if you check the theme in your browser it should look like this.

Pretty quick eh??, we just need to make a few tweaks and the header file should be complete. On our navigation we have a list that we created page #1, page #2, page #3 etc… well we want wordpress to add our pages dynamically when we goto add page in our admin panel. To do this we change our navigation to look like this.




 Home

We can keep the 1st button “home” just link it to your main domain name “http://www.what_ever.com. But underneath we can delete page #1 – page #9 and just add the one line off php wrapped in out LI tag. The php basically gets your wordpress pages from the database and displays them in page order. If you only had say one wordpress page and loads of external pages you wanted to use then just add another page underneath like this.




Home

External Page

You can have as many as you like within reason, anything that overflows the 900px navigation will just mess the layout up so be carefull. Another item we need to tweak is our search field, delete the form structure from your search DIV and add the following peice of PHP.

If you check your theme in your browser now, you’l notice the search form has lost all its styling. Open up “searchform.php” from your “mywordpress theme folder”. This file contains our search form and looks like this.

All’s we need to do is add our class of “search-field” and “search-button” which we created when we created our CSS template. The form now looks like this.

We’ve applyed our search form classes, deleted the the “search for” text before the search field and changed the word on the submit button from “search” to “go!”. Close the searchform.php file and check your theme in your browser to see the changes you can also test out your search form it should now work, you wont see anything exciting as we need to style our search results page. Thats it for the header.php file you can now close it. Now open up your “index.php” file in from your themes directory. The index.php file is the main page of our website, this is the 1st page people will see when logging onto your website. We have quite abit of work to do, to get it working. All the PHP code wrapped inside the H2 tag is the title of the post.

The PHP code wrapped in the P tag underneath is the date.

Then there a line of PHP code underneath the P tag which says.

This displays the content of the post, and when you use the wordpress more tag to cut off your posts the text “read the rest of this entry” is displayed. Then finally we have another P tag.

'); ?> Posted in  |

This PHP displays the tags if there any for the post, it displays what catergorie the post was posted in and shows how many comments were made on the posts. Now we need to jumble all this PHP around so it displays the way we want, like our CSS template. Firstly we need to copy and paste a couple of DIV tags in there from our CSS template. The 1st two DIV tags we need to add are DIV ID content and DIV ID content-left. We add these two DIV’s at the very top underneath GET HEADER.

Then at the very bottom of our page above GET SIDEBAR we need to end our content left DIV.

Now we need to add our “a-post” class to the document we add this just above div class post and end it underneath the PHP code containing the tags and number of comments etc…





 


'); ?> Posted in  |

We now need to start sorting through the PHP code and get rid of what we dont want to be displayed. At the very bottom around line 34 you should see.

This line will display a search field when a post cant be found, we have a search field in our header already so we dont really need a 2nd one. Delete the one line of code. Scroll up to the PHP code which contains the post tags and amount of comments.

'); ?> Posted in  |

On our main page we dont really need the tags, or the edit post link, so the delete these two lines.

'); ?>

Your code should now look like this.

Posted in  |

We now need to start copying and pasting our post classes over to our theme. The first one we need to copy over will be for our thumbnail code. Copy the class “post-img” from our CSS template, paste it underneath the “div class post”. The code looks like this.

We then had some PHP wrapped in a H2 tag, change the H2 tag to a H1 tag then wrap the whole thing in our “post-title class” from our CSS template.

We then need to move over our “post-desc class” from our CSS template, we wrap this class around the post content PHP.

Our index.php all in all should now look like this.
















 


Posted in  | 





	
	


Not Found
Sorry, but you are looking for something that isn't here.

Underneath our “post-desc” class we have this code.

Posted in  |

We want to delete the first chunk which basically says “posted in and then some php code”. We dont really need this bit. So the code would look like this after its been deleted.

We then need to delete the starting P tag and ending P tag from the code above, then cut the PHP code and paste it into the post title class next to the PHP code for the time and date.

Thats it for the index.php file for now. Now lets get the sidebar sorted, open up your sidebar.php, most of the code at the top can go. Delete from.

All the way down to.

Pages' ); ?>

Now above the code above add

At the very bottom of the page add your sidebar ending and content ending DIV’s.

Now change ALL H2 tags to H1 tags. Your search bar is complete, if you test your theme in the browser you will see the sidebar is not the same as our CSS template. If your not really that bothered about having all the catergores, archives etc.. in the sidebar and want to create something on your own, then just remove all the code from inbetween the sidebar opening and ending tags. Then just create your own sidebar as we did in our CSS template. Id highly recommend wrapping your “custom” sidebar content in the sidebar-content class.

Which we used in our CSS template. I always find it best to create your own sidebar from scratch. Now lets sort out our footer, open your footer.php file, there shouldn’t be alot of content in there just highlight it all and hit the delete key. In your index.HTML file from the CSS template copy this chunk of code.






mywordpress "Your fancy wordpress slogan here"



Copyright &amp;amp;copy; mywordpress.co.uk | All Rights Reserved

Design By HV-Designs.co.uk

Paste it into your footer.php file, save and exit. Refresh your theme in your browser to see the changes. The footer is as easy as that. The theme is nearly complete we just need to tweak a few more pages. Open up “page.php” this file relates to single pages which we add through the wordpress admin panel. The tags we added to our index.php file can also be used in this file. Underneath the “get header php code” add this code.

At the very bottom above the “get sidebar php” code add.

Your “page.php” code should now look like this.










Read the rest of this page »

'); ?>
'Pages: ', 'after' => '

', 'next_or_number' => 'number')); ?>

If you check a page on your theme it should now be wrapped in a box like we used for our main posts in the index.php file. This wont be the first time you’ll reuse the code, we can use the same code in our search.php file which displays our search results within our wordpress theme, which brings me to our next file. Open up your index.php file and goto “file > save as” save the index.php as “search.php” overwrite the existing file. All done, when you search using the search field in the header, the search results will be displayed the same as our posts. Obvisouly you can make your search results look how they want by applying different styles and DIV’s to the file. Now open up “archive.php” underneath the “get header php code” add the following.

At the very bottom of above the “get sidebar php” code add two ending DIV’s.

Everything thats in your wordpress archive like posts by categorie, posts with the same tags, posts posted on the same day etc… all this information will be displayed like our single pages are. If you make a post with a couple of tags or click a month under the “archives” section in the sidebar you’ll see how its displayed. Again you can make it display what you want how you want. Have you noticed a pattern emerging????? most of the files use the same PHP tags but its just displayed in a different way. You can make your archives page look the same as your search page and index.php page, you just need to add the relative “classes / DIV’s” to the “post loop”. Right now time for our 404 page. Open up the 404.php file. again add the post code from our CSS template.








Error 404 - Not Found

Theres only two more files left to edit then your theme is complete. Ive left these two files till last because they are sometime abit fiddley. Open up your “single.php” file underneath the “get header php code” add the post classes.

Scroll down to the very bottom above the “get footer code” add the two ending DIV’s. The sidebar is not included in the single.php file so we need to add it manually. Underneath the two ending DIV’s add the get sidebar php code.

Load up your theme in the browser and check what your post pages look like. Look ok, the comments field looks abit big for our theme, so our next job is to shorten it. Open up your “comments.php” file. Near the bottom locate the form. Which looks like this.





Logged in as . Log out &amp;amp;raquo;



 />
Name 

 />
Mail (will not be published) 


Website



XHTML: You can use these tags: 





ID); ?>

At the bottom of this code you should see the text area.

Notice the “columns” are set to 100%, thats where our problem lies. Remove the “%” and change to 70. It should now look like this.

Test the changes in your browser, the text area is now a snug fit my end. Our next problems lie’s with our text input fields, there is a quick fix for these. At the begining of each form field add the P tag then at the end add the ending P tag.

 />
Name 

 />
Mail (will not be published) 


Website

You can add your own styles to the form boxes, just make a class with some styless in your CSS file, then apply the class to the input form boxes. Another problem with have is our text boxes sit right on top of our XHTML text. To sort this add a BR tag after the last form box.



Website





XHTML: You can use these tags: 





ID); ?>

Now make some example comments on your theme, you’ll notice they aint very nice too look at, everything is close together, theres basically no styling or nothing. This is where we need to start adding some basic styling of our own. In our comments.php file scroll towards the top to locate the comments loop. We need to add two new classes the first class is a class of “comment-box” this wraps the whole comments loop, dont forget to end the class at the bottom. The second class is a class for our gravatar, you can see where the gravatar is called in php by looking at the code below.





id="comment-">





 Says:
comment_approved == '0') : ?>
Your comment is awaiting moderation.

 at

Open up your CSS file for the theme and add your classes.

.comment-box {
border: 1px dashed #666666;
margin-bottom: 10px;
padding: 5px;
float: left;
text-align: justify;
width: 565px;
}

.gravatar {
float: right;
margin: 5px;
}

To the whole comment loop were going to add a 1 pixel dashed border, a bottom margin to seperate each comment, then add 5 px padding so the content inside the comments box arn’t right against the dashed lines, we then float out box left, justify our text and set a width of 565px. We then add our styling for our gravatar image, We just want to float the gravatar image to the right and add a 5px margin all the way around the image. The comment text should flow around our gravatar image. You can also change the size of your gravatar image by altering the number in the code.

The number 32 in the code means the image will be 32px by 32 px. Try changing to something eles, i find 72 is a nice size. Save and test what your comments look like in your browser. They dont look too bad. Still think it needs some work. Lets insert a line break inbetween the date and time, locate the time and date in the loop.



id="comment-">





 Says:
comment_approved == '0') : ?>
Your comment is awaiting moderation.

 at

Thats pretty much it for the comments, obviously you can take more time to per-fect the look of your theme. Test your theme in the browser, ive tested mine in firefox and internet explorer and it works fine, there are a few minor bugs which we’ll sort now. If you notice in firefox there are numbers next to the comments and bullet points here and there. Open up the CSS file and paste in the following rule.

ul, ol {
list-style:none;
}

Another bug you’ll notice is that wordpress doesnt include the line breaks inbetween text on pages (NOT POSTS) and comments. To sort this we just need to add.

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

.comment-box p {
margin: 5px 0 10px;
padding: 0;
}

I am sorry if ive missed any bugs. The theme is complete the only snippet of code id add now is so we can use custom fields for our post images. Open up your index.php file and locate the class “post-img” within the post loop.

Delete the code containing the image and replace with the code below. The code below basically means if a post used a custom field of image display the thumbnail, if the post uses an image apply the url.

" title="">
" alt="" />

So when were in wordpress and we make a post instead of inserting it into the actual post we goto our custom fields section at the bottom.

Enter our first custom field of “image”.

Click add custom field, do the same for the next field, enter “url” then enter the url of the post.

Once you have entered the custom fields once, when you add more posts the custom fields will be available within a drop down box.

Finally The End

The end, you should now have a working wordpress theme from a PSD file we created a couple of days ago, although this tutorial wont make you a wordpress developer over night…. its a start. The PHP part of a wordpress theme is pretty simple and isnt hard to work out whats what. There is loads of documentation over at wordpress.org to help you with certain things if you ever get stuck. Id also suggest downloading a wordpress cheat sheet, someone made one a while back but i dont have the link. Also diving into wordpress can be a right pain and i can safely say it will piss you off big time. You’ve just got to work at it and work at it, another thing id suggest is to make and code each file before you start the wordpress side of coding, that way most of the hard work would of been done, it will just be a case of sifting through the loops. Il try to make a couple more wordpress tutorials in the near future. Any questions just ask. See you next time.

Site To WordPress Tutorial

Richard Carpenter — Wed, 10 Oct 2007 18:40:37 +0000

Okay so you have your website built and coded into css/xhtml and you want to convert it over to a wordpress theme. Firstly let me explain a few things.

WordPress works in a rather straightforward manner but it may seem confusing if you are completely new to the concept. WordPress relies on PHP to call on different parts of your content from the database management system it stands on. If you view my code to my site you will notice i use php to call some aspects of my page. Once you get started its pretty easy althou understanding of css/php/xhtml is essential and will guide you throu the setup of a full working wordpress theme.

Now you should already have your site designed and coded into css/xhtml before attempting this tutorial, firstly create a new folder on your desktop, name this folder what ever you want (e.g my theme). Now open up notepad dont type anything just goto “file > save as” and save it has style.css then goto “file > save as” again and save it as index.php. Now believe it or not but these are the only 2 files you actually need for a wordpress theme.

Open up your style sheet to your website, highlight it all then copy/paste into the blank “style.css” file you just created.

Now copy/paste this bit of code into the top of your style.css file.

/*
Theme Name: Replace with your Theme’s name.
Theme URI: Your Theme’s URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

Change the lines of code in red to suit your needs. These few lines of code are what wordpress uses to define it as a wordpress theme/template.

Thats the style sheet sorted. Now we need to chop up our website code. Remember how we talked about WordPress using PHP to call data from your database? Well WordPress can also use PHP to call different files from within your template folder. Imagine your current XHTML code chopped up into 4 (or more) different sections. The header, sidebar, main content and footer. Instead of keeping these 4 parts of the XHTML together in one file, you are going to put each of them in their own separate file. Then call on them one by one using PHP.

Open up notepad and create a further 3 files the same way we did with the style.css and index.php this time use the filenames “header.php , sidebar.php , footer.php” (make sure all these files are in the same directory). Load up your ftp program and go into your wordpress folder, save the classic theme folder your computer as we need to use bits of code out of the orginal files.

(/wp-content/themes/classic/)

Locate the classic themes header.php file. Notice all the PHP that is used in between the tags. You will want to keep most of this code, so just copy the whole section into your new header.php file. Now open up your original XHTML/CSS file and copy only the header elements or the code you have used to create the header. Paste into your new header.php file (underneath the section). Save and close.

Now open up the blank index.php you created at the start, open up your website and copy only the main content code (NOT the sidebar or footer). Paste this code into your new index.php file. Save and close.

Open up the blank sidebar.php and footer.php. Copy and paste your sidebar code from your website into the blank sidebar.php file Do the same for the footer.php file.

If your original code contains any images i suggest you copy/paste them into a folder in your theme folder called “images” . Now lets put it back together using a few lines of PHP, open up index.php copy/paste these lines of code into the top of the file above everything eles,

Now goto the bottom of that file and paste these lines of code below everything eles.

These 3 simple lines of PHP are telling WordPress to fetch and display your header.php, sidebar.php, and footer.php files within your index.php file. Your code is officially put back together. Now if you want to edit your sidebar you can just edit your sidebar.php file, instead of sorting through your index.php to find it. The same goes for your header.php and your footer.php.

Your index.php is nearly complete, the final step is to insert the actual content into the code. Luckily, WordPress uses PHP for this as well. The Loop is the PHP function WordPress uses to call and display your posts from the database they are saved in. Look in your /wp-content/themes/classic/ directory and open the file index.php file. Copy everything in between and to your clipboard. Now paste it into your new theme’s index.php file inside of whichever div you are using to hold your content. You just inserted a basic version of the loop into your code. WordPress will use the loop to display your posts and comments on your website.Now upload your theme folder to /wp-content/themes/. Then log into WordPress and activate your theme.

This tutorial covered the basics for converting your theme to WordPress. To further customize and enhance your theme start looking at the WordPress Codex, specifically Template Tags and Template Files. You can use template tags in your sidebar, in your header, or your footer to call menus, categories, posts, etc. As you learn more about template tags and template files you will discover the endless possiblities for customizing your new WordPress blog.

hv-designs » Wordpress Tutorials

WordPress Posts Explained…

Adding A Simple Post

Common Post Options

Adding An Image To A Post

Using The Visual Editor Vs The HTML Editor

Drafts, Timestamps, and Managing Posts

Advanced Post Options

Excerpt

Trackbacks

Discussion

Custom Fields

Password & Private Protection

Post Slug

Adding Writing Options

Posting Via Email

Adding and Managing Categories

Summary

Liked This Article? Why Not Buy The Book

About The Author

What We’ll Be Creating

The Box HTML Markup

About The Author: Richard Carpenter

The Box CSS Styles

Integrating The First Template Tag

About The Author:

Author Images

Author Description

Optional Tags

The Whole Code

About The Author:

Widgetizing WordPress

What Are WordPress Widgets

Widget Friendly HTML

Widget Title

Registering Our Sidebar

', 'after_title' => '

Adding The Widget Into The Widget Area

', 'after_title' => '

', 'after_title' => '

Xampp & WordPress

BLOOpress WordPress Theme

Stay Connected...

Archives

Meta

Archive for the ‘’ Category

Posts Tagged ‘’

Archive for

Archive for

Archive for

Author Archive

Blog Archives

to &amp;#8220;&amp;#8221;

Seperating Trackbacks & Pingbacks

Trackbacks

PSD to CSS to WordPress Pt.3

Not Found

mywordpress "Your fancy wordpress slogan here"

Error 404 - Not Found

Finally The End

Site To WordPress Tutorial

to “”