Custom Page in WordPress

Custom Page WordPress : Have you ever create a custom page in WordPress ? If not then Today I will explain you how to create a custom page in the worpress.

As we know WordPress allow us to create post and pages . For custom page you must have a little bit knowledge of html or bootstrap, css and PHP

Creating a Custom Page in WordPress

create a file in notepad and give it extension .php

  • I create custom.php
  • Open the file and paste this code <?php /* Template Name: Custom */ ?>
  • Upload this file wp-content/themes/ directory
  • Login to wp-admin
  • Go to Add new page
  • On the Right Side under Page Attributes you will see Template choose Custom from that drop down and publish

custom page wordpress

In this way you can create a custom template in the wordpress

Editing Custom Page

As we know there should be same header and footer of the website. Steps to Include header and footer in Custom Template

open custom.php

<?php /* Template Name: Custom */ ?>
<?php get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<!-- custom code here -->
</main>
</div><!-- content-area -->

<?php get_footer(); ?>

In this way you can edit the template

If you like this post please subscribe to Technologies Axis

xml

xml

I heard about XML 7-8 years ago when I started doing web development. I remember when I tried to learn it for the first time I never understood anything about it but Later when I worked on some web services then I came to know what XML is all about.  Here I am trying to explain very basic of XML and how to parse XML in PHP.  If you are a Fresher then you are at a write place to learn about XML. XML full form is Extensible Markup Language. it is use to transport data and it is both  human- and machine-readable. In XML we can create user defined tags. XML Make things simple such as data sharing, data transport, platform changes and data availability. EG: For Mobile app data between Mobile and Database is transported through the XML or JSON.  I will write a Post for JSON as well.

Well Formed XML Documents must have

  • Root element
  • Closing tag
  • Tags are case sensitive
  • XML elements must be properly nested
  • XML attribute values must be quoted

XML Example

<?xml version='1.0'?> 
<companyxml> 
<company> 
<name>Technologies Axis</name> 
<city>pickering</city> 
<phone>647-575-9815</phone> 
</company> 
<company> 
<name>Technologies Axis</name>
 <city>phagwara</city> 
<phone>98158-81165</phone> 
</company> 
</companyxml> 
i saved a file as technologiesaxis.xml

Here you can see user defined tags. Now a days XML is playing an important role. Every Web developer must be familiar with the XML.

Now You will learn how to parse it in PHP

<?php
 $companyInfo = simplexml_load_file('technologiesaxis.xml');
 foreach ($companyInfo as $company) {
 echo $title=$company->name." - ".$company->city." - ".$company->phone."<br/>"; 
 } 
?>
output :
Technologies Axis - Pickering - 647-575-9815
Technologies Axis - Phagwara - 98158-81165
simplexml_load_file() is a magical function available in PHP. In this you you can get the data from the xml. 
There is lot more available in XML. I am trying to give you the basic example of xml. I hope it will be helpful. In next coming days
I will try to explain more about xml by creating a web service for the mobile.
Source

Read More

 

 

sql joins

If you want to be a developer then you must be aware about sql joins. This is really important. Well joins are use to create a relation between two or more tables. I created two tables “Customers” and “Orders”

Customers

sql joins

 

 

 

 

 

 

 

The above table shows Customers detail

Orders

orders

 

 

 

 

 

 

 

The above table shows orders detail

Inner Join

select C.name,C.email,O.id,O.order_date from customers C join orders O on O.customer_id = C.id “

here i created alias “C” for customers and alias “O” for orders and i joined them through O.customer_id = C.id . The result will be

inner join

 

 

 

 

 

 

It got detail for all customers who’s Customer Id available in orders table. You don’ see records of  parmod and dicky because id 5,6 not available in orders table

Left Join

select C.name,C.email,O.id,O.order_date from customers C left join orders O on O.customer_id = C.id

 

 

 

 

 

 

 

look at the difference with left join here you can see records of parmod and dicky but id and order_date is null . It will fetch records of left table

Right Join

select C.name,C.email,O.id,O.order_date from orders O right join customers C on O.customer_id = C.id

right

 

 

 

 

 

 

 

Right join is similar to left join . look at the query difference.

Inner joins are really important. There is 90% use of inner joins in almost every big projects. Joins are really important when you are going for interview. You must read this Tutorial before going for interview.

 

 

bootstrap

Bootstrap

Bootstrap is very popular framework now a days for developing responsive websites. It is free to download http://getbootstrap.com/

Bootstrap includes forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. It is compatible with all modern browsers such as Chrome, Firefox, Internet Explorer, Safari, and Opera

My First Bootstrap page

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Technologies Axis Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
</head>
<body>
<div class=”container”>
<h1>Technologies Axis Bootstrap Page</h1>
<p>Complete web solution company</p>
</div>
</body>
</html>

