Dev {Tricks}

You are here: Home / Archives for Wordpress / Stock Theme Development / Header Footer

by 1 Comment

Day 5 – Generate template at underscores.me , Install VC, Font Awesome, bootstrap; and Markup Header and Footer

What we will cover

  1. Generate theme
  2. Header and footer markup
  3. Register widget

Generate Starter Theme

Create the underscores based theme at www.underscores.me with following information –

  • Theme Name (e.g., Stock)
  • Advanced Options
    • Theme Slug (e.g., stock-codexcafe)
    • Author (e.g., CodexCafe)
    • Author URI (e.g., https://www.CodexCafe.net)
    • Description (e.g., CodexCafe WordPress Theme)
Underscores.me
Underscores.me

Install the starter theme

  • From dashboard Appearance Themes add new theme
  • Upload the generated theme.
  • Install it

Install Visual Composer Plugin

  • From dashboard Appearance Plugin add new plugin
  • Upload visual composer plugin
  • Install the plugin

Organize the theme files and folders

  • Create a folder called “assets” and move all css, js, fonts, images to css, js, fonts, img folders within the “assets” folder.

Markup Header

  • We will start header markup within <div id=”page” class=”site”> [HEADER CONTENTS] </div> at header.php
  • We will delete all other div and codex including the .site-content div
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package Stock
*/

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">

<div class="header-area">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="site-logo">
<h2><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo( 'name' ); ?></a></h2>
</div>
</div>
<div class="col-md-9">
<div class="header-right-content">
<a href="mailto:contact@stock.com" class="stock-contact-box">
<i class="fa fa-envelope"></i>
Send us an email
<h3>contact@stock.com</h3>
</a>
<a href="mailto:contact@stock.com" class="stock-contact-box">
<i class="fa fa-phone"></i>
Give us a call
<h3>+014-547-0354</h3>
</a>
<div class="stock-contact-box">
<i class="fa fa-map-marker"></i>
We are open
<h3>Mon - Fri, 9am - 6pm</h3>
</div>


<a class="stock-cart"><i class="fa fa-shopping-cart"></i> <span class="stock-cart-count">3</span></a>
</div>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="mainmenu">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
) );
?>
</div>
</div>
</div>
</div>
</div>

Special Notes:

  • .header-area class will help to make Header sticky
  • wordpress prefer home_url(‘/’); than site_url(‘/’);
  • all echo content must have to be sanitized
  • sanitize the static home_url() with esc_url();

WP codex functions used:

  • language_attributes();
  • bloginfo( ‘charset’ );
  • body_class();
  • esc_url();
  • home_url();
  • bloginfo( ‘name’ );
  • wp_nav_menu();

Markup Footer

  • As we delete .site-content div on header.php we will delete the div ending </div> of .site-content on footer.php
  • We will keep the ending div of #page

<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package Stock
*/

?>

<footer id="colophon" class="site-footer">
<div class="container">
<?php if(is_active_sidebar('stock_footer')) : ?>
<div class="row">
<?php dynamic_sidebar('stock_footer'); ?>
</div>
<?php endif; ?>

<div class="row">
<div class="col-md-4">
<?php esc_html_e('Copyright 2018 - All Rights Reserved', 'stock-codexcafe'); ?>
</div>
<div class="col-md-4">
<?php
wp_nav_menu( array(
'theme_location' => 'footer-menu'
) );
?>
</div>
<div class="col-md-4">
<div class="social-icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
</div>
</div>
</div>
</div>
</footer><!-- #colophon -->

</div><!-- #page -->

<?php wp_footer(); ?>

</body>
</html>

Special Notes:

  • We use conditional method for footer widget.

WP codex functions used:

  • is_active_sidebar();
  • dynamic_sidebar();
  • esc_html_e();
  • wp_nav_menu();

PHP used:

  • <?php if() : ?>

<?php endif; ?>

Register Footer Widget

  • Widget defined by register sidebar
  • We already a registered sidebar in functions.php
  • We will duplicate the sidebar and edit it for footer widget

Special Notes:

  • Footer widget id stock_footer
  • We have replaced section with div
  • We added col-md-4 class before_widget
  • Font size 18px is h4

Install Font Awesome

  • download Font Awesome from fontawesome.io
  • keep the fonts folder in assets folder
  • keep the fontawesome.min.css in css folder within assets
  • call it in functions.php

Install Bootstrap

  • download bootstrap from