.

.
how to make a custom wordpress theme

how to make a custom wordpress theme

01:09
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.

These tags tell WordPress where to insert the dynamic content. A good example is the <?phpthe_title(); ?> tag, which pulls in the post title and displays it in your theme:
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:
Theme URI:
Description:
Version: 1
Author:
Author URI:
*/

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


If you add css folder in your theme it consists three css files like layout.css,reset.css,styles.css
the to add in your main style.css this code

@import url('css/layout.css'); 
@import url('css/reset.css'); 

@import url('css/styles.css'); 


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.


EmoticonEmoticon

Subscribe to: Post Comments (Atom)