Some main Classes used in bootstrap

.container :- for responsive fixed width container
.container-fluid :- for responsive full width container

In above example I showed “container” class you can try with “container-fluid” class as well you just need to change this text ‘<div class=”container”>’ to ‘<div class=”container-fluid”>’ (Line 12)

In this way you will come to know the difference between these two classes

Bootstrap Grid System

Bootstrap grid system is really simple. It is divided into 12 columns

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Technologies Axis Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
</head>
<body>
<div class=”container”>
<div class=”row”>
<div class=”col-md-12″>
<div class=”col-md-4″>Column 1</div>
<div class=”col-md-4″>Column 2</div>
<div class=”col-md-4″>Column 3</div>
</div>
</div>
<div class=”row”>
<div class=”col-md-12″>
<div class=”col-md-3″>Column 1</div>
<div class=”col-md-3″>Column 2</div>
<div class=”col-md-3″>Column 3</div>
<div class=”col-md-3″>Column 4</div>
</div>
</div>
<div class=”row”>
<div class=”col-md-12″>
<div class=”col-md-2″>Column 1</div>
<div class=”col-md-2″>Column 2</div>
<div class=”col-md-2″>Column 3</div>
<div class=”col-md-2″>Column 4</div>
<div class=”col-md-2″>Column 5</div>
<div class=”col-md-2″>Column 6</div>
</div>
</div>
</div>
</body>
</html>

  • (1-12) depict a portion of the total width of any div
  • dives divided into 12 columns
  • we include two col-md-6 in col-md-12

<div class=”col-md-12″>
<div class=”col-md-6″>Column 1</div>
<div class=”col-md-6″>Column 2</div>
</div>

here class col-md-6 will automatically takes the half width

If you worked according to this it will automatically adjust in all the devices such as desktop, Mobile, Tab etc

Default sizes for heading

We use h1,h2,h3,h4,h5,h6 tags for heading.

h1 Technologies Axis (36px)

h2 Technologies Axis (30px)

h3 Technologies Axis (24px)

h4 Technologies Axis (18px)

h5 Technologies Axis (14px)
h6 Technologies Axis (12px)

It will automatically adjust on all the devices

Bootstrap Tables

As we know Tables consists of rows and columns. Lets check how to implement responsive tables in bootstrap. Here is the code

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
</head>
<body>

<div class=”container”>
<h2>Technologies Axis Table</h2>
<div class=”table-responsive”>
<table class=”table”>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sandeep Verma</td>
<td>sandeep_verma1985@yahoo.com</td>
<td>647-575-9815</td>
</tr>
</tbody>
</table>
</div>
</div>

</body>
</html>

You just need to add class “table-responsive” to make the tables responsive

Responsive images

<img class=”img-responsive” src=”…..” alt=”Technologies Axis”> to make the image responsive you just need to add “img-responsive” class

Image in the center of div

<img class=”img-responsive center-block” src=”…..” alt=”Technologies Axis”> to place image in the center you just need to add “center-block” class

Image Circle

img-circle

Image Rounded Corner

img-rounded

Thumbnail

img-thumbnail

Bootstrap Alerts

<div class=”alert alert-success”>
<strong>Success!</strong> Technologies Axis Success
</div>
<div class=”alert alert-info”>
<strong>Info!</strong> Technologies Axis Success Info
</div>
<div class=”alert alert-warning”>
<strong>Warning!</strong> Technologies Axis Warning
</div>
<div class=”alert alert-danger”>
<strong>Danger!</strong> Technologies Axis Danger
</div>

You just need to show divs according to the message

So this is the basic functionality of bootstrap. If you want to read in detail then click here

Real ALL

 

php

Send Email From Localhost PHP

send mail from your localhost php : Almost every web project contains email functionality and PHP mailer class provide a functionality of sending emails through local machine. Emails must be tested properly before the project go live. you can send text emails and html emails through this class. click here to download 

After downloading just perform following steps:

  • Place ‘PHPMailer’ in your project.
  • Include(‘PHPMailer/class.phpmailer.php’) in your file where you want to send email
  • I create a sendemail() function here is the code

