How to create custom theme in WordPress step by step

by

Create a own WordPress theme

To begin building your theme, first make a sub-folder in the WP-content/themes directory in your WordPress folder.The name of the folder should correspond to the name of the theme you want to create. To do this you can utilize either your most loved FTP customer or the File Manager apparatus in your c Panel.

 

To develop own website: Template files and DIV tags

The WordPress topic that holds up to be made comprises of one template, one capacities document, one remarks record and various format records.

Every layout document speaks to a different part. Together they shape the layout of the site’s general look. However, it is in the style sheet that web design  elements for each template file are decided.

Template files that will be used in this tutorial are:

  • Index
  • Header
  • Footer
  • Sidebar
  • Single
  • Page

 

DIV tag are utilized to characterize, plan, and organization estimations of every layout record and additionally structure its substance and components.

The <div> is regularly depicted as an undetectable box that is utilized to isolate site content in a basic way. These are later characterized in the template where measure, position, shape and so on are appointed.

We can customize a theme by using  Themeforest .

index.php

Open the index.php, add this piece of code and save the file:

<?php get_header(); ?>
                     <div id="container">
                           <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
                           <div class="post" id="post-<?php the_ID(); ?>">
                           <h2><a href="<?php%20the_permalink();%20?>" title="<?php the_title(); ?>">
                           <?php the_title(); ?></a></h2>
                      <div class="entry">
                           <?php the_content(); ?>
		           <p class="postmetadata">
                           <?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> 
                           <?php  the_author(); ?><br />
                           <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> 
                           <?php edit_post_link('Edit', ' &#124; ', ''); ?>
			   </p>
		      </div>
         	      </div>

	             <?php endwhile; ?>
		     <div class="navigation">
		     <?php posts_nav_link(); ?>
		</div>
         	<?php endif; ?>
                </div>
                <?php get_sidebar(); ?>
               <?php get_footer(); ?>

header.php

Open header.php, add this code and save the file:

              <!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>
              <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%20bloginfo('stylesheet_url');%20?>" 
              type="text/css" media="screen" />
              <link rel="alternate" type="application/rss+xml" title="RSS 2.0" 
              href="<?php%20bloginfo('rss2_url');%20?>" />
              <link rel="alternate" type="text/xml" title="RSS .92" 
              href="<?php%20bloginfo('rss_url');%20?>" />
              <link rel="alternate" type="application/atom+xml" title="Atom 0.3" 
              href="<?php%20bloginfo('atom_url');%20?>" />
             <link rel="pingback" href="<?php%20bloginfo('pingback_url');%20?>" />

           <?php wp_get_archives('type=monthly&format=link'); ?>
           <?php //comments_popup_script(); // off by default ?>
           <?php wp_head(); ?>
           </head>
           <body>
           <div id="wrapper">
           <div id="header">
           <h1><a href="<?php%20bloginfo('url');%20?>"><?php bloginfo('name'); ?></a></h1>
           <?php bloginfo('description'); ?>
            </div>

 And the files that define specific functions for the theme are:

  • Functions
  • Comments

To change the design of the header, index, footer or sidebar simply locate them in the style sheet and change current, alternatively add other values. Go to W3 schools CSS section to get all the design values you need.

As we have previously mentioned, internal WordPress functions are often used in the code of the theme. You can take a look at the complete Function Reference at the official website of WordPress for more information about each function.

If you are looking for build  Website Development in your company? Morbitstech is the best solution for your business. We can help you attract the right customers, convert leads and grow your business.

 

Share

Leave a Reply

Your email address will not be published. Required fields are marked *