Posts Tagged tut
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; ?>
What just happened ?
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 
- Start local server if it is not running.
- Open http://localhost/wordpress (local WP installation) in Web Browser.
- Open the theme folder ‘tutorial‘ in file manager (explorer :O )
- Open the header.php from the theme folder in intype (any Text Editor) .
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>
Understand the code
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 have done
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 !
Tags: CSS, downoad, Free, Freebie, HTML, php, programming, Template, theme, tut, Tutorial, wordpress
Category: Tutorials
Posted on August 9, 2008 with 3 Comments
I don’t use affiliate link directly behind some text, but i used to keep them hidden behind a page in my website, I use a single php file to handle all my affiliate link and let users to navigate into them with a different url structure that looks similar to a page of my blog.
There are many ways to hide affiliate urls, Some peoples apply them directly, Some others use URL shrinkers such as TinyUrl etc.. And someothers use it intelligently in some other ways. I will show you some of them.
One file per link
Some people uses this technique to redirect users to their affiliate link, They use JavaScript, php header / meta refresh etc.. to make this. One of the problem with this trick is, it will make separate files for each link that you want to cloak, this will generate tons of files after some time.
One file for many links
After all miscellaneous stuffs, now we are on the actual area of what this article is about. Redirect to bunch of affiliate links with just one php page ! I am sure this can be done on any servers that running php and Apache.
Anyway the first thing we need to create is a php file to bind all our affiliate links. Take a look at the example template given below.
<?php
// Filename: link.php
// Coded by: Ben Jacob
// E-mail: ben@featherpot.com
// More: http://featherpot.com
/*
http://yourdomain.com/redirect.php?site=company
This example has the same meaning for the other entries in $links variable.
*/
$links = array(
# Product links
"wordpresstheme" => "https://www.e-junkie.com/ecom/gb.php?ib&aff=321654&ev",
"blogmastermind" => "http://www.blogmastermind.com/affiliates.php?af=1234567",
# Affiliate Links
"oiopublisher" => "http://www.oiopublisher.com/ref.php?u=000",
"textlinkads" => "http://www.text-link-ads.com/?ref=123456",
# Simple sites
"google" => "http://www.google.com",
"twitter" => "http://www.twitter.com",
"myflickr" => "http://www.flickr.com/benjacob/",
);
# redirection
header("Location:".$links[$_GET['site']]);
exit;
?>
None of the above Affiliate url are real
Don’t understand anything from the above codes ? Don’t worry its simple.. I will explain. All things thats begins with # or // are just comments, ignore them Its beging used for the future. If you comment the codes its easy to modify them in the future without any confusion about the specific snippet.
$links = array (); We are starting a new array of links from this line in the code. each line URLs that placed in separate line will be considered as a new link.
"google" => "http://www.google.com",
Here the url: http://google.com can be redirected by a single keyword word ‘google’. To add more links to the list you can copy the above template and replace the keyword and url.
The last line is the same header redirect that has been used in the other examples, but instead of hard coding the link in there, it chooses the appropriate definition based on what keyword was passed in the URL.
Now how will you use this file to redirect links by passing keywords ? Ok, for that consider http://example.com/go/links.php as this file on your server. Just linking to that file will do nothing because you didn’t tell it which keyword to use. If you want it to work, you link to “example.com/go/link.php?title=google”. The file will get “google” as the link variable, look up the redirect link, and perform the correct redirect. The link will navigate you to http://google.com that we have defined in the php file.
Demo
http://featherpot.com/go/link.php?site=google => http://google.com
But that doesn’t look much better than the normal affiliate links you are trying to hide, does it? Well, there is a way to make them look however you want. Stay tuned ..!!