Capsules for creative minds
Posted on February 2, 2009 with No Comments
We have almost completed the coding of the WordPress theme we where making. Now its time to make it a bit more visually appealing. As I have shown you in the first post of this series, We are making a minimal theme without many images.. So CSS is the star here.
This is how our theme going to be after Styling.
Posted on December 17, 2008 with 1 Comment
After all we are about to make the actual blog portion of our theme, since we planned the theme in a modular manner we have to create a separate template file for the blog, its called blog.php. Make sure that you still remember all our daily stuffs like starting web server, remembering the old class etc.. if so we can start now.
Step 1: Create a blank blog.php file with Intype or the text editor with you.
Step 2: Type in the following code to the text editor with blog.php opened.
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>if(have_posts()) – checks to see if you have any post.while(have_posts()) – if you do have it, while you have any post, execute the_post().the_post() – call for the posts to be displayed.endwhile; – sticking to rule #1, this is to close while()endif; – close if()Note: not every set of codes need two parts in order to open and close itself. Some can close by itself, which explains have_posts() and the_post();. Because the_post(); sits outside of if() and while(), it needs its own semicolon to end/close itself.
Step 3: In previous lessons, you learned how to call for your blog’s title by using bloginfo(’name’). Now, you will learn how to call the post titles in between The Loop.
Type <?php the_title(); ?> after the_post(); ?> and before <?php endwhile; ?>
Saving the post and taking a preview will make you aware of what you have just did !
Ok so you can see all the titles of blog posts listed without any definitions.. so we need to make it more better and enrich it with blog features.. Here we go
Step 4: Turning the post titles to Post links are simple as what we did in the case of Blog Title. Exactly like following code.
<h2><a href=”<?php the_permalink(); ?>“><?php the_title(); ?></a></h2>
the_permalink() is the PHP function that calls for the address or location of each post. Remember H1 that we used for the blog title? That’s your web page’s heading. H2 is used for sub-headings. Now that your title links are sub-headings, each gets its own line. Save index.php and refresh the browser to see the change.
Ok So we need to add some more stuffs to the current template file which will print the Post Contents and Meta Information like Category etc…
<?php if ( !get_option('content') ) { the_content('Read more'); } else { the_excerpt(); } ?>
See the changes that the above code has made.. I know there is a smile in yor face ! Now you must be seeing the contents too..
Here is my explanation for what you did now :
You used the PHP function the_content() to call for post entries (content). Right now, your content is just one long line of text, all the way to the window’s right side, because you haven’t styled it yet. Remember the style.css file ? Later on, we’ll use that file to control how everything looks. If you don’t hame much dummy posts make at least 10 or around with the help of Lipsum Gnerator. Dummy post will help you to make everything about the styling and functionality a bit more clear.
Take a look at the source of the web page to know about the help that WordPress did for you. Go to View > Page Source in Firefox to see the page source.
See how WordPress helped you in compiling the post. The get_option(‘content’) Can automatically insert the <p> tag where ever needed and close them appropriately, Not Just Paragraph tags Most of the HTML tags. Now comes the turn of meta information. Its up to the designer of the template. You can make the choice which all Meta information to be there, There is not rule to print the meta information. No one will scold you if you didn’t placed the meta information in your Theme 
Leave the case of clients when you advances in the WP Development.
Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
Type this code bellow the content section and above all closings. And see the Preview after a refresh. Now you can see the Category along with the Comment Count. See WordPress Codex for the snippets to call more meta information.
Now we have almost made a blog design ! the rest is to the CSS, that we will do in the coming classes. More customizations are also needed dont rush.. Slow development is always consistant, Its from my life. 
So stay tuned Keep following the Official FeatherPot Twitter Feed and RSS.
Posted on November 20, 2008 with No Comments
Alright, now you are in the 5th lesson of my ‘WordPress Development for noobs’ tutorial series. Am not repeating all regular openings, make sure you have understood all the previous lessons and localhost is running. This post is a continuation of the Episode 4, there we have leaned to make a header template with meta stuffs and Blog title. Today we will make the page navigation, and a search form.
Step 1: Step one of our tutorial will be same in most case 
Step 2: Now you must be waiting for me with header.php opened in your computer. Now your header.php may be similar to one we created last day. Now the Blog Title is too small right ? We need to make it a bit bigger, for that we can use xHTML tags like h1, h2, h3, h4, h5, h6. Here I am using h1 to give more focus. Add <h1></h1> to the starting and end of the code that we created last day. Like this:
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>Seen the change after refreshing the http://localhost/wordpress ? Next time you must do this by yourself, I will not say . Next we need to add a tag line below the Blog Title, The tag line are also called Blog Description. It can be edited from the Settings of the WordPress blog. Like we did to get the title, we can use same snippet with some modification to get the Blog Tag line printed. like this :
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a>Shall I hope that you have seen the change we made in the codes ? Yes bloginfo('name'); is modified to bloginfo('description'); Its so simple na ?
Step 4: Alright now we are about to add a navigation bar to the design, by adding the proper codes we will get the published pages listed in the top of the design after title and Tag line. For that below code snippet will help you.
<ul>
<li><a href="<?php bloginfo('url'); ?>"><span>Home</span></a></li>
<?php wp_list_pages('title_li='); ?>
</ul>for your better understanding of the above codes :
<ul></ul> : As you know, this XHTML tags are used to list the page title.
<li><a href="<?php bloginfo('url'); ?>"><span>Home</span></a></li> : We must place the link to Home page manually, in this tutorial !
<?php wp_list_pages('title_li='); ?> : This WordPress loop will vomit all the other pages.
Next we need a search form in the navigation bar. The following snippet will add search bar to the design, we need CSS to beautify it with the whole design, it will be don’t in future class.
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input value="To search, type and hit enter" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" type="text" class="search_box" name="s" id="s" />
</form>line 1: We starts the form with opening a new <form> tag. Here method attribute is defined as get, So it will get values from the field. Attribute action is pointed to the blogs url, the home page. so the content will be sent to the home page.
line 2 : With the <input> tag, we have opened a new field to take the user input. and I have included some tricks too. its in the value attribute. It is used to show some text in the input field which will be automatically hided when the user place cursor inside the field.
line 3 : With </form> we have made and end to the Search area.
To know more about the forms, read it in W3Schools. Refresh the http://localhost/wordpress to see the changes we made. ( I hope you know a bit of CSS and xHTML, else this TUT won’t help you, as I have said earlier I am not going to teach you the whole CSS and xHTML ! )
Posted on November 11, 2008 with 1 Comment
Alright, this is my fourth lesson in the ‘WordPress theme development for noobs‘ series. Make sure that you have read the past lessons in the series to get into the topic we discuss in this lesson. if you didn’t started yet, Good luck ! Yesterday we have created first template files of the theme we are building. In this lesson we will learn the use of some more WP loops and php codes.
The template we create today is the header.php, in the header.php you will define the paths of style sheets, include meta tags, functions to display title of the blog properly etc.
Remember one more thing, don’t copy-paste the code snippets I vomited here better you type them yourself referring this page, it will keep them in your mind for ever, else it will be like a flash light.
Step 1: Make sure that localhost is running on your computer (Go and read old post if you don’t know) and open http://localhost/wordpress in a new browser window (or tab). And keep the theme directory we made yesterday opened. %drive%\www\webapps\wordpress\wp-content\themes\tutorial\ Now you can find two files inside it, style.css and index.php.
Step 2: Create a new blank template file header.php for our today’s lessons, as I have said in the introduction of this post, header.php is used to include communicate with browser and search engines using meta tags, and say WordPress about the path to the StyleSheet, and add RSS feed url etc.. simply that’s the use of header php, if you take a look at the mockup of the theme we are going to create you can see the navigation bar and search box are on the top, so we are adding codes for that also into the header.php
To create a blank header.php file, open intype or any text editor and Click ‘Save As’ from ‘File’ menu and save the file in the folder of our theme ‘tutorial’ as header.php along with extension.
Now you have a blank header.php opened in your desktop ready to get dirty with codes. Now we have to add some default stuffs to it, like the HTML Doctype, some meta tags etc. bellow are them, add it to the header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <!-- For the title bar of the Browser window -->
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <!-- Adds style.css -->
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body> <!-- Body of the page starts after this line -->What you did is added some information for browser and search engines, which is not applicable for human. I have commented the above code for some additional information. Now you must be thinking why we didn’t closed the <html> and <body> tags, there is a reason, footer is the end of our theme, and the <html> and <body> tags are important from top to bottom of our theme, we will be closing them only at footer.php in the future class.
Step 3: OK, come back to the header.php, Now we have to add some codes to display the title of our blog.
<?php bloginfo(’name’); ?>
adding the above snippet will display the title of our blog in the page, save the header.php after adding this code in <body> section and refresh the http://localhost/wordpress/ page to see the change above code made.
What you just did is called the blog’s Title to the whole design by adding one line of code. bloginfo() is a WP function used to print anything to browser that you have given in the user profile of the WordPress blog. In depth:
<?php – Start php code
bloginfo('name') – Call blog related information- Here the Name of the blog
; – End to the bloginfo()
?> – End to the php code
When ever you make changes to the template files we creates, save the php file and refresh the browser window to see changes made, never mind if something goes wrong, WordPress is a big ecosystem you will get help everywhere, of simply add a comment here. We only learns from mistakes, I follows the trial and error method even now ! -The best way to learn something new.
Step 4: Now you only have the name of the blog printed there, don’t you need it linked to the homepage of the blog ? ok we have to work for that now. Using <?php bloginfo(’url’); ?> inside the quotes of href=”" will make the Blog Title a link ! Like this:
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
Save header.php along with this code after the last line, and see the change in the browser window. Worked ?!
If you clicking on that link from any page it will take you to the home page of the blog. Now you are seeing it on localhost with just one page, in the future we will create more pages so that you can see how it works in other pages.
What we have done
<?php – Start php code
bloginfo('url') – Call blog related information- Here the link to homepage
; – End to the bloginfo()
?> – End to the php code
<a> </a> – The opening and closing tag for a link in xhtml, we have to close the link with </a> at the end of the text we needed as a link.
href="" – the short for hyperlink, anything that comes in between the quotes will be considered as a value for link
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
This code means I am starting a link to blog’s homepage on the text -Blog’s name.
This is our header.php now :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <!-- For the title bar of the Browser window -->
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <!-- Adds style.css -->
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body> <!-- Body of the page starts after this line -->
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>Today we did some more php along with the xHTML, don’t go out of the track, follow the full series of posts in my ‘WordPress Development for noobs‘ series, and add doubts in comments.
Posted on November 8, 2008 with No Comments
This is the third post in my ‘WordPress theme for uber n00bs‘ series. If you haven’t read my past posts in the series you will not understand what I am talking here, so go and try to learn the previous posts in the series.
This part is where you exactly need a locally installed WordPress, From this chapter we are going to create a WordPress theme step by step, So Install the WordPress in your computer for convenience. If you have installed Web Developer Server Suit, The server must be running now, go to http://localhost/wordpress/ to start running WordPress, you might need to finish the WordPress installation (Giving email, Blog name and getting a password.)
Step 1: make sure your local host is running, Open the ‘Web-Developer Controller’ from your Windows Desktop, we need Apache and MySQL running to start and work on WordPress (See the marking, in below picture)
Now the local server must be running on your PC, you can close the ‘Web Developer Suit Controller’ window now, and Navigate to the WordPress theme folder in your local disk : %drive%\www\webapps\wordpress\wp-content\themes\ – replace the %drive% with your Drive letter, C:\, D:\ etc.. where Web Developer Suit is installed.
Step 2 : Now create a folder for your theme in the WordPress themes folder, name it as tutorial for now.
Step 3 : Now open intype or notepad and create blank style.css and index.php files in the folder tutorial. Now open index.php in intype and paste these lines to it and save it.
<?php get_header(); ?><?php include(TEMPLATEPATH . '/blog.php'); ?><?php get_sidebar(); ?> <?php get_footer(); ?>
Now you did is, you called the header, blog-module, sidebar, and footer templates to the index.php , these are the modules we are going to create in the coming episodes. Now your tutorial theme folder must be like this
For some more expansion we can add theme information. Theme informations are added in the first lines of style.css file as some comments. WordPress can read the theme details from it.
/*
Theme Name: FeatherPot Tutorial
Theme URI: the-theme's-homepage
Description: A basic theme created with the help of a FeatherPot Tutorial
Author: FeatherPot Reader
Author URI: http://featherpot.com
Version: 1.0
.
General comments/License Statement if any.
To create your own WordPress theme follow the tutorial in FeatherPot. This is a Free theme released under GPL terms
.
*/Now you can activate the theme we are creating, login to the the WordPress dashboard of local installation by http://localhost/wordpress/wp-admin/, and navigate to Design > Themes > and activate the ‘FeatherPot Tutorial‘ theme by clicking on the name. you can see the theme details we have just added into the style.css working here. Take a look at the theme we just made, how is that ? OK, don’t get nervous, you are seeing some errors because WordPress can’t find some template files we said to include to the index.php only you and me know that we didn’t created those templates, and we will create them in the coming episodes.
Hope you have understood todays class, keep in mind that a WordPress theme must have a style.css and index.php to work, else you will not be able to find the theme in the Design selection area of WordPress dash board. That means a WordPress theme will not work if there are many files except index.php and style.css
Stay tuned without destroying the work we have done. If you have any doubts kindly add it as a comment, emails / IMs won’t get a reply anymore !
Posted on November 2, 2008 with 2 Comments
In the second lesson of my WordPress theme for n00b’s series you will learn about Templates and Template files, the building block of a WordPress theme. Make sure that yo have understood the lesson one made some days before, else you will not understand any words that we use here.
In this lesson you are going to study about the template, template files and structure in the construction of a WordPress theme.
A WordPress theme is made of many templates and template files. As I have mentioned before, It is very easy to solve a problem if we split it into some related modules. The WordPress theme we are going to build will be in modular form, that means each and every element of our template will be splited into some separate modules.
We have the freedom to split or manipulate anything, everything in the WordPress theme keeping the syntax. But we have to think before making modules. Modules will be very helpful if we are going to make a complex theme. However we are practicing the modular method.
See the diagram below to get a knowledge about the modules I was talking about.
In the above image the green portion is the index.php file which will act as the parent template in our theme. Each requests comes to the homepage of the blog will be taken along with the index.php template file of our theme.
And the blue portions inside the index.php are the modules we make, they are also some templates files made with a purpose in mind.
Take the condition of footer as example, usually we add Stats Tracker’s codes in the footer of the website, if footer, header, sidebar and entry sections are together inside a single file called index.php it will be very hard to edit, tweak, update, or manage the templates. There is the ‘module’ comes as the angel . Here we create separate files for each elements, Footer section as footer.php, sidebar in sidebar.php header in header.php and blog section as blog.php and we call all of them into the index.php accordingly. So index.php will be clean, and all template files will become less lines of codes for easy management.
Well, now take a look at the mockup of each template files we used in the above image separately.
Here we add codes to render the Title, Description, may be Vertical Navigation in most cases (Depends on the layout and the designer) and meta tags for Feed URL, CSS URLS, etc etc…
This template file includes the codes for the archive listing, blog rolls, and any other things a designer wants to add. In our theme we have a single column sidebar on the right side.
Here we will include the entry, blog meta informations like Comment count, author, post date etc..
Like header.php footer also stands same all around the theme in most cases. In the footer we include copyright information, Design link, and may be a link to the WordPress ! Also try to add tracking codes like Google Analytics etc to the footer.php if you use them, if something goes wrong with the service providers our site will not take too much time to load the important parts like content area and header.
If you missed any erilier posts, take a look at this unified url of the complete tutorial series. Asking your doubts through the comments only. (No IM / emails please )