how to create wordpress theme part 2

How to Create WordPress Theme – Part 2

Todays class of How to Create WordPress Theme, we will learn how to build the header and will give some style to our theme. Usually the header file contains the meta information, the link to the stylesheets, the website documentation.

 

To avoid write over and over again, in every file the header we can just create a file named header.php, and every time we want show the header only need call the function get_header(); this file should be saved in the main folder “w7code“.

folder with header

 

In our header file we will call the website name, the website description, and other important  information, all the details are explained below.

  • wp_title(); displays or retrieve the page title;
  • bloginfo(‘version’); indicate to the browser what wordpress version the blog use;
  • bloginfo(‘html_type’); display the Content-type WordPress HTML pages to the browser;
  • bloginfo(‘stylesheet_url’); find the url of the primary CSS (style.css);
  • to set the blog favicon we use:
    • <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
      

      The favicon is the small image that appears in the browser.

  • for set all the media properties we will use later, we use:
    • <meta name=viewport content="width=device-width, initial-scale=1">
      

      Using this line of html we are setting our website “responsive”, when we later will set the style.css file.

  • wp_head(); this function is used before the closing tag </head>, never forget use this function because many plugins use this function to link scripts and stylesheets;
  • get_option(‘home’); is used when we want get the URL of homepage;
  • bloginfo(‘name’); is used to get the blog name;
  • bloginfo(‘description’); is used to get the blog description;
  • wp_nav_menu(); we used to get the menu we will create in a new file named functions.php;
  • bloginfo(‘template_url’); gets the url where our theme is stored.

 

Our header.php file complete:

<?php /*

@package w7code

  ========================================
  =            w7code                    =
  ========================================

*/
?>
<html>
  <head>
    <title><?php wp_title(); ?></title>
    <meta name="generator" content="Wordpress <?php bloginfo('version');  ?>" />
    <meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; <?php bloginfo('charset'); ?>" />
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" media="all" type="text/css" />
    <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
    <meta name=viewport content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
  </head>
  <header>
  <div id="header">
  	<div class="logo_align">
      <?php
        $custom_logo = get_theme_mod( 'custom_logo' );
        $logoImage = wp_get_attachment_image_src( $custom_logo , 'full' );
      ?>
          <a class="site_name" href="<?php echo get_option('home'); ?>">
            <img src="<?php echo $logoImage[0]; ?>" alt="Blog Logo">
            <h1><?php bloginfo('name'); ?></h1>
          </a>
          <?php bloginfo('description');?>
  	</div>
    <div class="wrapper">
      <div class="menu">
  			<nav class="menu-nav"></nav>
  					<b><?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?></b>
        </div>
  		</div>
    </div>
  </div>
  </header>
  <script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>
  <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/menu.js"></script>
  <body>

 

 

 

Now we need create a new file named functions.php, in the theme root. This file will be responsible for activate some WordPress functions, such as, the menu area, allow the user upload logo.

After you have created the functions.php file. We will activate the custom menu and the custom logo.

To create the menu we will use:

function register_menu_w7code() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' )
    )
  );
}
add_action( 'init', 'register_menu_w7code' );

Some Explanation:

  1. we create a function named register_menu_w7code();
  2. then we create new menu area named “Header Menu” with the id header-menu;
  3. to active this function we use the add_action function.

 

To create the Custom logo upload we will write:

function theme_logo_w7code() {
    $logoDetails = array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
        'header-text' => array( 'site-title', 'site-description' ),
    );
    add_theme_support( 'custom-logo', $logoDetails );
}
add_action( 'after_setup_theme', 'theme_logo_w7code' );

Some Explanation:

  1. we create function named theme_logo_w7code(), which receives some arguments like height, width, flex-height…
  2. then we active the custom logo upload using the add_theme_support() function, every time you want call the logo you will use the logo id custom-logo;
  3. at the end we activate the theme_logo_w7code() function.

logo upload wordpress

To allow we customize our theme add this line to our functions.php file:

wp_enqueue_style( 'style', get_stylesheet_uri() );

This line of code is responsible for get the main stylesheet of the theme.

Now we just give some style to our theme! For that open the style.css file and write their this code:

*{
  margin:0;
  padding:0;
}

/*Set the body color background*/
body{
  background: #ccc;
}

/*this area include the posts and sidebar area*/
.full-main-area{
  width: 80%;
  height: 100%;
  margin-left: 8%;
  background: #fff;
  padding: 20px;
}
/*this is relative to header styles*/
#header{
  width: 80%;
  margin-left: 8%;
  background: #fff;
  padding: 20px;
}

/*this is related to the post area*/
.primary-main-area{
  float:left;
  width:65%;
  margin: 1.3%;
  background: #ccc;
  padding: 5px;
}

/*this area provisional*/
#sidebar{
  float:right;
  width:28%;
  margin: 1.3%;
  background: #ccc;
}

/*Removing list style from sidebar*/
#sidebar ul{
  list-style: none;
  padding: 5px;
}

/*removing text underline from headers and text*/
h1, h2, h3, h4, h5, h6, a{
  text-decoration: none;
}

/*remove list style from menu and sidebar*/
.menu ul {
  list-style: none;
}

 

Now our website looks like:

site preview wordpress

Now we need give some style to our menu:

/*-------MENU STYLES--------*/
.menu{
  position: relative;
  background: #373737;
  height: 51px;
}
.menu ul li{
  list-style: none;
  display: inline-block;
  line-height: 50px;
}

.menu ul li a {
  padding: 15.5px;
  background: #ccc;
  line-height: 50.588237px;
  background: #373737;
  color:#fff;
}
.menu .menu-item-has-children ul{
  display: none;
  position: absolute;
  background: #ddd;
  line-height: 51px;
  z-index: 1;
}
.menu .menu-item-has-children ul a{
  background: #ddd;
  color: #373737;
}
.menu .menu-item-has-children:hover .sub-menu{
  display: block;
}

.menu ul li a:hover{
  background: #00adff;
  color: #fff;
}

/*we use media to turn it responsive*/

@media screen and (max-width: 1000px){
  .menu,
  .menu .menu-item-has-children ul{
    float:none;
    width:100%;
    height: 0;
  }

  .menu-nav{
    position: relative;
    background: #373737;
    height: 51px;
    cursor: pointer;
  }

  .menu li a,
  .menu .menu-item-has-children ul{
    display:none;
  }

  .menu .open li a,
  .menu .open .menu-item-has-children ul{
    display:block;
    text-align:center;
    color:#fff;
    border-bottom:1px solid #fff;
  }


  .menu ul li{
    display: block;
  }

}

We also need create a folder named js which will contain a javascript file when we click on the menu mobile. In this folder create a file named menu.js. This file add a class open to the menu when we click on it. Our Code:

$(document).ready(function(){
    $("nav").click(function(){
        $(".menu").toggleClass("open");
    });
});

 

At the of this class of “How to Create WordPress Theme”, our theme looks like:menu mobile wordpressmenu mobile open wordpress

theme appeareance

You can download the full class full code here.

 

How to Create WordPress Theme Parts:

  1. How to Create WordPress Theme – Introduction
  2. How to Setup the WordPress Development Environment
  3. How to Create WordPress Theme – Part 1
  4. How to Create WordPress Theme – Part 2

 

Do you have any doubt? Please feel free to comment it below.

 

 

 


Leave a Reply

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