function sendmail($sTo,$sFrom,$sSubject,$sMsg)
{
$logo = “”; //logo path
$html_msg= <<<END
<html>
<head></head>
<body>
<table width=’640′ cellpadding=’3′ cellspacing=’0′ align=”center” >
<tr>
<td><img src=’$logo’ width=’150′></td>
</tr>
<tr>
<td style=’padding:2px;padding-top:5px’>
$sMsg
</td>
</tr>
</table>
</body>
</html>
END;

$mail = new PHPMailer; //instance created
$mail->isSMTP();
$mail->Host = ‘smtp.gmail.com’; // Specify main and backup SMTP servers
$mail->SMTPAuth = true; // Enable SMTP authentication
$mail->Username = ‘*******’; // SMTP username
$mail->Password = ‘*******’; // SMTP password
$mail->SMTPSecure = ‘tls’; // Enable TLS encryption, `ssl` also accepted
$mail->Port = 587;

$mail->setFrom($sFrom, “The Technologies Axis”);

$mail->addAddress($sTo); // Add a recipient

$mail->isHTML(true); // Set email format to HTML
$mail->Subject = $sSubject;
$mail->Body = $html_msg;

if(!$mail->send()) {
echo ‘Message could not be sent.’;
echo ‘Mailer Error: ‘ . $mail->ErrorInfo;exit;
} else {
echo ‘Message has been sent’;exit;
}

}

you just need to call function wherever you want like this :
$to = “info@technologiesaxis.com”;
$from = “sandeep_verma1985@yahoo.com”;
$subject = “Technologies Axis Email Testing”;
$msg = “this is message”;
sendmail($to,$from,$subject,$msg);

So here we are sending 4 parameters to function $to,$from,$subject,$msg . I guess should be clear what these parameters are all about. If you face any difficulty in understanding it you can comment on this post

On the above function i am using Gmail SMTP. So you have  change account access for less secure apps. You need to follow the following steps as well :

This is enough now you can send emails through local machine

Sending Attachment in Email

You can also send attachments through this class you just need to add this code

$mail->addAttachment('pathtofile');

you just need to give path and that file will be attached to the email.
Detect Mobile Browser jquery

Detect Mobile Browser in jquery

Detect Mobile Browser jquery : Its really simple to check whether user viewing website on mobile or desktop. You just need to download “detectmobilebrowser.js” file and include on your page.

Click here to download

Now click on jquery  ‘detectmobilebrowser.js.txt’ will be downloaded

Now remove .txt and place a file in your project

now include detectmobilebrowser.js in your page like this :
<script src=”js/detectmobilebrowser.js”></script>

<script>
$(document).ready(function(){
if(jQuery.browser.mobile)
{
alert(‘You are using a mobile device!’);
}
else
{
alert(‘You are not using a mobile device!’);
}
});
</script>

In this way you will come to know its a mobile device or not

 

Detect IPAD

var isThisiPad = /ipad/i.test(navigator.userAgent.toLowerCase());
if (isThisiPad)
{
  alert("this is ipad");
}

Detect Iphone

var isThisiPhone = /iphone/i.test(navigator.userAgent.toLowerCase());
if (isThisiPhone)
{
  alert("This is Iphone");
}
Detect Ipod

var isThisiPod = /ipod/i.test(navigator.userAgent.toLowerCase());
if (isThisiPod)
{
  alert(This is Ipod)
}
Detect Android

var isThisAndroid = /android/i.test(navigator.userAgent.toLowerCase());

if (isThisAndroid)
{
  alert("This is Android")
}

Detect Blackberry

var isThisBlackBerry = /blackberry/i.test(navigator.userAgent.toLowerCase());

if (isThisBlackBerry)
{
  alert("This is Blackberry")
}
Detect Window Phone

var isThisWindowsPhone = /windows phone/i.test(navigator.userAgent.toLowerCase());

if (isThisWindowsPhone)
{
  alert("This is window phone")
}
So with the same detectmobilebrowser.js you can detect everything such as window phone, android, Iphone, Blackberry etc
You can test it and ask me if you are having any query about the same

CRUD

CRUD is a very common task in web development and CRUD stands for Create/Read/Update/Delete. If you are a fresher then this is very important post for you. Because CRUD is use in almost every dynamic project. In My Previous Tutorial you read about database connectivity. If you did not read yet click here

I create technologies-axis database in phpmyadmin and create table subjects

—————————————————————————————————————————-

— Table structure for table `subjects`

