Dev {Tricks}

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

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

 

by Leave a Comment

Day 4 – How to use visual composer

  • Upload and install visual composer
  • Introduction of visual composer default addons
    • Classic mode – wordpress default editor
    • Backend editor – Visual composer backend editor
    • Frontend editor – Visual composer frontend editor
  • Backend editor
    • add row
    • add column
    • Column Settings
      • General
        • Element ID
        • Extra class name
      • Design Options
      • Responsive Options
        • Large desktop
        • Medium device
        • Tablet
        • Mobile
    • Addons
      • Content
        • Text Block
        • Image Gallery
      • Social
      • Structure
      • WordPress

 

by Leave a Comment

Day 2 – WordPress Overview

How to install wordpress on localhost?

How to install wordpress on cPanel?

WordPress dashboard overview.

How to add posts?

How to add posts category?

What is media?

How to add pages?

WordPress comments.

WordPress appearance.

Theme

Theme customization panel

Widgets

Menu

Header

Wordpres plugins

How to search and install plugins

Users

Tools

Settings.

General

Writing

Reading

 

 

 

 

 

by Leave a Comment

Day 1 – PHP Overview

 

PHP test

To test php environment whether it is installed correctly or php settings.

<?php phpinfo(); ?>

It will show php all configurations.

Output

PHP variable

Variable syntax

  • Start with $ sign
  • Name the variable
    • no space
    • no capital letter
    • variable names are case sensitive
    • no symbol
  • variable types
    • string: ‘Dhaka’;
    • integer: 123456;
      • no quotation
    • floating number: 1.23456;
      • no quotation
    • boolean true false
      • 0 = fales
      • 1 = true
    • array();
      • array(‘one’, ‘two’);
      • array(
         array(
            'one',
            'two'
         )
);

Example of print variables

Integer

<?php 
$roll = 6;
?>
<h1>My roll number is <?php echo $roll; ?>.</h1>

Output

String (way one)

<?php
$city = 'Dhaka and Rajshahi';
?>

<h1>Two most beautiful cities are <?php echo $city; ?>.</h1>

Output

String (way two)

  • using php concat
  • ‘ . . ‘
 <?php
$city = 'Dhaka and Rajshahi';
echo '<h1>Two most beautiful cities are '.$city.'.</h1>'
?>

Output

PHP if

  • <?php if() : ?>
<?php endif; ?>,

<?php
$beautiful = 'Rajshahi';
?>

<?php if($beautiful == 'Rajshahi') : ?>
<h1>The most beautiful city is $beautiful.</h1>
<?php endif; ?>

Output

PHP if else – false value


<?php
$beautiful = 'Dhaka';
?>

<?php if($beautiful == 'Rajshahi') : ?>

<h1>The most beautiful city is $beautiful.</h1>

<?php else : ?>

<h1>We don't know</h1>

<?php endif; ?>

Output

PHP if else – true value


<?php 
$beautiful = 'Rajshahi'; 
?> 
<?php 
if($beautiful == 'Rajshahi') : ?> 
<h1>The most beautiful city is $beautiful.</h1> 
<?php else : ?> 
<h1>We don't know</h1> 
<?php endif; ?>

Output

PHP if else – all in one php tag

  • <?php if() {
echo '';
} else {
echo '';
}

<?php

$beautiful = 'Rajshahi';

if($beautiful == 'Rajshahi') {

echo '<h1>The most beautiful city is '.$beautiful.'.</h1>';

} else {

echo '<h1>We don\'t know</h1>';

}

?>

Output

PHP array()

  • array data point starts with 0 then 1, 2, 3 …..

<?php
$cities = array('Dhaka', 'Rajshahi', 'Khulna', 'Barisal');
echo '<h1>The second city is '.$cities[1].'.</h1>';
?>

Output

PHP array() with if else


<?php
$cities = array('Dhaka', 'Rajshahi', 'Khulna', 'Barisal');


if($cities[3] == 'Rajshahi') {
echo '<h1>The forth city is '.$cities[3].'.</h1>';
} else {
echo '<h1>We don\'t know.</h1>';
}
?>

Output

PHP equal variable


<?php
$city1 = 'Dhaka';
$city2 = 'Dhaka';


if($city1 == $city2) {
echo '<h1>The name of my city is '.$city1.'.</h1>';
} else {
echo '<h1>We don\'t know.</h1>';
}
?>

Output