How to implement a theme for Wordpress

Creating a theme can be easy and quick if you follow the right path. Webmasters don't always do that. Most Wordpress themes are created from a model included with CMS or from another theme, so all of them have almost the same layout with a menu on the right and a fixed width.

How to create a theme

A theme is created from scratch by defining a stylesheet that is tested on an HTML page. Then we fill the interface with bricks provided by Wordpress, as we collect details from the lego game!

The process will consist of several stages:

Install WordPress locally for testing.
Define the overall structure.
Create a style sheet on a static HTML page.
Split a static page into parts (header, footer, etc.) into files to include.
Create custom graphics elements.

If you find in the list of topics offered on the Wordpress website, themes whose appearance you like, when fonts, arranging elements, using them with their own theme structure, will cost you less than repeating an existing theme to change its structure.

This tutorial is based on a handy example for which we defined the classic structure and file list, as well as an academic style sheet with headers, two columns and a menu on the left.

Topic structure

The theme is divided into several files, but each of them repeats part of the overall structure. This corresponds to the following:

<html>
<head></head>
<body>
    <header>
    </header>
    <content>
    </content>
    <leftside></leftside>
    <rightside></rightside>
    <footer></footer>
</body>
</html>

The location of the content and sidebars depends on the interface design. A global container is often added to the bodysuit, but it is optional, as you can associate the style with the bodysuit.

Theme files

And the basic theme is implemented in the following files:

header.php
Description of the header .
single.php
Part page definition.
index.php
Home page definition.
footer.php
Footer.
sidebar.php
Defines the side panels.
comments.php
Comment template.

At least two files are added to this:

functions.php
PHP functions that the theme can use.
style.css
Global style sheet. The entire presentation is defined in this file.

To develop a theme, you can add other files, such as search.php to describe the search form.

Prior knowledge

Before building a theme, you need to know the list of components provided by Wordpress to create the interface.

Page components.
How to assign them in the interface. These are function calls defined by WordPress .
Article widget code.
These are interface elements that allow you to access site pages in various ways.

Create a theme

We will see in 8 chapters how to make a theme for Wordpress, starting from scratch and with components predefined by Wordpress software .

Install WordPress locally.
Page definition. (single.php)
On the page, you can enable headers and footers.
Home page. (index.php)
It contains a list of articles, not the body of the article, but you can give another idea. It also displays a list by category, search result, archive.
Title. (header.php)
Footer. (footer.php )
Sidebar. (sidebar.php)
Style sheet. (style.css)
It is developed on a static HTML page posted here on the network.

The topic also requires a comment template (comment.php), which will be automatically included at the end of the article. We're back to the default theme. We can set it up as needed.

Application

Cryonie's theme is the implementation of this tutorial.

Loading

Cryonia theme.

Documentation

Subject for public release. Travel via Wordpress website. (English).
Checklist. (English).

Discussion board

Change the page structure

19-01-2012 19:25:57

link93

Hello to the forum, I will have a little question, I saw that each topic has page.html by default and it was possible to have several models in one topic. I created a typical page based on the base page, but I would like to add 3 fields below the text field where I can insert links. I wanted to know if and how it is possible:). I put a copy of my test page code: <? php/* Template Name: 3-column page in the middle */> <? php get_header ();?> <? php get_sidebar ();?> <div id = «content» class = «page»> <? php if (have_posts ()):?> <? php while (have_posts ()): the_post ();?> <div class =» post» id = «post- <? php the_ID ();?>»> <h2> <? php the_title ();?> </h2> <br/> <? php the_content ();?> </div> <? php endwhile;?> <? php endif;?> <? php edit_post_link ('Edit this entry.', '<p>', '</p>');?> <? php comments_template ();?> </div> <? php get_footer ();?> IF you have an idea of how to do it, or a tuto who can guide me, I accept. Hope soon ^ ^.

20-01-2012 19:33:57

webmaster

Hello If I understand correctly, is it about placing links under the content of the page? Before the comments? This occurs in the <div class = "post"> </div> layer after the closing tag or elsewhere.