WordPress Theme Development from scratch:Part-1

Fahmida Yesmin

5 years ago

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 ‘CarTheme’ 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
sidebar.php
functions.php

3. Add the following information about the theme in style.css file.

/*
Theme Name: CarTheme
Author: fahmidasclassroom
Author URI: https://fahmidasclassroom.com
Version: 1.0
*/

4. Download bootstrap.css file and store in theme folder.

5. Add the link of bootstrap.css file in style.css file.

@import url("bootstrap.css");

6. 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>

7. 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 align="center">&copy; 2019 - <a href="https://www.fahmidasclassroom.com/" target="_blank">CarTheme</a> by <a target="_blank" href="https://fahmidasclassroom.com">fahmidasclassroom</a></p></footer>
<?php wp_footer(); ?>
</div> 
</div>
</div>
</body> </html>

8. Add code in style.css file to change the front page look.

body{ font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans
Condensed", Helvetica, Arial, sans-serif; font-size:16px; color: blue;
}
p{
line-height: 20px;
}
a:link, a:visited{
color:'LightBlue';
text-decoration:none;
}

9. Add the header, body and footer parts in index.php.

<?php get_header(); ?>
<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>
<?php get_footer(); ?>

10. 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');

11. Create a simple screenshot for your theme to start the theme installation process and save as screenshot.png.

12. Now, activate your theme.

***************************Adding Menu***************************

13. Add code in functions.php to register the menu

//Add Menu
register_nav_menus(array('primary'=>__('Primary Menu'),
	                     'top'=>__('Top Menu'),
                        'footer' => __('Footer Menu'),));

14. Add top and footer menu from the admin panel.

15. 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;
font-size:18px;
/*border: 1px solid #063141;*/
padding-bottom:3px;
padding-right:0;
/*margin-right:3px; */
/*border-bottom:none;*/
width:12%;
text-align:center;
}

.nav-header ul li {
background-color: #C1ECFA ;
}

.nav-header a:hover {
color:green;
}

.nav-top ul li {
list-style:none;
float:right;
padding-right: 2%;
font-weight:bold;
}

.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:right;
padding-right: 2%;
}

p.ft {
clear:both;
margin:5% auto;
padding:0;
}

16. Add code in header.php to add primary menu.

<br/>
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav class="nav-header">
<?php
wp_nav_menu(
array(
'theme_location' => 'primary'
)
);
?>
</nav>
<?php endif; ?>

17. Add some primary menu items and reload the theme.

18. Add code in header.php to add top menu.

<?php if ( has_nav_menu( 'top' ) ) : ?>
<nav class="nav-top">
<?php
wp_nav_menu(
array(
'theme_location' => 'top'
)
);
?>
</nav>
<?php endif; ?>

19. Add some top menu items and reload the theme.

20. Add code in footer.php above the <footer> tag to add footer menu.

<nav class="nav-footer">
<?php
$args = array('theme_location' => 'footer');
?>
<?php wp_nav_menu($args);?>
</nav>
<br/>

21. Add some footer menu items and reload the theme.

*********************************Adding Header Image*********************************

22. Store a dummy image named header.jpg in theme folder and 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);

23. Add the following code in header.php to display the header image.

<img src="<?php header_image(); ?>" height="10%" width="100%" class="img-responsive" />

The next part of this tutorial is given in part2.

Share this: