Create your own WordPress template – Part 1

Prerequisites

To install an own template in WordPress you should either have installed the system on your local machine or have it installed on a hosted webserver, that’s all you need for the moment.

We start creating some directories where we will store the template files. Our folder for the new theme is built inside the wordpress theme directory:

Our new template will be called “example”, so we create a new folder inside the “themes” directory:

Now we can already start and create the first files;-)

The structure of the template files

The file index.php

The index.php is the main file and is in itself a complete template. We will see later, however, that it makes sense to create a better overview and easier maintainability to store the template in different files. But first we put the index.php into the template directory:

Before we now should devote the content of the files you have to think the structure of the page in advance and delineate the various zones in the layout. The following figure we will use for our example template:

Template Layout for WordPress

The wrapper is used to centrally display the content on the page. In our example, we have next to the header and footer on the left side of the sidebar, which should include a sub navigation later; next to it on the right side, a larger area for the respective content.

Based on this structure we build our first index.php here:

The file contains many placeholders and the different areas are also later swapped into individual files, why this is done I will get to later. In order already to activate the theme to the backend of WordPress and to be able to view the work live on the system, nor the style sheet file style.css is definitely needed that what we are creating now.

The stylesheet file style.css

Since it does not use the HTML files for the styling here comes our style.css stylesheet file. This we put in the directory

and add the following code to the main structure of our new page:

The colors are pre-installed only the different areas for the preview and later be removed or set to sensible values​​. The first part contains a few meta element for the template and is for WordPress needed in every case, the remaining styles I have been previously established for the coarse structure to the design to test on the website.

With these two steps, we have already created the basic structure of the template, the next step we now want to outsource the different templates in separate files and determine the Replacer for WordPress in the templates.

View navigation and content from the WordPress system

Advance should be applied in order to test the output on the system a few articles and posts in the WordPress backend.

Displaying of a navigation

Will list all pages from Word Press in the navigation display following code requires:

Here, all pages will be read and a list (HTML: ul) are shown. In style.css, we can then click on the navigation (div id = “menu” and the CSS class div class = “nav-menu”) to access and customize the styles.

To view the article in the index.php and the WordPress Loop is still following code requires, include:

This change can already be the pages on the navigation display when visually not very nice.

Since the page is to be multilingual Here is a good opportunity to integrate an appropriate plugin into the page. Since I have already successfully integrated multiple qTranslate in web pages and this is “normal” for pages also enough, I copy the plugin files at this point in the plugins directory and activate it. The qTranslate works exactly and how it is mounted correctly I have already explained in a previous post.

It must be noted that the widget has yet to functions.php activate in order to use it in the backend can; following lines must therefore be supplemented in the functions.php (or in our case, we must first create the functions.php in the template directory):

‘, ‘after_widget’ => ‘

‘, ‘before_title’ => ‘

‘, ‘after_title’ => ‘

‘ )); ?>

Then we can draw back under “Widgets” provided by the plugin “aTranslate Language Chooser” in our new widget area to drag and drop into the area.

language_switch_widget

Thus, the widget is also shown we need the code yet in our index.php:

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">