W7Code » Wordpress » 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:

    • The favicon is the small image that appears in the browser.
  • for set all the media properties we will use later, we use:

    • 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:

 

 

 

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:

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:

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:

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:

 

Now our website looks like:

site preview wordpress

 

 

Now we need give some style to our menu:

 

 

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:

 

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

Leave a Reply