Create Your WORDPRESS Theme in 4 Steps

WordPress is one of the most popular Content Management Systems (CMS) worldwide. The easy installation, a multitude of functional plugins and the extensive range of free and paid layouts (themes) make the CMS interesting even for the inexperienced user. However, it is a challenge to create a completely individual theme. We will explain the most important steps.

Requirements for creating your own WordPress theme

Some conditions are necessary: basic knowledge of the HTML/XHTML markup language, the PHP script language, and the CSS stylesheet language. Furthermore, you should install WordPress either on a server or on a local runtime environment with Xampp.

Required tools

For the first visualization of your ideas, an image editing or drawing program is useful. You can use it to put together the elements for your theme. Usually, a simple program like Paint, which is already pre-installed on many Windows computers, is sufficient. Working with Adobe Photoshop CC offers great advantages. The program can copy the individual elements of your layout as CSS. You only need to insert these design templates into your stylesheet.

To write the theme you basically need a simple text editor. But it’s better to work with a program that supports HTML, PHP and CSS – like the free text editors Notepad++ or Aptana Studio. In Notepad++, for example, the syntax and structure of the different programming languages are highlighted by different text styles. It also allows you to edit multiple documents at once, automatically complete source code, and has extensive search and replace capabilities.

Last but not least, we advise you to install different browsers to view your theme, as each browser displays web pages differently.

  1. Design you Layout

Think about how your future layout should look like. Usually, themes consist of a header, the main navigation bar (Navi), a content area (Content), one or more sidebars (Sidebars) and a footer.

To ensure that your website visitors can find their way around easily later, we recommend that you retain this division. In a drawing program, for example, you can insert the elements using the Rectangle tool.

Since the website will later be viewed on monitors in different resolutions, it is ideal to create your layout document in landscape format, already in the desired size of your theme. Widths between 960 and 1100 pixels have become established. The height of the page can vary. Therefore, position the most important layout elements so that they can be read without scrolling.
2. create an HTML template

The HTML template is the basic structure of your theme. You save the file as index.html When you enter your website address in the browser, this index file is opened first.

<!DOCTYPE html>

<html>

<head>

<!- CHARSET IN FRONT, SO THAT SPECIAL CHARACTERS ARE DISPLAYED CORRECTLY ->

<meta charset =”utf-8″ />

<title> basic structure of a HTML page </title>

</head>

<body>

</body>

</html>

After finishing the basic setup, add all areas within the <body> tags that you have already defined in the rough draft of your layout. Then mark them with “class” (class name) to assign unique styles to them later in the CSS file. Only the areas within the <body> tags will be visible on the web. All components of your theme are stored in so-called div-containers – nestable together like a box system.

<!DOCTYPE html>

<html>

<head>

<meta charset =”utf-8″ />

<title> basic structure of a HTML page </title>

</head>

<body>

<div class=”header”>

</div>

<div class=”Navi”>

</div>

<div class=”sidebar”>

</div>

<div class=”content”>

</div>

<div class=”footer”>

</div>

</body>

</html>
3. create the CSS file for the design

In the CSS, you define the necessary design rules for the layout: for example, the width, height, position, and color of the individual areas as well as the font attributes of headings and paragraphs. If you have created these with Adobe Photoshop, you can obtain these specifications by selecting the menu item “Layer” and “Copy CSS”. You then only need to paste the information into your CSS file under the appropriate class name. Here is an example including the corresponding syntax:

.header {

background-color: rgb( 245, 220, 192 );

position: absolute;

left: -7px;

top: 0px;

width: 1031px;

height: 131px;

z-index: 11;

}

Save the file as style.css It is best to put the index.html and the style.css in a common folder. The file index.html, which is relevant for the browser, should now be supplemented – within the two <head> tags – with the following entry:

<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” />

The linking only works if both files are in the same folder. Otherwise, you have to adjust the value behind “href=”, for example, “ORDNER/style.css”. From this HTML template, you can then generate a ready-to-use theme.


4. create the templates for the basic theme

A WordPress theme consists of a set of templates with different functions – in the script language PHP. The files index.php and style.css from the basis. In addition, there are a number of other files that are necessary for the extensive functions. Take a look at the already existing themes of your WordPress installation. You can find them in the folder “wp-content”. There you can see their structure.

From the individual sections of the already existing HTML file, you now create an index.php, a header.php, a sidebar.php, and a footer.php. Each PHP file is based on the basic HTML structure, but with a .php file end. To make sure that your website displays all elements when you call it up, you integrate them into the index.php by using template tags. This looks like this:

<?php get_header(); ?>

<div class=”content”>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

To display individual articles of a blog later, we recommend the installation of a loop. For the output of WordPress pages or individual blog articles, create a page.php and a single.php.

You can use the index.php later as a template for many other files. After that we create the header.php, the sidebar.php, and the footer.php. In the header.php you write important metadata within the <head> tags as well as the link to your style.css. In addition, it usually contains the main navigation, a header image and/or a heading. The footer.php can contain, for example, a sub-navigation, links to other websites, the imprint or a contact form. The sidebar.php offers space for further navigation elements and widgets.

Leave a Reply

Close Menu