How to create a WordPress theme?

1. Each theme for WordPress has its design. For this purpose we create two files. The first file is said index.html, and the second – style.css. The file that says index.html, presented the following code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>WordPress Theme</title >
<link rel="stylesheet" type="text/css" media="all" href="style.css">
</head>
<body>
<header>
<h1>My First WordPress Theme</h1>
<p>SEO Title</p>
<div class="clr"></div>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</nav>
<div class="clr"></div>
</header>
<div class="clr"></div>
<div id="main">
<section>
<article>
<h1>Article Title</h1>
Dynamic part
</article>
</section>
<aside>
<ul>
<li>Sidebar Content</li>
</ul>
</aside>
</div>
<div class="clr"></div>
<footer>
Copyright
</footer>
</body>
</html>

 

2. The second file that is absolutely essential, says style.css. In the code below you can familiarize yourself with the model content of the file style.css.

body {
color: #2b2b2b;
margin: 0 auto;
padding: 0;
max-width: 980px;
}
header {
border: 1px solid #ddd;
width: 100%;
height: 100%;
}
header h1 {
border: 1px solid #ddd;
max-width: 47%;
float: left;
padding:10px;
margin: 10px;
}
header p {
float: right;
border: 1px solid #ddd;
max-width: 47%;
padding: 10px;
margin: 10px;
}
nav {
border: 1px solid #ddd;
line-height: 40px;
max-width: 100%;
margin-top: 20px;
max-width: 980px;
}
nav ul {
border: 1px solid #ddd;
height: 40px;
padding:0;
margin: 0;
max-width: 980px;
}
nav ul li {
border: 1px solid #ddd;
list-style-type: none;
float: left;
line-height: 40px;
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
max-width: 100%;
}
nav ul li:hover {
background: red;
}
section {
border: 1px solid #ddd;
float: right;
width: 70%;
padding: 10px;
margin: 10px;
word-wrap:break-word;
}
#main {
border: 1px solid #ddd;
width: 100%;
height: 100%;
display: inline-block;
}
aside {
border: 1px solid #ddd;
float: left;
max-width: 19%;
padding: 10px;
margin: 10px;
word-wrap:break-word;
}
aside ul, aside li {
list-style-type: none;
margin:0;
padding: 0;
}
footer {
border: 1px solid #ddd;
text-align: center;
padding: 10px;
}
.clr {
clear: both;
padding: 0;
margin: 0;
width: 100%;
height: 0;
line-height: 0px;
font-size: 0px;
border: none;
}
@media screen and (max-width: 300px) {
nav, nav ul, nav li{
float: none;
min-width: 300px;
margin: 0 auto;
}
}
@media screen and (max-width: 800px) {
section{
float: none;
margin: 0 auto;
padding: 10px;
}
aside{
float: none;
min-width: 200px;
margin: 0 auto;
}
}
@media screen and (max-width: 980px) {
header p, header h1{
float: none;
min-width: 200px;
margin: 0 auto;
}
}

 

3.Both files and style.css index.html now form our sample page. Now we must create four new files – index.php, header.php, sidebar.php, footer.php. We will create and file functions.php. See five examples below.

File index.php

<?php get_header();?>
<div id="main">
<section>
<article>
<h1>Article Title</h1>
Content
</article>
</section>
<?php get_sidebar();?>
<?php get_footer();?>

File header.php

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>WordPress Theme</title >
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
<header>
<h1>My First WordPress Theme</h1>
<p>SEO content</p>
<div class="clr"></div>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</nav>
</header>
<div class="clr"></div>

File sidebar.php

<aside>
<ul>
<li>Sidebar Content</li>
</ul>
</aside>
</div>

File footer.php

<?php
/**
* The template for displaying the footer
*/
?>
<div class="clr"></div>
<footer>
Copyright
</footer>
</body>
</html>

File functions.php

It remains empty.

Then add the following code at the beginning of the file style.css, before everything else and put already changed style.css file in the folder with the other five files that we created earlier. With the code that you see below and we raised at the beginning of our style.css file, we asked ourselves the title of our theme. Also recorded information about the author, description of the theme and Internet address to the theme.

/*
Theme Name: WordPress Theme
Theme URI: http://wp-top.org/
Description: WordPress Theme
Author: wp-top.org
*/

Then we make another change in our file header.php, as a way to replace our css universal php function that uses WP. So automatically WP for us is the path to the file style.css. Here’s the code in header.php:

 

<?php bloginfo ('stylesheet_url');?>

Now your header.php file looks like this:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title >WordPress Theme</title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo ('stylesheet_url');?>" />
</head>
<body>
<header>
<h1>My First WordPress Theme</h1>
<p>SEO Content</p>
<div class="clr"></div>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</nav>
</header>
<div class="clr"></div>

Create a folder that named of our theme and contains currently in itself listed below files:

Folder

In header.php file put the following code in the head section of HTML5 document. We use the editor, which is located in WP and allows us to see the code of the pages and to change it.
Insert the code above the end of the head portion after all other elements
<?php wp_head(); ?>

We should be put in the same way the code below in our file footer.php, immediately before the tag body:

 

<?php wp_footer(); ?>

Function to start the dynamic part:

<?php
if(have_posts()):
while (have_posts()):
the_post();
?>

This marks the end of the dynamic part:

<?php
endwhile;
endif;
?>

To declare the title, h1 tag in place following php function:

<?php the_title(); ?>

To declare the content in the article tag remove excess information that we have introduced, and put the following php function:

<?php the_content();?>

Here are the aforementioned functions when placed already in your index.php:

 

<?php get_header();?>
<div id="main">
<section>
<?php if(have_posts()) : while (have_posts()) : the_post(); ?>
<article>
<h1><?php the_title(); ?></h1>
<?php the_content();?>
</article>
<?php endwhile; endif; ?>
</section>
<?php get_sidebar();?>
<?php get_footer();?>

Leave a Reply

Your email address will not be published. Required fields are marked *