What is WordPress theme?
Also recomended to read: WordPress and XAMPP installation guide, Create website with WordPress
To understand what Divine Elemente is and how it works, we’ll consider what a general WordPress CMS theme consists of exactly (and what Divine Elemente converts your amazing PSD template to).
WordPress theme files
Let’s take a simple WordPress theme as an example that consists of a Header, Sidebar, Content area and Footer. You can find the following files in this theme’s folder:- index.php – it’s the main file of a theme. It contains a code of the ‘Main Area’ and specifies, what other files are included in;
- header.php – it contains the code for the ‘Header’ section of the theme;
- sidebar.php – it contains information about the Sidebar;
- footer.php – it handles your Footer;
- style.css – it handles the styling of your new theme;
Now, let’s consider each file in details.
<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr/>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter"></div>
<?php get_footer(); ?>
Index.php code
The code in this file begins with <?php get_header(); ?>, which includes the header.php file and the code on the main page. Internal WordPress function is used to do that. We’ll come back to this in details later.
The following few lines consist of a PHP code and standard WordPress functionality. This code checks, if a blog is filled up with posts via WordPress administrative area and displays them.
Then you’ll find the following line is <?php get_sidebar(); ?>, which includes the sidebar.php file. Post categories, archives, etc. can be displayed in this file.
And the last line is <?php get_footer(); ?>, which includes the footer.php file.
The “Header.php” file
There is the following code in the header.php:<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet"
href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER</h1>
</div>
Header.php code
This is a simple HTML code with a single line, containing a php code and a standard WordPress function. In this file, meta tags can be specified, such as the title of a website, meta description and keywords for the web page.
The next code’s line (after <title>) is:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
Include stylesheet
It tells WordPress to load a .css file and handles the styling of a website.
The <?php bloginfo(’stylesheet_url’); ?> part of the line is a WordPress function that actually loads the stylesheet file.
A simple label HEADER, wrapped in a “div” with class “header”, specified in the stylesheet file is considered below.
The “Sidebar.php” file
There is the following code in the sidebar.php:<div id="sidebar">
<h2 class="sidebartitle"><?php _e('Categories'); ?></h2>
<ul class="list-cat">
<?php wp_list_cats
('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2 class="sidebartitle"><?php _e('Archives'); ?></h2>
<ul class="list-archives">
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
Sidebar.php code
In this file, internal WordPress functions are used to display the categories and archives of posts. The WordPress function brings them back as items of the list, therefore they have been placed with the actual functions in unsorted lists (the <ul > tags).
The “Footer.php” file
There is the following code in the footer.php:<div id="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
Footer.php code
As you can see, a simple FOOTER label was added to the ‘Footer’ grid block. In other cases here can be added links, additional text, the copyright information for the theme, etc.
The “Style.css” file
There is the following code in the style.css:body {
text-align: center;
}
#wrapper {
display: block;
border: 1px #a2a2a2 solid;
width:90%;
margin:0px auto;
}
#header {
border: 2px #a2a2a2 solid;
}
#content {
width: 75%;
border: 2px #a2a2a2 solid;
float: left;
}
#sidebar {
width: 23%;
border: 2px #a2a2a2 solid;
float: right;
}
#delimiter {
clear: both;
}
#footer {
border: 2px #a2a2a2 solid;
}
.title {
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}
Style.css code
This simple CSS file sets the basic look of your theme.
As it has been previously mentioned, internal WordPress functions are often used in the theme code. To get extra information about each function, which you haven’t found in our WordPress guide, visit the official website of WordPress.
Now you know the parts that a WordPress CMS theme consists of. The process of a theme’s creation is not difficult but it even takes specialists time to create a theme of high quality.
That’s what Divine Elemente was developed for. First,it performs these tasks for a few minutes. Then, it can be used by users who are not even acquainted with a layout.
More details on Divine Elemente plugin’s work can be found in the Quick start guide.
Related Guides and Tutorials:
External sources
DEPOSIT NOW CANCEL
