customize posts

At the bottom of most WordPress blogs, there’s a Next Page or Previous Page link. You call for those links by using the posts_nav_link() function of the WordPress template system. In this lesson, there’s only one step!

Do I really have to tell you to open Xampp Control again, theme folder, browser, and index.php file again?

Step 1: (and only step)
Add the following codes between and

Notice the spacing in the screen-shot. I always use tab spacing for organization.

- start an invisible box named navigation to wrap around your Next and Previous links area.
- start PHP
posts_nav_link() - call for the Next and Previous links.
; - stop calling for them.
?> - end PHP

- close the invisible box named navigation.

Here’s what it looks like:

Save index.php, then refresh your browser to see your own Next or Previous link. By default, if you don’t have more than ten posts, nothing will appear. If you don’t have more than ten posts, but still would like to see it, login into the administration panel, select Options > Reading, then set it to one less than the amount of posts that you have. For example, if you have six posts, set it to five.

How to customize posts_nav_link():
Just like some of the functions in the postmetadata lesson, you can give this function three sets of… anything that you want to be displayed in between, before, and after the Next and Previous links. It looks like this:

The first set of single quotes is for holding anything that you want to appear between the Next and Previous links. The second set of single quotes is for holding anything you want to come before it. The third set is for holding anything that comes after it.

Here’s an example of a customized posts_nav_link():

Follow this WordPress Theme Tutorial Series from the beginning.

link title value

This lesson covers three extra options that you can add to each post. Else, post ID, and link title value. Although they’re optional, you can find all three of them within every one of my free themes because you never know what people will use your themes for.

First, don’t forget to start Xampp Control.

Step 1:
Type the following codes under .

Like this: (Notice the indents or tabs for organization.)

Save it, but you won’t notice any difference. We have to go back to lesson #5, The Loop, to explain what you just typed above.

Here is The Loop:

First, if(have_posts()) checks to see if you have any post on your blog. Second, while(have_posts()) executes the_post() to call for your posts. The Else is what to do when you don’t have any post at all. Imagine while() and endwhile; nesting between if() and else :. That’s why has to come after .

Now that you know what else is, what did you tell WordPress to do when you don’t have any post or when it can’t find any post? You told WordPress to display the error message Not Found. That message can be anything you want. You can download one of my themes. Take a look at its index.php file for an example.

In the example above, the Not Found message sits inside . Like I told you yesterday, that’s not necessary.

The whole message and code of Not Found is surrounded by the

and

tags. That’s also not necessary. You can simply use:

Not Found

But, using the

(sub-heading) tag for the error message makes it more obvious to your visitor that there’s nothing on that page.

What are the

and

for? Well, you don’t want your error message to get stranded in the middle of nowhere right? You wrapped each entry within the

and

tags. So same thing, although the error message isn’t actual content, it is text just like the entries.

Step 2:
Add id=”post-” to

Save your notepad and refresh your browser. Now go to View > Page Source or Source. You’ll see that each post, now, has a number or post ID attached to it. the_ID() simply calls for the id of each post; that’s it.

Why use it? It’s for customizing the look of posts, individually. Later on, when you use the style.css file to tell your theme how the posts will look like, every post will look the same. With a unique ID attached to each post, you can target a single post and make it look different from the rest of the posts. Without the IDs, you have no way of differentiating the posts within the style.css file.

How can you assign both class and id to the same DIV or invisible box? DIV is a tag, class is an attribute. id is an attribute. Each tag can have multiple attributes just like each DIV can have both class and id. (Note: id is an xhtml attribute. the_ID() is a PHP function. They’re different.)

Step 3:
Add title=”” to the post title link.

The screen-shot above is a partial screen-shot to point out where you should place the code. Save it and refresh your browser. Go to view source again. While viewing its source, look for any post title link. If the post title link is Hello World, then to the left of it should be title=”Hello World”.

title=”" is another xhtml attribute for the (link) tag. Whatever’s within the quotes is the description of your link. In this case, the title of each post is also the link description. That’s why you used the PHP function the_title() again.

If you don’t use the_title() as a value for title=”", then every post title link will have the same description. For example, instead of the_title(), you use title=”Click me”, every post title link will have Click me as its description.

Now, go back to your web page. Place the cursor over a post title link, a description will pop up. That’s what you just added. Adding descriptions to your links is also useful when other sites have to scan your blog. Technorati.com for example, each time you publish, WordPress notify Technorati and other sites that your blog has been updated. Technorati then comes to your blog, scans it, and indexes a summary of your post, which includes the link title description.

