Dev {Tricks}

You are here: Home / Home

by Leave a Comment

How to create new sidebar in Genesis?

The genesis sidebar code which has to be added in functions.php


// Register new sidebar
genesis_register_sidebar( array(
'id' => 'Extra-sidebar',
'name' => 'Extra Sidebar',
'description' => 'This is extra sidebar for any purpose.',
) );

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 3 – Setup and WordPress template hierarchy

Install ftp –

wp-admin

wp-content

WordPress template hierarchy

404.php

archive.php

assets

comments.php

footer.php

front-page.php

functions.php

header.php

inc

index.php

page.php

README.txt

rtl.css

screenshot.png

search.php

searchform.php

sidebar.php

single.php

style.css

template-parts

 

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