Java, .NET, PHP, PYTHON, ANGULAR, .NET, ML, Data Scince, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

How To create a theme in WordPress we will follow the following step:-

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 a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post