Tomorrow’s lesson will cover the Next and Previous page links.

Follow this WordPress Theme Tutorial Series from the beginning.

Starting Index.php

Starting Index.php is the third lesson of my WordPress theme tutorial series. If you haven’t read lesson one and two, I’d suggest you read them. Otherwise, you will not have a clue of what I’ll show you in this lesson.

It’s time to stop reading and start creating your WordPress Theme. In this lesson, you’ll get your hands dirty with some WordPress codes. This is the part where you really need a WordPress blog installed on your computer, not an online blog because offline is more convenient.

Step 1: Open Xampp Control.
Navigate to your xampp folder. Usually My Computer > xampp or C:\xampp.

Double click on xampp-control.exe. A window will pop up. Click on start for Apache and MySQL. Your pop up window should mirror the image below:

Now that it’s turned on, you can minimize that window.

Step 2: Create your theme folder.
Go to your wordpress themes folder. It should be at xampp/htdocs/wordpress/wp-content/themes. Create a new folder. Name it tutorial.

Step 3: Create index.php and style.css files.
Open up Notepad or the text editor of your choice. Notepad is at Start > Programs > Accessories > Notepad.

Copy and paste everything from this file: index.txt to your Notepad window.

Save your notepad in the tutorial folder as index.php

Open another notepad. Leave it empty. Save the empty notepad as style.css, in the same folder. Close the style.css notepad.

So now you have two files: index.php and style.css.

index.php Explanations:

Click on the image above for the full view. I will explain to you what each circled area does.

Doctype - Indicates what kind of codes you’re using to code your theme. Doctype is not important at this point. I’m pointing out Doctype so you don’t have think about it.

is where my web page starts.

is where the head of my web page starts. Every web page has a head and a body. is where the head ends.

is a PHP function that calls for the location of the style.css file so my theme can link to it and style everything on my pages. Anytime codes are wrapped in and ?>, it’s PHP and it’s different from the rest of my codes. In PHP, is start and ?> is end.

So:

• - start PHP
• bloginfo(’stylesheet_url’) - call for the location of style.css
• ; - stop calling for style.css. The semicolon is one way of closing a set of codes within PHP.
• ?> - end PHP

Moving on…

- This is where the body starts. The body is everything that I see and read on a web page. Reading this tutorial means I’m looking at the body of the web page. is where the body ends.

is where my web page ends. Nothing else after that.

Step 4: Copy and paste everything in style.txt to your style.css file. Save and close it.

Step 5: Setting up your theme.
Open up a browser.

Type: http://localhost/wordpress/wp-login.php. Go to it and login into your WordPress administration area. (You’re able to see the login page because you opened the Xampp Control in the first step. Otherwise, your browser will give you a Not Found error.

Looking at the administration area. Click on Presentation and click on the theme named Tutorial to activate it.

Notice, your theme does not have a thumbnail screeshot yet. The box is empty. Once activated, WordPress will tell you.

Now open up a new browser or tab (if your browser has tab browsing) and go to http://localhost/wordpress. You should then get a blank page. I mean completely blank. If it isn’t blank, you’re at the wrong page.

Your theme has been set up. That’s it for this lesson. Next up, we start working on the header template.

Don’t forget to close your Xampp Control. Double click on its tray icon in your toolbar, click Stop for Apache and MySQL. Then click exit.

Have a question? Use the comment form below to ask me.

Follow this WordPress Theme Tutorial Series from the beginning.

Template files and Templates

Template files and Templates is the second lesson of my WordPress theme tutorial series. If you haven’t read Lesson #1, stop right now and go read lesson one. Otherwise, you will not understand the terms used in lesson two.

Now that we’ve gotten passed the rules and terminology, this lesson will get you familiar with template files, templates, and the structure of each page.

The one thing to remember is that each page of your blog is made up of multiple template files. Here’s an example of the front page.

In the example above, your front page is made up of four template files: header, index, sidebar, and footer.

Header Template File:

Your blog’s title and description sit in this file. They usually remain the same through out the whole blog.

Index Template File:
This one contains your post title, content (text and images of each entry), and post meta data (information about each post like: who’s the author, when you published it, under which categories, and how many comments).

Sidebar Template File:
This controls your Page links listing, category links listing, archive links listing, blogroll listing, and etcetera. (The Sidebar doesn’t need to be on the right side of the layout. The example I’m using is a typical two column blog layout.)

