WordPress Theme Design Tutorial Part-3

This is our WordPress theme  design and development series tutorial. It is an step by step process. If you learn more about the development of wordpress, stay connected with us. This our third tutorial. Tutorial-1 and Tutorial-2 

Creating header and footer:

First read the previous post. Then open the WordPress theme folder and create four files:

header.php
footer.php
single.php
functions.php

After doing that we will go to write some code in the above files. Now start.

WordPress Theme Design: header.php file

Now we are going to write some code for header.php file. You can copy and paste the following code to your header.php file.

<!Doctype HTML>
 <html>

<head>
 <meta charset="<?php bloginfo( 'charset' ); ?>" />
 <meta name="viewport" content="width=device-width" />
 <title><?php bloginfo('name'); ?></title>
 <?php wp_head(); ?>
 </head>

<body <?php body_class(); ?>>

<div class="header">
 <h1><a href="<?php echo get_home_url(); ?>"><?php bloginfo ('name'); ?></a></h1>
 <p><?php bloginfo('description'); ?></p>
 </div>

<div class="main">

After pasting above code to your header.php file then save.

WordPress Theme Design: footer.php file

Now we are going to write some code for footer.php file. You can copy and paste the following to code your footer.php file.

</div> <!------ main------>

<div class="footer">
 <p> Theme developed by <a href="http://fb.com/mmasudalam">M. Masud Alam </a>| &copy; <?php echo the_date('Y'); ?></p>
 <?php wp_footer(); ?>

</div>

</body>
 </html>

WordPress Theme Design: functions.php

Now we are going to create a file named functions.php and we will write some code for functions.php file for connecting the style.css. You can copy and paste the following  code to this file.

<?php

function mytutorialtheme_resources() {
 wp_enqueue_style('style', get_stylesheet_uri());
 }
 add_action('wp_enqueue_scripts', 'mytutorialtheme_resources');

?>

WordPress Theme Design: style.css file

Now we are going to write some code for style.css file for header and footer. You can copy and paste the following  code to your style.css file.

/*

Theme name: Your Theme name.
 Author: M. Masud Alam
 Author uri: http://www.w3themezone.com
 Description: Your descriptions for your theme.
 Tags: blog, two-columns, left-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images.
 Version: 1.0.2

*/

h1, h2, h3, h4, h5 {padding:0; margin: 0;}
 a {text-decoration: none;}
 a:hover {color: red;}

.main {width: 100%;}
 .content{width: 55%; margin-left: 10%; float: left; padding-top: 30px;}

.header {height: 100px; background-color: gray;}
 .header h1 {margin-left: 10%;}
 .header p {margin-left: 10%;}

.footer {width: 100%; height: 50px; background-color: gray; float: left;}
 .footer p {margin-left: 10%;}

If cannot understand above tutorial, you can see this video:

single.php

Now create a file named  single.php. Then we are going to write some code for single.php file for single post or page. You can copy and paste the following code to your single.php file.

<?php get_header(); ?>
<?php
if ( have_posts() ) :
 while ( have_posts() ) : the_post();  ?>
<h2> <?php the_title(); ?>
<?php the_content(): ?>
 <?php endwhile;
else:
echo ‘<p>no content found</p>’;
endif;
?>
<?php get_footer(); ?>

If you have any questions please put a comment in the comments box. Please don’t hesitate to ask me by comments.  Free WordPress Theme.

ABOUT MY TUTORIAL

This is a step by step tutorial. To learn wordpress theme development tutorial series one after another. You can follow my YouTube  Channel.



2 thoughts on “WordPress Theme Design Tutorial Part-3

Leave a Reply

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