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 –twentyfifteen, twentyfourteen, twentythirteen – 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
- header.php – contains the code for the header section of the theme.
- 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.
- footer.php – handles the footer section.
- style.css – responsible for the styling of your new theme.
- bootstrap.css – no separate CSS code is required; highly responsive.
- 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
Ready to innovate ? Let's get in touch
Follow us
We are ISO 9001:2015 Certified
Resources
Connect with us
Follow us
