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
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:
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 :
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.
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 ! )
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:
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
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.
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.
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 !
Although light is not a handy tool for an Artist, he can make good works by utilizing and controlling the light. Photography uses light in many dimension, Usually as a flash light to control the shadows and brightness. But some artist controls light to make sculptures ! They paint with light even if they are not able to touch or hold the light in their hands !
Today we are presenting you some Light Painting photos found from flickr. In the bottom of this post you will find reference related to the flickr pools which contains thousands of other examples also some blog posts to make your own play with light.
Clicking on each photos will take you to the original image in the artist’s album.
If you have enjoyed this list of images, I can show you something more. which is not related with the title, but good if are interested in the subject you have seen.
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.
Header Template File
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…
Sidebar Template File
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.
Blog Template File
Here we will include the entry, blog meta informations like Comment count, author, post date etc..
Footer Template File
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.
. 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 :
