web
several ways to build websites using premium themes page builders
Setting up local server Enviorment using xampp installation
apachefreind.org Apache Server
sepearte enviorment for development (local) and production(hosting service provider
for public)
type localhost in your browser to run localserver
localhost/phpmyadmin for database config
uploads your files in htdocs folder
WORDPRESS-Content Management System
the perfect platform for anyone who wants to build any kind of websites
how a Theme Works create a theme lika a pro
Create Theme For Residistribution
wordpress functions
BUILDING WORDPRESS REUSABLE CUSTOM THEME WITH POPULAR FRONTEND DEVELOPMENT
FRAMEWORK BOOTSTRAP
THIS FLEXIBLE THEME CAN USED FOR DIFFEENT PROJECTS IN THE FUTURE
Anatomy of Wordpress theme Template Heirarchy and Template Anatomy
theme found in the wpcontent folder inside themes folder
wordpress give you at least three theme folder by default
and they always named related to the year released
another important folder is plugin folder
two intial file reqires index.php style.css
styles.css responsible for telling the wordpress abt theme information
autor description
Fallback files
index.php is the entry point of our theme
single.php is responsible for single view of the post
page.php is use to open a static page which is different from the post
screenshot.png theme image showed in admin area theme section
WE WILL BE USING USING CSS AND JAVASCRIPT BOOTSTRAP OFFERS AND USING
ANYWHERE IN THE THEME TEMPLATE OR CONTENT AREAS ACCESSIBLE IN THE ADMIN AREA
INTEGERATING BOOT STRAP AND WORDPRESS TOGETHER
BASIC fILES STRUCTURE SETTINGS
CREATE DIFFERENT LAYOUT OPTIONS GIVES OPTIONS TO SELECT WHAT EDIT WE NEED FOR OUR
PAGES
USING BOOTSTRAP JAVASCRIPT COMPONENTS ---OFFCANVAS CONTENTS CUSTOM POST TYPES
SLIDERS
server name from your hosting company
*************************************1
SETTING UP WORDPRESS DEVELOPEMTN ENVIORMENT
INSTALLING ANS SETTING UP WORDPRESS EITHER IN A LOCAL SERVER DEVELOPMENT TECHNIQUE
XAMPP OR MAMP IIS Or SETP IN A LIVE
HOSTING PROVIDER SERVICE OR CLOUD BASED PROGRAM
DOWNLOAD from wordpress.org -------EXTRACT IN A ROOT FOLDER -SETTING UP A DATABASE
DABASE USER AND USER PASSWORD
RUN LOCAL SERVER -PROVIDE DATABASE CREDENTIALS AND COMPLETE INSTALLATION STARTS
SET SITE TITLE***
IF YOU ARE NOT ON A LIVE SERVER UNCHECK SEARCH ENGINE SETTINGS
UNDER SETTING SECTION ENABLE PERMALINK SELECT
as a post for nicer url links and freidly seo for our url pages
****
download bootstrap from getbootstrap.com
CHECK BOOTSTRAP VERSION NUMBER
*******************************************************************2 VID COMPLETE
steps to creating new theme by creating templates files
create theme folder GO TO WP-CONTENT THEME FOLDER CREATE A FOLDER NAME THEME ---
ANOTHER THEME NAME:wp-bootstrap-starter***
OPEN THIS FOLDER IN ANY CODE EDITOR OF YOUR CHOICE
Set index.php file
header.php---must be named header.php
footer.php
functions.php
screenshot.png
style.css => add comment at the top which gives info of our theme
/*
Theme Name: Datatrack WP Bootstrap Starter
Theme
Theme URI: https://datatrack.co.in
Author: Datatrack Theme Designs Team
Author URI: https://shahid.datatrack.co.in
Description: The best WordPress starter theme based on the most powerful
frameworks in the world: FRONTEND DEVELOPMENT FRAMEWORK BOOTSTRAP AND WORDPRESS
Version:2.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wp-bootstrap-starter dattrack theme
Tags: blog, custom-menu, featured-images, threaded-comments, translation-ready,
right-sidebar, custom-background, e-commerce, theme-options, sticky-post, full-
width-template
*/
paste screentshot.png
PASTE ALL YOUR STATIC CODES INTO INDEX.PHP FILE
NOW YOU CAN CHECK THAT ALL OF THE MARKUP OF YOUR PAGE APPEARS ON YOUR SITE
CONFIGURING CSS LINKS
code slicing---PART OF THE HEADER TAG BODY AND FOOTER TAG IN INDEX.PHP ITSELF
header.php HEAD SECTION GOES INTO along with the Navigation which appears on every
page
footer.php
<?php get_header();
//get_header() function includes in the header.php template
pull code from header.php file <!--Check Here get header Function -->
<?php get_footer();?>
//php get_footer() function tag includes in the index.php file to call in the
footer
******************************************vid3
paste boostrap.min.css into css folder
Importing Bootstrap CSS Custom and JavaScript
css link using function .php file
create folder css
copy bootsrap.min.css download file from getbootstrap.com
open function .php file insert this line of code to include bootstrap and custom
css file
<?php
//write a new function with the name of a function name caleed theme_styles
function theme_styles() {
//inisde of that we will use hook with start accepting a parameter the handle
name for this particular style here name bootstrap_css
// then we will get the url to our theme using get template directory uri with
path
wp_enqueue_style("bootstrap_css", get_template_directory_uri() . '/bootstrap/css/
<!-- this will create a link betweeen bootsrap.min.css file-->
bootstrap.min.css'); //handle name
add_action( 'wp_enqueue_scripts', 'theme_styles' );
wp_enqueue_style( 'style_css', get_template_directory_uri() .
'/style.css');
?>
in order to work this code we have to insert head function above the closing head
tag
<?php wp_head(); ?>
we have to check by using view source and check that is include ot no
delete static hard coded link css tag
Paste this css code in style.css
/*Setting offset at the top*/
body {
padding-top:50px;
padding-bottom:20px;
}
this code only works when u inklude this stylesheet into functions.php code
Check my Sepearte tutorial for this because Bootstrp4 has omits fonts glyphicons
how to add Learn glypicons and font awesome in bootsrap 4
***********************************************************************************
*********video4
Configuring Html5 shim and respond js to load in older interent explorer
only need to be loded in older version of internet Explorer
bootstrap.min.js custom js working
to this we configure functions.php file
first we will link normally
then we will do conditionally loded when we need
linking jquery and bootstrap.min.js
wordpress built in jquery load first
then bootstrap.min.js
functions create new function theme js
register is different with enque script
function theme_js() {
global $wp_scripts;
// call global wp scripts golbal object
wp_register_script( 'html5_shiv',
'https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js', '', '', false );
// flase means that we tell wordpress that we dont want to load at the footer of
the site but instead to load at the header of the site
//handle urlink cdn blank for
specif certain dependicies or version number
wp_register_script( 'respond_js',
'https://oss.maxcdn.com/respond/1.4.2/respond.min.js', '', '', false );
/// helps to load our code Dynamically
$wp_scripts->add_data( 'html5_shiv', 'conditional', 'lt IE 9' );
//setting condition
$wp_scripts->add_data( 'respond_js', 'conditional', 'lt IE 9' );
//setting condition
wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() .
'/bootstrap/js/bootstrap.min.js', array('jquery'), '', true );
//dependant on jquery apparmeter meaning this file loded afer jquery and true
for loede in the footer
add_action( 'wp_enqueue_scripts', 'theme_js' ); //tapping wp enque script hook
pasing function nname
bootstrap.min.js working
<?php wp_footer(); ?>// hook in and echo out to load script from functions.php
script files in the footer
function load_js() {
wp_register_script('custom_js', get_template_directory_uri() .
'/bootstrap/js/scripts.js' ,'',1,true);
wp_enqueue_script( 'custom_js');
}
add_action( 'wp_enqueue_scripts', 'load_js' );
*************************************************************vid5 end****
to turned off and on admin navigation bar
add_filter( 'show_admin_bar', '__return_false' )
to get some padding between navigation bar and menu bar
.admin-bar .navbar-expand-md {
margin-top: 30px;
}
insert body tag special php function called body class
add a class to a body tag gives many info
identify which page we are working on within a theme
// basically return the classes relate to the page
hence you can style css for pre defined customization of a home class in a
different way
for example when you visit the homepage it bring
out the home class inside the body tag
<body <?php body_class(); ?>>
home page-template-default page page-id-45 logged-in admin-bar customize-support
// tell what page we are on
// whether someone Logged in because we see here admin bar is enabled
//use admin bar class
//navbar fixed top class
.admin bar .navbar-fixed-top {
marin-top:30px
}
//datatrack site
<header id="masthead" class="site-header navbar-static-top navbar-light"
role="banner">
//alfalah
redbar at the top
step1 create a header tag inside it section with class
<!--Top Header===================----->
<header class="site-header" role="banner">
<section class ="headertop">
<div class="container">
<div class="headertoptext text-left">
<p><i class="fa fa-phone"></i> +91 990 317 6377</p>
<p><i class="fa fa-envelope"></i>
[email protected]</p>
</div>
<div class="headertoptext text-right">
<font color="#FFFFFF"><a href=" "><i class="fa fa-facebook
facebook "></i></a></font>
<font color="#FFFFFF"><a href=""><i class="fa fa-twitter facebook
"></i></a></font>
<font color="#FFFFFF"><a href=""><i class="fa fa-instagram
facebook"></i></a></font>
<font color="#FFFFFF"><a href=""><i class="fa fa-youtube
facebook"></i></a></font>
</div>
<div class="search-icons"></div>
</div>
</section>
<section class="header">
<div class="container">
<div class="text-left loggrr"><img src="<?php
bloginfo( 'stylesheet_directory' ); ?>/assets/images/logo1.png" class="img-
responsive" /></div>
<div class="text-right fdgd"><img src="<?php
bloginfo( 'stylesheet_directory' ); ?>/assets/images/logo2.png" class="" /></div>
</div>
</section>
<!--section class="manuheader"--><!--gives backgroundcolor to menubar-->
<!--div class="container"-->
<!---tutotrial-->
<!-- Bootstrap Navigation -->
<Inside Heder we Nested nav elemnet which goint to contain two things on left
hand side we have site title
and menu links over right
then nav elent withsome bootstrap classes navbar this comand will apply bootsrap
css style class to navbar
as for example is uses css flexbox as a display type and also som epadding
additional classes navbar-exapnd-md style applied for medium size devices @media
Queries 768px
add background color navbar-light bg-light
anchor tag used for site title image with bootstrap navbar-brand class
along with the empty href of our homepage
Cretea buttn for DropDown Menu using normal html button tag along with some
bootsrap classes
navabr toggler with type attributes of button
adding icon realighned for mobile devces to control ie collpase when bitton
clicked on using data toggle with a given id navabr collpapse any css will be
applied or regular javascrippt to target class
you cans use dot or hash
ie data-toggle="collapse" data-target=".navbar-collapse
control by the button apan adding the icon
<!--Opening header->
<header">
<!-- Navbar-->
<nav class="navbar navbar-exapnd-md navbar-light bg-light">
<a class="navbar-brand" href="/"><img src="<?php
bloginfo( 'stylesheet_directory' ); ?>/assets/images/logo.png" alt="Bootstrap to
Wordpress"></a>
/*Here menu links collapse with Drop Down Button for mobile devices*/
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#navbar-collapse">
<span class="navbar-toggler-icon">Toggle
navigation</span>
</button>
<div class="collapse navbar-collpase justify-content-end id="navbar-collapse">
<ul class="navabar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
</ul>
</div>
</nav>
go to customizer add menu create menu menu name Main Menu
add pages home blog
make sure it s appears on left hand side
codex.org---wp-nav-menu Displays a navigation menu. along with parameters which we
insert into ourmenu
parameters allows to customize our menu
by adding things such as containers
along with various customclasses and ids
using all these parameters will laow tell wordpress which classes we want to add
toour menu
keep out layout styling how boostrap used for that we use
Boostrap Navwalker
*******************************Another
Example**************************************
<!-- Navigation -->
<!--Opening header->
<header class="site-header" role="banner">
<div class="navbar-wrapper"> navbar-wrapper is a bootstrap class
// bunch of bootstrap Html along with Boostrap css Classes
<div class="navbar navbar-inverse navbar-fixed-top role="navigation">
<div class ="container"> content goes inside this conatiner brand logo and menu
links
<div class ="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#navbar-collapse">
<span class="navbar-toggler-icon">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="<?php
bloginfo( 'stylesheet_directory' ); ?>/assets/images/logo.png" alt="Bootstrap to
Wordpress"></a>
</div><!--navbar-header-closed ends-->
<div class=" navbar-collpase collapse"><!-- ul always reside beneath the navabr
collpase div -->
<ul class="navabar-nav navabr-right">
<li class="active"><a href="index.html">Home</a></li><!-- bootstrap active class
for highlight current menu item page-->
<li ><a href="blog.html">Blog</a></li>
<li ><a href="about.html">About</a></li>
<li ><a href="contact.html">Contact</a></li>
</ul>
</div><!--navabr collapse-closed ends-->
</div><!--container-closed ends-->
</div><!--navbar-closed ends-->
</div><!--navbar-wrapper ends-->
Dyanmic headr setup
Take this header snippet from static index page and paste into Header.php under
skip link
now we start making worpdress freindly
you have to play between navbar collapse and ul tag
coonecting wordpress and pull wordpress menu using wordpress nav menu function
an array contains
paste this code above collapse tag
<?php wp_nav_menu( array(
'theme_location' => 'primary',// which menu wordpress is looking for
'container' =>'nav',
'container_class' =>' navbar-collapse collapse',
'menu_class' =>'nav ',//customnavbar settinggs
'menu_class' =>' nav navbar-nav navbar-right ', //unordered list
//botstrap navbar menu link aligh each other
) ); ?>
**Delete from navabr collapse till closing ul and closing div tag
make sure your nav is registered in functions.php file which is main core of
wordpress
registered nav menu funtion
**********************************************************************************
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target=".navbar-collapse">
</button>
<a class="navbar-brand" href="/"><img src="<?php
bloginfo( 'stylesheet_directory' ); ?>/assets/images/logo.png" alt="Bootstrap to
Wordpress"></a>
</div>
<div>
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'container' =>'nav',
'container_class' =>' navbar-collapse collapse',
'menu_class' =>'nav ',//customnavbar settinggs
'menu_class' =>' nav navbar-nav navbar-left nav',
//botstrap navbar menu link aligh each other
) ); ?>
</div>
</div>
</section>
</header>
<div class="manuheader" role="navigation"> Check this
************
//Configuring Custom Menus in our theme Very Imortant
HOW TO SETUP DYNAMIC NAVIGATION IN WORDPRESS
***************************************
configuring menu to appear in back end of our site
and also to be displayed in the front end of the site
by adding this code
Step 1
add_theme_support( 'menus' );
function register_theme_menus()
{
register_nav_menus(
//accept an array
array(
//identifier for an menu
'header-menu' => __( 'Header Menu' )
// create header menu in the backend
)
);
}
add_action( 'init', 'register_theme_menus' );
?>
//init hook and passing a paramter of our fnction
STEP 2
// Create a page in Backend of admin Dasboard
STEP 3
Front End Configuration code insert in the template heade.php file
tamplate code for frontend to menu appearance and make it clickable using url to
resend to homme page
dunamically display for title to echo out
<a class="navbar-brand" href="<?php bloginfo( 'url' ); ?>"><?php
bloginfo( 'name' ); ?></a>
// page menu link to spit out over menu bar
<?php
$args = array(
'menu'=> 'top-menu',
//display the top menu can be over write later
'menu_class' => 'navbar-nav mr-auto',
//menu class that we want to use pass the name
'container' => 'false'
);
// dontned container element for this
wp_nav_menu( $args );
/// call wp_nav_menu function and passed the arguments
?>
Check more over codex and see different parameters settings
configure home link to redirect to the HOME page not the home page
onigure from setting Readings and selct home page
now after refreshing page u will see all the menu appears
note! this home link actually going to the home page not the home page
so come in under settings and reading and set up static front pages to home as
front page
if u chk view source u wiil find unordered list appear with a class nav navbar-nav
same mark up in bootstrap navigation
also check current menu items tels what page we are currently on
default bootstrap u will find its class is active so default active link wont work
in this case
so u have to write own css rule
if you click different current-menu-item tells us what page we want
//datatrack starter theme
<div id="main-nav" class="collapse navbar-collapse justify-content-end"><ul
id="menu-top-menu" class="navbar-nav">
configure css targeting current-menu-item for active link
.current-menu-item >a{
background:black;
but on hover its goes away so check different css that shouldbe needed
***********************************************************************************
********************VID 5
Drop Down Navigation
Creat new page name in backend dashboard name page with sidebar and set parent to
example pages
add another one with fullwidth add both of this pages links under navigation of
example page
as child pages or Drop Down
if ou refersh the page you will see its appears bneath the example pages
but dont have proper styling
so fire up th google inspector tool
that the drop menu inside the sub class menu *********IMPORTANT
and coming under appearance menus
//datatrack check ul
class =dropdown-menu show
replace with this css code with our previous code *************
@media (min-width:768px) {
.sub-menu {
display: none;
position: absolute;
background: #222;
padding: 10px 15px;
width: 200px;
}
li:hover .sub-menu {
display: block;
}
.
sub-menu li {
margin-bottom: 10px;
list-style: none;
}
.sub-menu li:last-child {
margin-bottom: 0;
}
.sub-menu a {
color: #999;
text-decoration: none;
}
.sub-menu a:hover {
color: #fff;
}
.current-menu-item > a, .current-menu-parent >
a {
background: #000;
padding: 5px 10px;
.current-menu-parent li a {
background: inherit;
}
.current-menu-parent .current-menu-item a {
color: #fff;
font-weight: bold;
}
************************
Bootstrap has some complex menu strucure that is available one of them is dropdown
mnu
however in order to get this drop down menu and some special styling to appear
you have to do quite an extra bit of work
with other third party dependicies navwalker
***********************************************************************************
**************VID6
CODING OT LL OF THE ACTUAL TEMPLATES we going to have for this theme
but before we going to that we going to install bootstrap short codes plgin helps
to customize pages
and layout for our sites
Download BootStrap Codes Plugin DWShortcodes
if you try different one make sure its works with your bootstrp version
otherwise it will break your sites
Once its installed if u come underpages you wil insert helpful shortcodes button
to access bottstrap markups directly within your ontent area int he form of short
codes
***********************************************************************************
***************VID7
so what we have complete
we have setup index.php file
importing Bootstrap CSS and JAVASCRIPT
*******************************
Create a Variety Of Templates using a Combination of Bootstrap Markups and
wordpress templates Tags
Notice at the top
REMOVE meta description and content author tag from header.php instead use
Google Auhtorship Plugin that worked with the author
Seo Plugin from SEO by Yeaost
helps display dynamic Description on each Page
*******
Favicon Configuration to appear on top of the page
create a folder called images in the theme folder
paste favicon inside it
Insert this bloginfoTag in shortcut icon
href="<?php bloginfo ('template_directory');?>images/favicon.ico">
refresh page it will appears on the top of the url tab
*************
Next inside our header we have title Tag
Make our Title Tag Dynamic
using special tag wp_title which is different from the_title which used in the loop
wp title figure it out what page we are visiting
<title><?php wp_title('|',true, 'right');?>
<?php bloginfo ('name');?></title>
it can also be achived by using title tag adding in functions.php
add_theme_support( 'title-tag' );
**********************
configuring footer.php
instead of hardcoding of display copyright info and name but make this dynnamic
REGARDLESS who installed the site and what year it will show the proper copyright
information
<?php bloginfo ('name');?><?php echo date ('Y');?>
***********************************************************************************
**********************************VID8
************************
creating Static Homepage and instead having this information hard coding in our
template
having it exist inside our admin area
so anyone can easily edit and update it
creating front-page.php
Open index.php and by saving as front-page.php
wordpress knows to automatically use frontpage.php template anytime you have a
static homepage set
what we want to do is the content appearing inside the Jubotron area appears and
editable from the Homepage within the Admin Area
that means in this area we have to take out this hard content insert in the loop
code
SELECT TEXT
<div class="jumbotron">
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p class="lead"> <p>This is a template for a simple marketing or informational
website. It includes a large callout called a jumbotron and three supporting pieces
of content. Use it as a starting point to create something more unique.</p>
<hr class="my-4" />
It uses utility classes for typography and spacing to space content out within the
larger container.
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more
»</a></p>
</div>
</div>
CHECK STARTER THEME FROM DESIGHN COMPANY THEY HAVE MANAGING DIFFERENT APPROACH
They make this edit from Customize section as a header Banner
so my question how i set dynamic header banner from customzie sevtion
*******************************==**************************************************
***********************************************************************************
*********VID 9
WIDGET **********
create widget area so that we can edit this through widget section from admin area
go to functions.php page
function create_widget( $name, $id, $description )
{
register_sidebar(array(
'name' => __( $name ),
'id' => $id,
'description' => __( $description ),
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
create_widget( 'Front Page Left', 'front-left', 'Displays on the left of the
homepage' );
create_widget( 'Front Page Center', 'front-center', 'Displays in the center of the
homepage' );
create_widget( 'Front Page Right', 'front-right', 'Displays on the right of the
homepage' );
create_widget( 'Page Sidebar', 'page', 'Displays on the side of pages with a
sidebar' );
create_widget( 'Blog Sidebar', 'blog', 'Displays on the side of pages in the blog
section' );
install wsywig
HOME PAGE COMPLETE
**********************************************
STAGE 2
Cretaion of Example Page and FUll Blog Section Layout
How to create a template for a Basic Page with a sidebar
save index.php as page.php file
CREATE PAGE.PHP
gutting some code removing all Jumbotron Code
Changing Grid Columns to 9:3 from 4::4::4
<?php get_header();
?>
<div class= "container pt-5 pb-5">
<!--h1>Welcome to My Websites</h1-->
<!--title--><h1><?php the_title(); ?></h1></title-->
<?php if ( have_posts() ) : while ( have_posts() )
:the_post();?>
<?php the_content()?>
<?php endwhile; endif;?>
</div>
<?php get_footer();?>
***********************************************************************************
******VID11
FULL WIDTH PAGE CUSTOMIZATION
***************
How To BUild Grid Layout Using Custom Post Types with Dynamic Coded Tmeplates
Create a Grid in the Template and Dynamic Populated With custom Post Types
Install Custom Post Types UI and Advanced Custom Fields
select CPTUI -----Create New Post Type PortFolio-----
posttype name -portfolio
singular label --Portfolio piece
Click CustomPost Type Button
Now Select Custom Fields
Add New --also Called Portfolio ---Select Add Button Field--
Feild LAbel Link --This Wiill show at the bottom of portfolio page
Style Standard WP Metabox
Display Screen Settings Select ALL except Permalink , Content Editor , Featured
Image
Sice we dont have to Create Custom Post Field we used previouly what is Existing
Location Rules
Pist Types is equalt o Portfolio
CLick Publish Button
Now Select Portfolio Piecces
And Start Adding Some Portfolio PIeces
Make At Least 8 Portfolio pieces with Images
***********
Featured Image To Work On Your Theme
Add Theme Support Via functions.php
as how we add theme support of Custom Menus
so we also do here for featured thumbnails IN FUNCTIONS.PHP FILE
add_theme_support( 'post-thumbnails' );
Refresh Page you will find Featured Image Option appears
***********
Select Image--alt text
Once you had Portfolio Pieces Entered
we need to Add Pages so crete New Page andnamed it
Portflio w Custom Posts
Insert Some Text In the Content area at the Top
and then CLick Publish
Selct Parent is equal to Example Pages and Under Template We will Going to Create
New Tempalte
Based on Full PAge WIdth so we save this page as page-portfolio.php
Edit tthe Comment Setion with
/*
Template Name: Portfolio Grid Tempalte
*/
Refresh the Admin Are Page
Slect in templae Settig Port folio Grid Template
update
Add This Page In Menus
Right Under neath Full wit Short COdes
Save Menu
Check that the Mai Content of the Page Is Displayin Properly
Now*********
we will Throughall of the Custom Posts and display Underneath
go to page-portfolio.php
we will Going to Create a New Row just php footer get Tag
<div class="row">
<?php
$args = array(
'post_type' => 'portfolio '
);
$the_query = new WP_Query( $args );
?>
<?php if ( have_posts() ) :
while ( $the_query->have_posts() ) :
$the_query->the_post(); ?>
<div class="col-sm-3 portfolio-piece">
<?php
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size',
true );
?>
<p><a href="<?php the_permalink(); ?>"><img src="<?php echo
$thumbnail_url[0]; ?>" alt="<?php the_title();?> graphic"></a></p>
<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
</div>
<?php $portfolio_count = $the_query->current_post + 1; ?>
<?php if ( $portfolio_count % 4 == 0): ?>
</div><div class="row">
<?php endif; ?>
<?php endwhile; endif; ?>
</div>
<?php
CSS Style *********
.portfolio-piece img,
.portfolio-image img
{
max-width: 100%;
}
.prev-next
{
font-size: 24px;
margin-top: 30px;
text-align: right;
margin-right: 40px;
}
@media (max-width:540px)
.portfolio-piece h4
{
font-size: .8em;
}
.prev-next
{
margin-top: 15px;
font-size: 18px;
}
}
Recheck this Video for complete Content
************************************
Each of this picture as well as th eTitle Below it Link with Specific Portfolio
page
and then we will Create Individual Page to Vie Particular Portfolio Item
Individual Creatin Port FOlio pages
remove template comment because single-portfoli.php automatically works becs of
naming convention
**********************
Theme Customizer
****************************
Custom Field
***************************
how u use PLugins on your theme make a user available when they activate the theme
**********
One page Theme Layout
Theme Internationaliztion
diffchecker code checkecomparision
