Dev {Tricks}

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

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

July 28, 2018 by dev 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

 

Filed Under: Stock Theme Development, VC

July 28, 2018 by dev 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

 

Filed Under: Stock Theme Development

July 28, 2018 by dev 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

 

 

 

 

 

Filed Under: Stock Theme Development

July 28, 2018 by dev 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

 

Filed Under: PHP, Stock Theme Development, Wordpress Tagged With: array, boolean, data store, else, if, if else, if else if, integer, php basic, php syntex, string

  • 1
  • 2
  • Next Page »
  • 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