التخطي إلى المحتوى الرئيسي

How to create theme in wordpress application by scratch

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 Answer of Questions and ASK to Doubt

المشاركات الشائعة من هذه المدونة

Uncontrolled form input in React-JS

  Uncontrolled form input in React-JS? If we want to take input from users without any separate event handling then we can uncontrolled the data binding technique. The uncontrolled input is similar to the traditional HTML form inputs. The DOM itself handles the form data. Here, the HTML elements maintain their own state that will be updated when the input value changes. To write an uncontrolled component, you need to use a ref to get form values from the DOM. In other words, there is no need to write an event handler for every state update. You can use a ref to access the input field value of the form from the DOM. Example of Uncontrolled Form Input:- import React from "react" ; export class Info extends React . Component {     constructor ( props )     {         super ( props );         this . fun = this . fun . bind ( this ); //event method binding         this . input = React . createRef ();...
إرسال تعليق
قراءة المزيد

JSP Page design using Internal CSS

  JSP is used to design the user interface of an application, CSS is used to provide set of properties. Jsp provide proper page template to create user interface of dynamic web application. We can write CSS using three different ways 1)  inline CSS:-   we will write CSS tag under HTML elements <div style="width:200px; height:100px; background-color:green;"></div> 2)  Internal CSS:-  we will write CSS under <style> block. <style type="text/css"> #abc { width:200px;  height:100px;  background-color:green; } </style> <div id="abc"></div> 3) External CSS:-  we will write CSS to create a separate file and link it into HTML Web pages. create a separate file and named it style.css #abc { width:200px;  height:100px;  background-color:green; } go into Jsp page and link style.css <link href="style.css"  type="text/css" rel="stylesheet"   /> <div id="abc"> </div> Exam...
إرسال تعليق
قراءة المزيد

JDBC using JSP and Servlet

JDBC means Java Database Connectivity ,It is intermediates from Application to database. JDBC has different type of divers and provides to communicate from database server. JDBC contain four different type of approach to communicate with Database Type 1:- JDBC-ODBC Driver Type2:- JDBC Vendor specific Type3 :- JDBC Network Specific Type4:- JDBC Client-Server based Driver  or JAVA thin driver:- Mostly we prefer Type 4 type of Driver to communicate with database server. Step for JDBC:- 1  Create Database using MYSQL ,ORACLE ,MS-SQL or any other database 2   Create Table using database server 3   Create Form according to database table 4  Submit Form and get form data into servlet 5  write JDBC Code:-     5.1)   import package    import java.sql.*     5.2)  Add JDBC Driver according to database ide tools     5.3)  call driver in program         ...
4 تعليقات
قراءة المزيد