Contrary to what it may seem like, making your own wordpress themes is not hard at all. This is a
simple tutorial on making your own wordpress themes. Its required that you have read the tutorial
'using wordpress themes' before you read
this tutorial to understand easily.
Please note, ignore if it says otherwise in any of the 'readme.txt' or instructions file that you download along with a
wordpress theme from my site. The new rule is that if you edit the colors, images or anything else in the original theme (its allowed)
you still have to CREDIT ME for original coding. This inculdes but is not limited to use of menu or link box from some of my themes.
The credit should be kept intact (not moved or editted), at the bottom of every page of your site. Thank you.
» Make a nice layout the way you want to and break it into:
header.php
footer.php
Header.php contains all the html coding above the actual content area and footer.php should contain all the html
coding below the actual content area, it may also contain the navigation part or the sidebar area. You can do it easily
if you know how to use php includes.
» Now open your header.php and make sure that along with the other layout related codes,
it also has all the following codes in it between the <head> and </head> tags:
| <meta name="author" content="Your Name"> <meta name="robots" content="index,follow"> <meta name="description" content="A small description of your site!"> <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » blog archive <?php } ?> <?php wp_title(); ?></title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <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'); ?>" /> <Link rel="stylesheet" type="text/css" href="http://yoursite.com/wordpress/wp-content/themes/THEME NAME/style.css"> <!--BEGIN NECESSARY WORDPRESS TAGS--> <?php wp_get_archives('type=monthly&format=link'); ?> <?php wp_head(); ?> <!--END NECESSARY WORDPRESS TAGS--> |
Add the above codes between the <head> and </head> tags: section of the header.php and ofcourse change the THEME NAME part with the name of your new theme and 'yoursite.com' with your site url. Add your name and a description of your site where it says so. Save the header.php file.
» Now, if you read the tutorial on 'using wordpress themes' before this one, you should have the pink-power folder on your computer. Copy the index.php and comments.php files from the pink-power folder and paste them in the folder where you have saved all the files of the new theme that you are working on.
» If you skipped the other tutorial or deketed the files from your computer, just click here and download the comments.php and index.php files and put them in the folder of your new theme on your computer.
» Login to your ftp server > go to the wordpress folder > go to the wp-content folder > go to the themes folder.
» Make a new folder inside your themes folder and name it anything you want (name of your new theme). Upload all the files of this new theme to this folder ie. the images used in layout, style.css, header.php, footer.php, comments.php and index.php
» Login to your wordpress, click 'presentation' and select the new theme from the theme list. Go to your site to see if it works fine.
» Now everytime you make a new theme, you have to follow the same steps. Make a layout, break it into header and footer.php. Copy the comments and index.php from other themes, add neccessary tags in header.php and upload the theme.
Well thats easy, but it will works fine only if you read both the tutorials properly and follow the instructions right. Good luck with understanding wordpress themes! If everything went well, you can read the tutorial 'Wordpress theme switching' to add the links to change themes on your site. « Back