CREATE TABLE `subjects` (
`id` int(11) NOT NULL,
`subject` varchar(200) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


— Indexes for dumped tables


— Indexes for table `subjects`

ALTER TABLE `subjects`
ADD PRIMARY KEY (`id`);


— AUTO_INCREMENT for dumped tables


— AUTO_INCREMENT for table `subjects`

ALTER TABLE `subjects`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

query for fetching data from “subjects table”

———————————————————————————————————————————————————————————-
Fetch rows from database
<table>
<tr><td>ID</td><td>Subject</td></tr>

<?php
$query = “select * from training_subjects order by id desc”;
$query = mysqli_query($connect,$query) or die(“err”.mysqli_error());
if(mysqli_num_rows($query) > 0)
{
while($row=mysqli_fetch_array($query))
{
?>
<tr><td><?php echo $row[‘id’] ?></td><td><?php echo $row[‘subject’] ?></td></tr>
<?php
}
}
?>
</table>crud

Insert Data

Crud

on button click event run following query
$query = “INSERT INTO `subjects` (`id`, `subject`) VALUES (NULL, ‘”.textboval.”‘)”;
mysqli_query($connect,$query) or die(“err”.mysqli_error());

Update Data
$query = “UPDATE `subjects` SET `subject` = ‘”.textboval.”‘ WHERE `subjects`.`id` = 1“;
mysqli_query($connect,$query) or die(“err”.mysqli_error());

Delete Data
$query = “Delete from `subjects` where`id` = 1“;
mysqli_query($connect,$query) or die(“err”.mysqli_error());

You just need to pass query to mysqli_query() Function and all add,update,delete tasks can be performed.
I hope this tutorial will help you a lot. Comment me if you have any query

connection with mysql in PHP

connection with mysql PHP

connection with mysql PHP

What is Database(DB)?
In a nutshell DB is a Collection of information organized in tables and Tables are collection or rows and columns.

Mysql is open source RDBMS(Relational Database management system). Mysql and PHP Compatibility is really good. I will explain how to do connectivity between PHP and MySql

In my previous lecture I installed Xampp on my local system. If you not read it then click here

when xampp is installed you need to type localhost/phpmyadmin in the browser

  • click on databases on top
  • type “technologies-axis” (you can give any name to database)

Now database is created its time to connect with the php here is a code

<?php
$host =”localhost”;
$user = “root”;
$password = “”; (Password is blank on localhost)
$databaseName = “technologies-axis”;
$connect = mysqli_connect($host, $user,$password, $databaseName);
if (!$connect) {

die(“Connection failed: ” . mysqli_connect_error());
}
echo “Connected successfully”;

mysqli_close($connect); here i am closing the connection
?>

This is the simplest way i explained to connect php with the mysql. In the next lecture i will explain add/update/delete queries click here

 

xampp

xampp

Many people have their own expoerience. Some says its very hard to install xampp and some says its really difficult to install xampp. My experience is it is very easy to install xampp. After reading this post you can easily install xampp on your local machine. It hardly takes 15 minutes.

Xampp is a personal web-server. Suppose you want to run website on local then you have to install xampp on your system

you can install xampp through this link https://www.apachefriends.org/index.html

after downloading xampp you can install it in any drive.

after installation of xampp

lets suppose you install it in “D://” you will see xampp folder in D drive

suppose you want to create your first project then you have to create folder of your project in D://xampp/htdocs/technologies-axis

“technologies-axis” is your project folder

now in this folder place one file index.php and you can write php code here

after saving it you can run it on browser like “localhost/technologies-axis”

in this way personal web server is installed on your system and you can start web designing.

for php go to php post click here

for connectivity between php and mysql you should read my this post. click here

In the above explanation I explained you how to configure xampp on local machine. You should try it on your local machine and if you face any issue you can comment under this post.

Founders of Apache:

Oswald was one of the original co-founders of Apache Friends. He graduated 1999 from Technical University of Berlin with a Diplom-Informatiker degree (equivalent to a Master in Computer Science). In the 90’s he created and managed Germany’s biggest IRCnet server irc.fu-berlin.de, and co-managed one of the world’s largest anonymous FTP server ftp.cs.tu-berlin.de. From 1993 until 1998 he was member of the internationally renowned “Projektgruppe Kulturraum Internet”, a Berlin-based research project on net culture and network organization. In 2006, his third book, Das XAMPP-Handbuch, was published by Addison Wesley. From 2009 to 2011, he served as Technology Evangelist for Web Tier Products at Sun Microsystems/Oracle.

ogether with Oswald, Kay co-founded the Apache Friends project in 2002. He currently works as freelance System Engineer and wrote several books about web technologies like Apache, MySQL and XAMPP itself.

php

PHP

Well you already have read a lot about PHP on internet. As we know php a programming language that helpful in development of dynamic websites.

There are two kind of websites such as static and dynamic websites

Static website : Here the user(Client) can-not change the content of website. Before Year 2000 there were mostly static websites and let suppose user(Client) wants to change some contact information such as phone no. then client had to contact the company(who build his website) to change the contact information and company might charged him for updating the information.

Dynamic Website : Dynamic website means user can change the content himself. Its a database driven websites where data is saved into database. So user got Admin panel to manage the content of website. WordPress is the best example of dynamic websites.

Technologies Axis Php Example

<!DOCTYPE html>
<html>
<body>
<?php
echo “Technologies Axis”;
?>

</body>
</html>

When you run it on local machine it will show “Technologies Axis” on Browser

php

Before doing this you must also familiar about Xampp you can check my Xampp tutorial click here