Today i am telling you how to make a custom wordpress theme from scratch. If you’re confident with your CSS and HTML, it’s not hard at all to step up to the challenge of building a custom WordPress theme.
Here is the screenshot of Wordpress theme which we'll make :
These tags tell WordPress where to insert the dynamic content. A good example is the <?php the_title(); ?> tag, which pulls in the post title and displays it in your theme:
Your HTML code :
Now we go to build wordpress theme and the first step to make style.css (Configuring the stylesheet)
All the details of a WordPress theme are contained within the stylesheet. At the top of your style.css add the following code, then amend the details to suit.
Now come to header.php
Open up your header.php file, and paste in the head section from your concept HTML file. Then we need to go in and replace certain elements with the correct WordPress template tags to ensure it all works correctly.
Now building the index.php
The next step is to flesh out the main body of the website. Open up the index.php file and paste in the main bulk of the concept HTML.
Now time to sidebar.php
The sidebar in my design is where the list of pages and categories are held. The sidebar.php file was called from the index using the get_sidebar(); tag, so anything within this sidebar.php file is inserted into the theme in the right place
Rounding off the footer.php
The footer.php file is probably the most simple file for this theme. The only thing that goes in here is the wp_footer(); tag just before the </body>, so that any extra info can be inserted in the correct place.
Constructing the page and single view
WordPress is made up of posts and pages. Posts use the single.php template file, whereas pages use the page.php template file.
They're pretty much the same, apart from that you tend to include the comments_template(); tag for posts, and not for pages.
Creating the archive.php
The archive.php file is used to display a list of posts whenever they're viewed by category, by author, by tag etc.
It's basically the same as the index file, but with the addition of a tag at the very top that renders a useful page title, so the user knows where they are. 'Browsing the Articles category' for instance.
Your Final resulting theme would look like : Sticky Wordpress Theme
Here is the screenshot of Wordpress theme which we'll make :
Overview of Wordpress main files :
- header.php - Contains everything you'd want to appear at the top of your site.
- index.php - The core file that loads your theme, also acts as the homepage (unless you set your blog to display a static page).
- sidebar.php - Contains everything you'd want to appear in a sidebar.
- footer.php - Contains everything you'd want to appear at the bottom of your site.
- archive.php - The template file used when viewing categories, dates, posts by author, etc.
- single.php - The template file that's used when viewing an individual post.
- comments.php - Called at the bottom of the single.php file to enable the comments section.
- page.php - Similar to single.php, but used for WordPress pages.
- search.php - The template file used to display search results.
- 404.php - The template file that displays when a 404 error occurs.
- style.css - All the styling for your theme goes here.
- functions.php - A file that can be used to configure the WordPress core, without editing core files.
Your HTML code :
 |
| Click to Enlarge |
Now we go to build wordpress theme and the first step to make style.css (Configuring the stylesheet)
All the details of a WordPress theme are contained within the stylesheet. At the top of your style.css add the following code, then amend the details to suit.
/*
Theme Name: Sticky
Theme URI: http://www.s2ptech.blogspot.com
Description: Sticky WordPress theme
Version: 1
Author: Mukesh Kumar
Author URI: http://www.geekonjava.blogspot.com
*/
Now come to header.php
Open up your header.php file, and paste in the head section from your concept HTML file. Then we need to go in and replace certain elements with the correct WordPress template tags to ensure it all works correctly.
 |
| Click to Enlarge |
Now building the index.php
The next step is to flesh out the main body of the website. Open up the index.php file and paste in the main bulk of the concept HTML.
 |
| Click for Enlarge |
Now time to sidebar.php
The sidebar in my design is where the list of pages and categories are held. The sidebar.php file was called from the index using the get_sidebar(); tag, so anything within this sidebar.php file is inserted into the theme in the right place
 |
| Click for Enlarge |
Rounding off the footer.php
The footer.php file is probably the most simple file for this theme. The only thing that goes in here is the wp_footer(); tag just before the </body>, so that any extra info can be inserted in the correct place.
 |
| Click for Enlarge |
Constructing the page and single view
WordPress is made up of posts and pages. Posts use the single.php template file, whereas pages use the page.php template file.
They're pretty much the same, apart from that you tend to include the comments_template(); tag for posts, and not for pages.
Creating the archive.php
The archive.php file is used to display a list of posts whenever they're viewed by category, by author, by tag etc.
It's basically the same as the index file, but with the addition of a tag at the very top that renders a useful page title, so the user knows where they are. 'Browsing the Articles category' for instance.
Your Final resulting theme would look like : Sticky Wordpress Theme
