Steps to create your WordPress custom theme

Posted By :Ravi Rose |23rd January 2019

To create WordPress theme, all you require is

 

1. Installing WordPress Locally.

 

2. Then Follow the following procedure

 

Procedure to create a WordPress theme from scratch.

 

Manual – via coding     

Outside of configuring WordPress, almost everything you do in WordPress will be in the wp-content folder; everything else is core code,and you don’t  have to touch it.

Follow the path of wp-content > themes to arrive at your themes folder. You’ll see the WordPress default themes –twentyfifteentwentyfourteentwentythirteen – and index.php. Create a new folder for your theme: For Example mycustom.

 

A WordPress theme needs only two files to exist – style.css and index.php.

 

In your custom theme folder, create

 

  1. header.php – contains the code for the header section of the theme.
  2. index.php – contains the code for the Main Area and will specify where the other files will be included. This is the main file of the theme.
  3. footer.php – handles the footer section.
  4. style.css – responsible for the styling of your new theme.
  5. bootstrap.css – no separate CSS code is required; highly responsive.
  6. bootstrap.js – provides its own js for the navigation bar, or tabs etc.  

 

 

 

1. header.php File

 

 

You will write this code in the header.php file:-

<html>
<head>
<title>custom theme</title>
</script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/jquery-ui.min.js'; ?>">
</script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/bootstrap.js'; ?>">
</script>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">
</head>
<body>
<header>
<h4>Some header Content</h4>
</header>

Header.php file contains the code for a head part in which the js and style file is linked. It displays the header of the page.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

This line added after the title tells the WordPress to load a style.css file that will handle the styling of the website.

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">

Here, the Bootstrap is used as it is the best-known framework for responsive websites. It provides inbuilt css files to style your website. You can download it and keep the bootstrap “.css” file in your theme/css folder.

 

 

2. index.php File

 

The main file index.php will contain this code:-

<?php get_header(); ?>
<div class="row">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
</div>
</div>
<?php get_footer(); ?>

The very first line of code is:

<?php get_header(); ?>

will include the header.php file 

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
</div>
<?php endwhile; else: ?>

The above code displays the main content of the post that you have created through the WordPress administrative area.

Finally, add one last line

<?php get_footer(); ?>

which will include the footer.php file.

 

 

3. footer.php File

 

Add these lines to the footer.php file:-

<div id= "ttr_footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>

With this code, a simple FOOTER label will be added.

 

 

4. style.css File

 

Add the following lines to the style.css file

/*
  Template Name: mycustom(theme name)
  Author :ravi rose(author name who develops the theme)
  Version: 1.0(theme version)
*/

This CSS file sets the basic looks of your theme. These lines set the background of the page and surround the main parts of your site with borders as per your need.

 

Your theme has now been created. Go to the WordPress dashboard, and click on Appearance>Themes. You’ll see the theme in the collection with all the default themes.

 

Now, you can additionally adjust the CSS document,include pictures,animations and other content to your theme to get the looks you want with your theme.

 

Thanks

 

 


About Author

Ravi Rose

Ravi Rose is a good learner. He is familiar with HTML,CSS,JavaScript,Wordpress and Php.His hobby is to stay Fit and listening to music.

Request For Proposal

Sending message..

Ready to innovate ? Let's get in touch


Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Chat With Us