Any WordPress theme can be developed by two ways. You can develop the theme based on any HTML template or the theme can be developed from the scratch. In this tutorial, a wordpress theme is developed from the scratch.
Steps:
***************Adding header, footer and main content *****************
1.Create a folder named ‘firstTheme’ in theme folder of WordPress.
2. Create the following essential files to start the theme development work.
index.php
style.css
header.php
footer.php
functions.php
3. Add the following information about the theme in style.css file.
/*
Theme Name: firstTheme
Author: tutorials4urhelp
Author URI: https://fahmidasclassroom.com
Version: 1.0
*/
4. Add the following code to the header.php to add header information
<html>
<head>
<meta name="viewport" content="width=device-width">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<header>
<h2> <a href="<?php echo home_url(); ?>"><?php bloginfo('name');
?></a></h2>
<h4><?php bloginfo('description'); ?></h4>
</header>
<hr/>
</div>
</div>
5. Add the following code to the footer.php to add end tag of header
<div class="row">
<div class="col-sm-12">
<hr/>
<footer class="main-footer section-content align-center" id="contact-info"> <p>© 2018 - <a href="https://www.fahmidasclassroom.com/" target="_blank">firstTheme</a> by <a target="_blank" href="https://fahmidasclassroom.com">fahmidasclassroom</a></p>
</footer>
<?php wp_footer(); ?>
</div> </div>
</div>
</body> </html>
6. Add code in style.css file to change the front page look.
body{ font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu SansCondensed", Helvetica, Arial, sans-serif; font-size:16px; color: blue;
}
p{
line-height: 10px;
}
a:link, a:visited{
color:green;
}
7. Add the header, body and footer parts in index.php.
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-md-12"> <?php
if(have_posts()):
while(have_posts()): the_post(); ?>
<h1> <a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a></h1>
<p><?php the_excerpt(); ?> </p>
<?php endwhile; else :
echo "<p> No content found </p>"; endif; ?>
</div>
</div>
</div>
<?php get_footer(); ?>
8. Add functions.php file to link css file.
<?php
function theme_resources()
{
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts','theme_resources');
9. Create a simple screenshot for your theme to start the theme installation process and save as screenshot.png.
***************************Adding Menu***************************
10. Add code in functions.php to register the menu
//Add Menu
register_nav_menus(array('primary'=>__('Top Menu'),
'footer' => __('Footer Menu'),));
11. Add top and footer menu from the admin panel.
12. Add css code for header and footer menu in style.css.
.nav-header ul{
margin:0; padding:0;
}
.nav-header ul li {
display:inline-table;
list-style: none;
border: 1px solid #063141;
border-bottom:none;
width:10%;
text-align:center;
}
.nav-header ul li {
background-color: #95E3AA ;
}
.nav-header ul li:hover {
background-color: #F1E9A1;
}
.nav-footer ul{
margin:0;
padding:0;
}
.nav-footer ul:before, nav-footer ul:after{ display: table;}
.nav-footer ul li {
list-style:none;
float:left;
padding-right: 2%;
}
p.ft {
clear:both;
margin:5% auto;
padding:0;
}
13. Add code in header.php to add top menu.
<br/><br/>
<nav class="nav-header">
<?php
$args = array('theme_location' => 'primary');
?>
<?php wp_nav_menu($args);?>
</nav>
14. Add code in footer.php to add footer menu.
<nav class="nav-footer">
<?php
$args = array('theme_location' => 'footer');
?>
<?php wp_nav_menu($args);?>
</nav>
<br/><br/>
15. Reload the theme
*************************Adding Side bar****************************
16. Add CSS for sidebar in syle.css
.sidebar {
float:right;
}
17. Add register sidebar method in functions.php to enable widget option in backend.
//Add sidebar
register_sidebar(array(
'name'=>__('sidebar','firstTheme'),
'id'=>'firsttheme-sidebar',
'description'=>'Dynamic Sidebar',
'before_widget'=>'<section id="sid" >',
'after_widget-'=>'</section>',
'before_title'=>'<h2 id="widget-title" >',
'after_title'=>'</h2>'
));
18. Create sidebar.php file and add the following code to add custom sidebar
<?php dynamic_sidebar( 'firsttheme-sidebar' ); ?>
19. Modify the content area of index.php with the following code to add dynamic sidebar.
<div class="row">
<div class="col-md-6">
<?php
if(have_posts()):
while(have_posts()): the_post(); ?>
<h1> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h1>
<p><?php the_excerpt(); ?> </p>
<?php endwhile; else :
echo "<p> No content found </p>"; endif;
?>
</div>
<div class="col-md-4">
<div class="sidebar">
<?php get_sidebar(); ?>
</div>
</div>
</div>
20. Link bootstrap.css file.
@import url("bootstrap.css");
*********************************Adding Header Image*********************************
21. Add the following code in functions.php to add header image.
//Add header image
$header_img= array(
'default-image'=>get_template_directory_uri().'/header.jpg',
'uploads'=>true,
);
add_theme_support('custom-header',$header_img);
22. Add the following code in header.php to display the header image.
<img src="<?php header_image(); ?>" height="10%" width="100%" class="img-responsive" />
23. Add code in functions.php for thumbnail support.
/* Enable support for Post Thumbnails on posts and pages. */
add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 1200, 9999 );
24. Add feature image for the post.
25. Reload the theme.
26. Create a page named single.php to display the details of each post with comment form.
<?php
/**
* The Template for displaying all single posts
*/
?>
<?php get_header(); ?>
<!-- BLOG AREA -->
<div class="row">
<div class="col-sm-7">
<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink(); ?>"
class="gray"><?php the_title(); ?></a></h1>
<p class="details">By <a
href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php
echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?> </p>
<?php if
(has_post_thumbnail()) : ?>
<p class="excerpt"> <?php the_content(); ?> </p>
<?php endif; ?>
</section>
<?php endwhile; ?>
<?php endif; ?>
<div class="comment-section">
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || '0' != get_comments_number() ) :
comments_template();
endif;
?>
</div>
</div>
<!-- SIDEBAR AREA -->
<div class="col-sm-4 col-md-offset-1">
<div class="sidebar">
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
27. Create a page named page.php to display the details of each page.
<?php get_header(); ?>
<!-- BLOG AREA -->
<div class="row">
<div class="col-md-12">
<div class="col-md-7" >
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2> <?php the_title(); ?> </h2>
<p style="width:60%"><?php the_content();
?> </p>
<?php endwhile; endif; //ends the loop
?>
</div>
<!-- SIDEBAR AREA --><div class="col-md-4 col-md-offset-1"> <div class="sidebar"> <?php get_sidebar(); ?> </div> </div> </div> </div> <?php get_footer(); ?>28. Reload the theme
Thank You.
The steps are shown in the following video tutorial.