Dev {Tricks}

  • Home
  • WordPress
  • OJS
  • Oxwall
  • Server and Hosting
You are here: Home / Archives for Wordpress / Stock Theme Development / Header Footer

July 29, 2018 by dev 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:[email protected]" class="stock-contact-box">
<i class="fa fa-envelope"></i>
Send us an email
<h3>[email protected]</h3>
</a>
<a href="mailto:[email protected]" 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

 

Filed Under: Header Footer, Stock Theme Development

  • Upwork
  • Freelancer
  • Fiverr
  • Guru
  • PPH

Recent Posts

  • MariaDB Upgrade to the new version | Plesk – CentOS 7 / RHEL 7
  • Google Workspace MX record values
  • Could not open input file
  • How to remove journal path for single journal OJS website.
  • How to Clean the YUM Cache in CentOS
  • How to run php file through command line? How do I enable PHP?
  • How to disable functions using the PHP disable_functions directive in php ini
  • Error 503 Backend fetch failed
  • Unblock iRedMail IP
  • Most Read Articles
  • Import export database | Linux
  • How to reset MySQL root password | CWP
  • MariaDB Upgrade to the new version | CWP
  • Install Optimize with optimize.js (sync)
  • Journey to Laravel & Vue – December to February 2022/2023
  • Elementor
  • Java Errors
  • How to Install Zip/Unzip
  • Redirect www to non-www and vice versa
  • How to change Time Zone in Debian 11 / Debian 10

Categories

  • Affiliate Marketing (1)
  • Customization (3)
    • CSS (1)
  • Email Solutions (20)
    • FrontApp (1)
    • Google Spreadsheet (2)
    • Microsoft Outlook (1)
    • PHP Email Form (3)
    • PolyMail (1)
    • Recaptcha (1)
    • Roundcube (3)
    • Thunderbird (2)
    • WebMail (4)
  • Games (1)
  • How to (75)
  • Joomla (6)
    • Akeeba (1)
    • Fix & Tricks (3)
  • jQuery (3)
  • jQuery Plugins (4)
    • BX Slider (1)
    • Slick (1)
  • Laravel (1)
  • Marketplace (5)
  • Miscellaneous (26)
  • OJS (52)
    • Help (35)
    • Installation (9)
      • Issues (5)
    • Plugins (7)
    • Theme (6)
      • Templates (6)
        • Frontend (5)
        • legacy (1)
    • Theme Customization (9)
    • Theme Development (13)
    • TPL CSS JS (2)
    • Upgrade (11)
  • Oxwall (3)
  • Payment Methods (1)
    • Paypal (1)
  • PC Tips and Tricks (12)
    • MS Office (1)
      • PowerPoint (1)
    • Windows (3)
  • PHP Parse error (2)
  • phpBB (1)
  • Server and Hosting (174)
    • Billing and Management (10)
      • Blesta (5)
      • Boxbilling (2)
      • WHMCS (5)
    • Debian (5)
    • Email (9)
      • Postfix (3)
    • Error and Fix (16)
    • FTP (2)
    • Mail Server Solusion (5)
      • iRedMain (4)
    • MySQL (9)
    • Providers (54)
      • AWS (23)
      • Bluehost (23)
      • Cloudcone (12)
      • Contabo (26)
      • Digitalocean (54)
      • HostGator (22)
      • VPSDime (24)
    • Security (18)
      • SSH (6)
    • VPS Management (60)
    • Web Control Panel (125)
      • CentOS Web Panel (36)
      • cPanel (24)
      • DirectAdmin (89)
        • Find & fix (38)
      • ISPConfig (11)
      • Plesk (20)
      • Webmin (19)
        • Usermin (2)
        • Virtualmin (11)
      • WHM (13)
  • Uncategorized (14)
  • Wordpress (86)
    • Elementor (2)
    • Find and Fix (9)
    • Functions (5)
    • Genesis (9)
    • Glossary (1)
    • How to (20)
    • Neuron TD (15)
      • Console Error (1)
      • functions (5)
        • register_post_type (1)
        • register_sidebar (1)
        • theme_files (1)
        • theme_supports (1)
      • Image Directory (1)
      • Menu (2)
      • Query (4)
    • Plugins (12)
      • Contact Form 7 (5)
      • Duplicator (1)
      • Essential Grid (2)
    • Softaculous (3)
    • Speed and Security (4)
    • Stock Theme Development (6)
      • Header Footer (1)
      • PHP (1)
      • VC (1)
    • Theme Development (2)
      • Issues (1)
      • Menu (1)
    • Timer Theme Development (3)
    • Update (2)
    • Woocommerce (2)
    • WP Basic Guideline (8)

Important DEV links

  • Premium Themes
    • Themeforest
    • Envato Market
  • Built With (What Theme is That?)
    • What WP theme is that
    • Joomla Template Detector
    • Drupal Template Detector
    • Prestashop Template Detector
    • Shopify Theme Detector
    • Squarespace Template Detector
    • OpenCart Detector
    • WordPress.com Theme Detector
  • Domain/IP history checker
    • Who IS request
    • Hosting Info
  • Check DNS Propagation
    • DNS Checker
    • intoDNS
  • What is my IP
    • What is My IP Address
    • What is My IP
    • IP location
    • What is My IP
    • Porkbun
  • SEO Tools
    • Visitor Traffic
    • Broken Link
    • Website Speed Test
      • SEMrush
      • GTmetrix
      • Pingdom
      • PageSpeed Insights
      • DebugBear
      • keyCDN
  • Photo Image
    • Remove Background 50 Free Preview Image 375 × 666 per month
  • Domain Registrars
    • 123-Reg
    • Porkbun
    • Freenom
    • Namecheap NEWCOM598
  • Hosting Providers
    • Bluehost
    • Hostgator
    • Inmotion
  • Hosting Control Panel
    • CWPpro (FREE)
    • DirectAdmin (Trial 60 Days, One account $2/month)
    • ISPConfig (Free)
  • Webmaster Tools
    • Google
    • Bing
    • Yandex
  • Miscellaneous
    • Time Calculator

 

  • Home
  • WordPress
  • OJS
  • Oxwall
  • Server and Hosting

Copyright © 2023 · Executive Pro Theme on Genesis Framework · WordPress · Log in