web

several ways to build websites using premium themes page builders

Setting up local server Enviorment using xampp installation

[Link] 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

Understanding Wordpress System Files that power Wordpress

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 [Link] [Link]

[Link] responsible for telling the wordpress abt theme information
autor description

Fallback files
[Link] is the entry point of our theme

[Link] is responsible for single view of the post

[Link] is use to open a static page which is different from the post

[Link] 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 [Link] -------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 [Link]

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 [Link] file
[Link]---must be named [Link]
[Link]
[Link]
[Link]
[Link] => add comment at the top which gives info of our theme

/*
Theme Name: Datatrack WP Bootstrap Starter
Theme
Theme URI: [Link]

Author: Datatrack Theme Designs Team

Author URI: [Link]

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 [Link]

PASTE ALL YOUR STATIC CODES INTO [Link] 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 [Link] ITSELF
[Link] HEAD SECTION GOES INTO along with the Navigation which appears on every
page
[Link]

Wordpress comes with prebuilt Function here we use get_header function

<?php get_header();
//get_header() function includes in the [Link] template
pull code from [Link] file <!--Check Here get header Function -->

<?php get_footer();?>
//php get_footer() function tag includes in the [Link] file to call in the
footer
******************************************vid3
correctly load the css on the front side of a page

paste [Link] into css folder

Importing Bootstrap CSS Custom and JavaScript
css link using function .php file
create folder css

copy [Link] download file from [Link]

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 [Link] file-->
[Link]'); //handle name

add_action( 'wp_enqueue_scripts', 'theme_styles' );

wp_enqueue_style( 'style_css', get_template_directory_uri() .
'/[Link]');

?>

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 [Link]

/*Setting offset at the top*/
body {

padding-top:50px;
padding-bottom:20px;
}
this code only works when u inklude this stylesheet into [Link] 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

[Link] custom js working
to this we configure [Link] file

first we will link normally

then we will do conditionally loded when we need

linking jquery and [Link]

wordpress built in jquery load first

then [Link]

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',
'[Link] '', '', 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',
'[Link] '', '', 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/[Link]', 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

[Link] working

<?php wp_footer(); ?>// hook in and echo out to load script from [Link]
script files in the footer

