How To create a theme in WordPress we will follow the following step:-
create folder under wp-content/themes/folder
and create these files
create folder under wp-content/themes/folder
and create these files
1 Create a header.php file
</header>
2 Create a footer.php file
<footer>
</footer>
</body>
</html>
3 create index.php
<?php
get_header();
?>
<section>
</section>
<?php
get_footer();
?>
4 create style,css
define header, footer, and middle properties
5 link style.css file under header.php
<link href="<?php get_template_directory_uri(); ?>/style.css" type="text/css" rel="stylesheet" />
.........................................................................................................................................
Complete Code For Theme Development:-
header.php
......................................................
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css" />
<?php
wp_head();
?>
</head>
<body>
<header>
<div style="float:left;width:50%;">
<h1><a href="<?php echo home_url(); ?>"> <?php echo bloginfo('title'); ?></a></h1>
</div>
<div style="float:right;width: 50%;">
<?php echo wp_nav_menu(); ?>
</div>
<div style="clear: both;">
</div>
</header>
......................................................................................................................
footer.php
.................................................................................
<footer>
<?php
wp_footer();
?>
</footer>
</body>
</html>
.....................................................................................................................................
index.php
.........................................................................................................................
<?php
get_header();
?>
<section style="overflow-y: scroll;">
<?php
while ( have_posts() )
{
the_post()
?>
<p><?php the_content(); ?></p>
<?php
}
?>
</section>
<?php
get_footer();
?>
.......................................................................................................................................................
style.css
...................................................................................................................
/*
Theme Name:- My Theme;
Description:- This is the theme to be created to learn theme development ;
Author:- Shiva Gautam;
Version:1.0;
*/
*
{
margin: 0px;
}
header
{
height: 100px;
background-color: black;
color: white;
}
header ul li
{
display: block;
float:left;
margin-left: 20px;
position:relative;
}
header ul li a, li a
{
color: white;
text-decoration: none;
}
header li ul
{
display: none;
position: absolute;
}
header li:hover ul
{
display: inline-block;
margin-top:20px;
margin-left: -120px;
height:auto;
width: 8em;
}
li ul li{
clear:both;
}
section
{
height: 500px;
background-color: gray;
}
footer
{
height: 50px;
background-color: black;
}
................................................................................................
page.php:-
it is used to contain the layout of the internal web page of the WordPress application.
if page.php does not present then index.php will work for all web page layout.
.............................................................................................................................
single.php:-
It is used to contain details of a particular post, if we want to change the layout of a single post details page then we can create single.php.
if single.php then index.php will work as a post page.
...........................................................................................................................
functions.php:-
......................................................................................................................
It is used to contain menu details, widget details, dynamic function, global variables in a separate file.
functions.php only contains a set of function which can be called in any other file.
WordPress provides a predefined method
register_nav_menu(array(
'primary' => __( 'Primary Menu', 'mytheme')
) )
//wp_nav_menu(array("theme_location"=>"primary"))
for multiple menus, we can call this function multiple times.
to create a sidebar widget area that code also will be written on functions.php
register_sidebar( array(
'name' => __( 'First Sidebar', 'my theme' ),
'description' => __( 'IT IS FOR LATEST NEWS', 'my theme' ),
'id' => 'sidebar-1',
));
//dynamic_sidebar('id')
Updated page of index.php:-
<?php
get_header();
?>
<section style="overflow-y: scroll;">
<?php
while ( have_posts() )
{
the_post()
?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
<p>Author Name:-<?php the_author(); ?></p>
<p>Publish Date:- <?php the_date(); ?></p>
<p><a href="<?php the_permalink(); ?>">read more</a></p>
<hr>
<hr>
<?php
}
?>
</section>
<?php
get_footer();
?>
updated page of page.php
<?php
get_header();
?>
<section style="overflow-y: scroll;">
<div style="float:left;width: 70%;background-color: cyan;">
<?php
while ( have_posts() )
{
the_post()
?>
<p><?php the_content(); ?></p>
<?php
}
?>
</div>
<div style="float: right;width: 30%;background-color: orange">
<?php wp_nav_menu( array('theme_location' => 'sidemenu') ); ?>
<?php dynamic_sidebar('sidebar-1'); ?>
<?php dynamic_sidebar('sidebar-2'); ?>
</div>
</section>
<?php
get_footer();
?>
new page single,php
<?php
get_header();
?>
<section style="overflow-y: scroll;">
<h1>View SINGLE POST DETAILS HERE</h1>
<div style="float:left;width: 70%;background-color: red;height: 100%;">
<?php
while ( have_posts() )
{
the_post()
?>
<p><?php the_content(); ?></p>
<?php
}
?>
</div>
<div style="float: right;width: 30%;background-color: orange;height:100%;">
<h1>Latest News </h1>
<marquee direction="up">
<p> POST PAGE</p>
<p> POST PAGE</p>
<p> POST PAGE</p>
<p> POST PAGE</p>
<p> POST PAGE</p>
<p> POST PAGE</p>
<p> POST PAGE</p>
</marquee>
</div>
</section>
<?php
get_footer();
?>
new page functions.php
<?php
register_nav_menus(
array(
'primary' => __( 'Primary Menu', 'mytheme'),
) );
register_nav_menus(
array(
'secondary' => __( 'secondary Menu', 'mytheme'),
) );
register_nav_menus(
array(
'sidemenu' => __( 'side Menu', 'mytheme'),
) );
register_sidebar( array(
'name' => __( 'First Sidebar', 'my theme' ),
'description' => __( 'IT IS FOR LATEST NEWS', 'my theme' ),
'id' => 'sidebar-1',
));
register_sidebar( array(
'name' => __( 'Second Sidebar', 'my theme' ),
'description' => __( 'IT IS FOR CALENDAR', 'my theme' ),
'id' => 'sidebar-2',
));
?>
Create a Page template in theme:-
A page template is used to create an additional layout or separate content in the WordPress theme.
A page template will be added to the admin dashboard page option.
create .php file and write the following metatag
<?php
/*
template name:- Xyz
*/
?>
POST Answer of Questions and ASK to Doubt