Footer Template File:

Like the header.php template file, the footer usually doesn’t change from page to page. You can put anything in this file, but usually your copyright information.

Now let me explain why index.php is red, in the example above. Index.php is red to indicate that, that area will change, depending on which page of the blog you’re on.

If you were on a single post page, your page would consist of these four template files: header, single, sidebar, and footer.

Follow this WordPress Theme Tutorial Series from the beginning.

about creating WordPress themes

intro is the first lesson of my tutorial series about creating WordPress themes. I will not teach you everything all at once. That will only confuse you. What I’ll show you is not a reference. It’s meant to teach you step-by-step, level-by-level. If you want a reference to everything WordPress themes, then read WordPress.org’s documentations, Design and Layout. Otherwise, learn from my lessons.

This lesson covers:

• Basic Rules
• Lingo / Terminology
• Hierarchy

Basic rules:

• Rule #1: Close everything in the order that you open them.

  

  In The Wrong Way to Close, the closing ul tag is out of order.

  Every tag is wrapped by the < and > characters, the presence of the forward slash, /, indicates whether each tag is an opening or closing tag. <> is open. is close. In the example, I used the ul (unordered list) and li (list item) tags. Notice how the opening and closing li tags sit inside the opening and closing ul tags. That’s called nesting.

• Rule #2: Every theme has at least two files - style.css and index.php. You tell your theme where everything goes within index.php and how everything should look like within style.css.

  Here is the complete list of files (don’t worry about this list yet):

  • style.css
  • index.php
  • home.php
  • single.php
  • page.php
  • archive.php
  • category.php
  • search.php
  • 404.php
  • comments.php
  • comments-popup.php
  • author.php
  • date.php

Lingo:

• Template - A set of codes that you can use in multiple places without having to write the same codes again and again.
• Template file - A file that contain one or multiple sets of codes (templates). Every page is made up of multiple template files. For example: index.php file, style.css file, sidebar.php, etc.
• Theme or WordPress theme - All the files you’re using: texts, images, codes, etc. Note: WordPress theme and WordPress template(s) are two different things, despite some people consider them the same.
• Post - Currently, you are reading a post. Furthermore, it’s simply an entry of your blog. In example, one page of a diary.
• Page - A special type of post that is not orangized by categories. It is separate from the rest of your posts. Note: In WordPress, page and Page are two different things. Whether you capitalize the “P” makes a huge difference.

Hierarchy:

The diagram below simply shows you what the WordPress system will look for, in case one of your theme file is missing. I listed only six files, instead of thirteen in the diagram because those are the main ones that you should focus on. Further down this tutorial series, you will learn about the rest of the files.

I’ve indicated the level of importance of each file by its position. Top, left is most important. Bottom, right is least important.

Hierarchy or levels of importance exists for template files because if the archive.php file, which handles the look for archive pages, is missing, then WordPress will point to the index.php to control how the archive page will look like.

If the single.php template file is missing, which template file does it look for to display a single post view? It looks for index.php.

If you have any question, feel free to ask. Please do it through the comment form below, instead of emailing me. That way, others looking for the same answers don’t have to repeat their questions.

Follow this WordPress Theme Tutorial Series from the beginning.

WordPress Installation

Get a FREE WordPress installation with SiteGround WordPress hosting Package!

WordPress is really easy to install. It is included in the Fantastico Autoinstaller tool and can be activated in just a few clicks!

Check out the WordPress installation video tutorial:

WordPress Installation Video Tutorial

WordPress Installation Detailed Tutorial

Please, follow the step-by-step guide below in order to activate Wordpress on your hosting account:

Step 1: Please, login to your CPanel and locate the Fantastico De Luxe icon:

Step 2: Find and click the WordPress link.

Step 3: Then choose New Installation:

Step 4: Decide upon the location of your blog - if you would like to have it as your site front page, leave the directory box blank, otherwise fill in the appropriate folder name. Next, fill in the administrator details and the e-mail account configuration then click the Install WordPress button.

Step 5: A new confirmation page will be loaded for the installation. Click the Finish Installation button if no errors are reported.

If else you will have to go back and rectify the specified issues.

Step 6: After completing the installation the final screen will load, providing you with the installation details. You will be able to e-mail the details to a specified address also in order to keep them for future reference.

Well done! You have successfully installed the Wordpress application!