function load_js() {

wp_register_script('custom_js', get_template_directory_uri() .
'/bootstrap/js/[Link]' ,'',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> mail@[Link]</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/[Link]" class="img-
responsive" /></div>
<div class="text-right fdgd"><img src="<?php
bloginfo( 'stylesheet_directory' ); ?>/assets/images/[Link]" 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/[Link]" 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="[Link]">Home</a>

</li>
<li class="nav-item">

<a class="nav-link" href="[Link]">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

[Link]---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/[Link]" 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="[Link]">Home</a></li><!-- bootstrap active class
for highlight current menu item page-->
<li ><a href="[Link]">Blog</a></li>
<li ><a href="[Link]">About</a></li>
<li ><a href="[Link]">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 [Link] 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 [Link] 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/[Link]" 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 [Link] 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 [Link] 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 [Link] 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/[Link]">
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 [Link]

add_theme_support( 'title-tag' );

**********************
configuring [Link]
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 [Link]
Open [Link] and by saving as [Link]

wordpress knows to automatically use [Link] 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
&raquo;</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 [Link] 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 [Link] as [Link] file
CREATE [Link]
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 [Link]
as how we add theme support of Custom Menus

so we also do here for featured thumbnails IN [Link] 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 [Link]

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 [Link]

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 [Link] 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

***********************************************PHP
TUTORIAL*******************************
php server side languages front end user not arware of backend operations they just
see the end results

required dedicated code editor program for writing php codes

php opening tag begins php mode

less than symbol question mark
<php echo

//In Between those Tags we insert php Codes such as echo whihc print data on screen
//we can equate equations example 2+2
//we can talk to database
// rezie emails
// send out emails

<h1>Hello I am H1 Tag</h1>
<h2>Hello I am H2 Tag</h2>

question mark greater than symbol

php closing tag end php mode

?>

you can drop in php mode and drop out php mode using this opening and closing php
tags

anywhere in the file

variables or placeholders for dynamic programming which is not possible in regular

HTML
starting with$symbol followed by name of a variable than equalto symbol and the
value of a variable
value may be string numbers
end with semicolon

retates a kind of sticky notes in computer memory

you can use this variable php opening and closing tag with variables for dynamicall
effect anwhere in the file

semicolon tell php that we are done with tasks

fuctions in php how to create and call the function

type php opening tag then using the function followed by name of a
without any sapce just opened a opening and closing parenthesis
after that pair of curly braces same curly braces which we use in css stylesheet

in between two curly braces drop the new line to stay organised
write a simle function code definition task which simply adds two numbers and
outputting on the screen
put semicolon at the end of the stmt to end the task
but to execute run or use the function definition
you have to call the function definition outside the curly braces
but before the closing php tags
with its function names followed by parenthesis and semi colon makes php knows
that we done

you can used functio many times in the file by just calling the function name to
execute the whole code recipe
without writing code again

<?php

function addnumbers(){

echo 2+2;

}
addnumbers();

?>

Task1
echo out string of text

<?php

function printtext(){

echo "<p>Hello, This is my First Paragraph</p>";

}
printtext();
?>

Task2

create a function which create a paragrah with different colors with a different
author text

Add the parameters in function header parenthesis by creating avariable inside

parenthesis

jund with semi colon

<?php

function greet($name, $color){

echo "<p>My Name is $name and my Favourite Color is $color </p>";

}
greet('john', 'blue');
greet('jane','green');
?>

Task 3

print Large text of Website Title using the wordpress prebuilt function

bloginfo() which is developed by wordpress to provides info here we only ony know
title of our websites

syntax
<h1><?php bloginfo('name'); ?></h1>

so you have to remeber wordpresss function at your disposal and running them at the
righ place at the right time

Task4
Dynaimcally output Slogan or Tagline paragraph of or Wordpress site

<p><?php bloginfo('description'); ?></p>

Arrays
is a collection of mutiple values

multiple data in a single Variable thats what array comes in to the picture
start using the keyword array with openin and closing parenthesis
inside it you can store data seperated by commas
end with semicolon before closing php tags

Examples
<?php
$names= array('Brad','john','jane','Meowsalot');
?>

Access Data from Arrays or look into arrays we use square bracket and pass posiiton
value

ararys is zero based meaninf first item is zero instead of one

<p>Hi! my name is <?php echo $names [0]; ?></p>

Loops into an Array data

Basic Looping using while loop

start using keyword while with parenthesis

followed by curly braces

How does the while loop works

it will continue to loop around until we provide parameters
between the parenthesis until to make it false

Task
Example output a bulletes list of numbers

// create a variable
$count =1;
//inside parenthesis we set the condition
as long as following thing is true keep looping until it becames false

incremnt by one with the next numbers $count++;

<?php
$myName='Shahid'

?>
<p>Hi! my name is <?php echo $myName; ?></p>

<?php
$names= array('Brad','john','jane','Meowsalot');

?>

<p>Hi! my name is <?php echo $names[0]; ?></p>

<?php
$numbers= array('This is the number from ');

?>
<p> <?php echo $numbers[0]; ?></p>
<?php

$count =1;
while($count <101){
echo "<li>$count</li>";
$count++;

}
?>

<?php

$names= array('Brad','john','jane','Meowsalot');

$count =0;

while($count < count ($names)) {

echo "<li> Hello! My Name is $names[$count] </li>";

$count++;

?>

Wordpress uses while loop to looping through blog posts to display over the pages

Switch to Classic Editor activate classic editor plugins by wordpress contributors

using php code for

Wordpress Loop

Task
Output recent Blog Post over HOmePage

Make sure you have more than one Blog Post to wrok with

click post you have right now single hello world demo post

cretae tow more dummy posts and publish it

<?php

while(have_posts()) {
the_post(); ?>
<h2>Hello</h2>
<?php
}

?>

<?php

while(have_posts()) {
the_post(); ?>
<h2><?php the_title();?></h2>
<?php

?>

*********
<?php

while(have_posts()) {
the_post(); ?>
<h2><?php the_title();?></h2>
<?php the_content();?>
<hr>
<?php

?>

turn the Headline title into link

*************************
<?php

while(have_posts()) {
the_post(); ?>
<h2><a href ="<?php the_permalink();?>"><?php the_title();?></a></h2>
<?php the_content();?>
<hr>
<?php

?>
*************
reamin a link of the post in homepage but after visiting the link on the displayed
screen of that link
its no longer remains the link

create a new file [Link] controlposts

<?php
 while(have_posts()) {
the_post(); ?>
<h2><?php the_title();?></h2>
<?php the_content();?>

<?php

?>

****************************

[Link] control pages

***************************************
wordpress pages

you can click the permalink to preview the pages

**********************
Create Global Header and Footer

Header area to appear on the Every pageof the website

Same for footer

if you content to want at the top and and the bottom of the pages
since [Link] doesnt power every page on the website
so we have to create [Link] and [Link]
and we pull the content from their using
get_header and
get_footer wprdpress function
*****************************
<?php get_header() ;
while(have_posts()) {
the_post(); ?>
<h2><a href ="<?php the_permalink();?>"><?php the_title();?></a></h2>
<?php the_content();?>
 <hr>

<?php } get_footer(); ?>

**************************
<?php

while(have_posts()) {
the_post();

?>

<h2><a href ="<?php the_permalink();?>"><?php the_title();?></a></h2>

<?php the_content();?>

<hr>

<?php } get_footer(); ?>

**************************
add this tag in [Link] and [Link] file

********
Load CSS

How to load CSS file on the Front end of our site

How to show add adminbar Globally to show on the front site when we are sighned in

<?php

function amazing_university_files(){

wp_enqueue_style('amazing_university_main_styles', get_stylesheet_uri());

add_action('wp_enqueue_scripts','amazing_university_files');

?>
******************
admin bar

Converting Static into Wordpress freindly

***********
Cache clearance using developer tool in chrome browser

interior pagetemplate

*********************HTML TUTORIAL**********************
in head section we load css files by refrencing them using
link tag but in wordpress we usr wp_head function
programtically loiad css by creatin hook in [Link] file
making wordpress to control our head function

<head></head>
Headng Level 1 elementTag
<h1>Hello I am H1 Tag</h1>
Headng Level 2 elementTag
<h2>Hello I am H2 Tag</h2>

HTML Paragraph Tag

<p> </p>

html list items

<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>

Visual Seperator Horizontol Lines

<hr>

turn the Headline title into link

wrap the content into a tags

so right before the title
open up html a tag
and right after the title outputs closing a tag
along with href attributes for destination url to help browser to go
under the quotes of href
function wordpress the_permalink
<a href ="the_permalink()"><?php the_title();?></a>

*****************************CSS Tutorial************************************
/* target entire page text color to be orange
body {

color:orange;