Creating a WordPress Theme

requirements

A complete WordPress installation is required for this. We have described how WordPress can be installed here: WordPress: The order and installation and in our eBook on planning and designing a WordPress site for business.

In the directory

wordpress/wp-content/themes

a new directory must be created in which the theme is created. Ideally, it bears the name of the theme. We use the theme name dFwp-theme in our example, so the directory structure looks like this:

wordpress/wp-content/themes/dFwp-theme

goal

It will build a WordPress theme from scratch.

This is a basic frameworkwhich can be changed and designed at will.

We have assigned different colors (shades of gray) to containers so that they can be easily distinguished from one another.

The framework will have the following structure:

  • Full screen width header
  • Centers the posts next to each other on the left, a sidebar on the right
  • Footer across the entire width of the screen

To do this, these files are created and filled with content:

  • index.php
  • style.css
  • header.php
  • sidebar.php
  • comments.php
  • single.php
  • footer.php
  • page.php

The basic structure

The index.php is the first and also the most important file. It is responsible for the start page being displayed when the blog domain is accessed. We will gradually fill them with content.

But first the structure is defined in it. So, we create a file called “index.php” in the theme’s folder and store the following content in it:

<?php get_header(); ?> <!-- Hier wird der Header (header.php) eingebunden -->
 
<div id="wrap">
   <div id="content-area">
      <!-- Hier werden die Blogbeiträge angezeigt -->
   </div>
 
   <?php get_sidebar(); ?> <!-- Hier wird die Sidebar (sidebar.php) eingebunden -->
</div>
 
<?php get_footer(); ?> <!-- Hier wird der Footer (footer.php) eingebunden -->

The file can then be saved and closed.

the header

We’ll start with the page’s header, which is about the function is integrated.

The page title is defined in the header, the style sheets are integrated and, if desired, meta information is also inserted. In our framework, we limit ourselves to the bare minimum:

We choose the page title and indicate where to find the style sheet. WordPress provides the function for this bloginfo() to disposal:

bloginfo(‘name’): Displays the title of the blog.

bloginfo(‘stylesheet_url’): Link to the style sheet.

So we create a file called “header.php” and store the following content in it:

<!DOCTYPE html>
<html>
<head>
   <title><?php wp_title(); ?> - <?php bloginfo('name'); ?></title>
   <link rel="stylesheet" href="https://www.df.eu/blog/wordpress-theme-erstellen/<?php bloginfo("stylesheet_url'); ?>" type="text/css" media="all" />
</head>
 
<body>
   <div id="header">
      <!-- Hier werden die Daten für den Header stehen -->
   </div>

In the area that currently contains “” we define the page header.

In our example, we output the blog’s title (as a link to the home page) and the blog’s description.

For this we use the function again bloginfo():

bloginfo(‘name’): Displays the title of the blog.

bloginfo(‘description’): Displays the description of the blog.

The following content is now entered instead of ““:

<div id="header">
   <h1><a href="https://www.df.eu/blog/wordpress-theme-erstellen/<?php echo get_settings("home'); ?>/"><?php bloginfo('name'); ?></a></h1>
   <div class="description"><?php bloginfo('description'); ?></div>
</div>

Display posts on the home page

The theme cannot yet be activated in the WordPress backend, as there is no style sheet yet. We’ll get to that in a moment. But first we tell the start page that it should load existing blog articles.

To do this, we fill the “content-area” of index.php with content.

TheLoop

The loop that outputs the content of the blog posts is simply referred to as “The Loop”:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   <!-- Hier wird angegeben, welche Daten ausgegeben werden sollen -->
<?php endwhile; endif; ?>

In our basic structure, we output the following data for each contribution:

  • headline
  • Author’s name
  • Creation date of the article
  • content of the article

For this we need the following functions:

the_title(): Displays the title of the article.

the_permalink(): This links the headline to the article page of the article.

the_author(): Displays the author’s name

the_date(): Displays the creation date of the article

the_content(): Shows the content of the article

With this data, the area in index.php looks like this:

<div id="content-area">
 
   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
      <div class="entry">
 
         <h2><a href="https://www.df.eu/blog/wordpress-theme-erstellen/<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
         <div class="author">Erstellt von: <?php the_author(); ?></div>
         <div class="date">Erstellt am: <?php the_date(); ?></div>
         <div class="content">
            <?php the_content(); ?>
         </div>
 
      </div>
 
   <?php endwhile; endif; ?>
 
</div>

So that the template can be activated, we now create the style sheet.

The style sheet

We create a file called “style.css” for the style sheet. This now receives information about the theme. This is the information that will later be displayed in the preview under “Design” in the WordPress backend:

(Of course we don’t have a screenshot yet – it can be uploaded at the end when the desired design is finished.)

In order for this information to be displayed, the style.css begins as follows:

/*
Theme Name: dFwp-theme
Description: Theme zur Veranschaulichung für den dF-Blog
Author: domainFACTORY
Version: 1.0
*/

From the moment the style.css is saved on the server, the theme can be activated in wp-admin.

Now we define the IDs and classes defined so far. Of course, these are only examples for illustration purposes and can be modified at will.

body {
background: #464646;
margin: 0;
}
h1 {
margin-top:0;
text-align:center;
padding-top:30px;
}
h2 {
}
h3 {
}
#wrap {
max-width:960px;
margin: 0 auto;
overflow:hidden;
}
#header {
height: 210px;
background:#777;
color:#fff;
}
.description {
text-align:center;
}
#content-area {
width: 660px;
background:#e0e0e0;
padding:20px;
float:left;
}
.entry{
padding: 30px;
margin-bottom:10px;
background:#fff;
}
.author{
font-weight:bold;
}
.date{
font-style:italic;
}
.content{
}

The sidebar

To create a sidebar, we create the “sidebar.php” file.

With we have already included them in index.php.

In our example, we output the following content in the sidebar:

  • The static pages of the blog
  • The categories
  • The blog archive
  • Manual links eg for social media

For this purpose, the following content is stored in sidebar.php:

<div id="sidebar">
   
   <div class="widget-title">Seiten</div>
   <div class="widget"><ul><?php wp_list_pages('title_li='); ?></ul></div>
  
   <div class="widget-title">Kategorien</div>
   <div class="widget"><ul><?php wp_list_categories('orderby=name&order=ASC&title_li='); ?></ul></div>
   
   <div class="widget-title">Archiv</div>
   <div class="widget"><ul><?php wp_get_archives('type=monthly'); ?></ul></div>
  
   <div class="widget-title">Social</div>
   <div class="widget">
      <a href="http://meinefacebookseite">Facebook</a>
      <a href="http://meinetwitterseite">Twitter</a>
   </div>
  
</div>

In addition, we add the CSS file as follows:

#sidebar {
width: 200px;
padding: 30px;
background:#bdbdbd;
float:right;
}
.widget-title {
}
.widget {
margin-left:20px;
}

The single.php

The single.php file displays a post in single view. For example, if you click on the heading of an article on the start page, you will be directed to single.php.

The file is not absolutely necessary: ​​If it does not exist, the index.php template is loaded.

We create them so that we can add a special feature – commenting – to them.

Initially, however, it looks the same as the index.php file.

we copy the index.php after single.php.

There we add the comment template with the function in the “content-area” type:

<div id="content-area">
 
   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
      <div class="entry">
 
         <h2><a href="https://www.df.eu/blog/wordpress-theme-erstellen/<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
         <div class="author">Erstellt von: <?php the_author(); ?></div>
         <div class="date">Erstellt am: <?php the_date(); ?></div>
         <div class="content">
            <?php the_content(); ?>
         </div>
 
      </div>
 
   <?php endwhile; endif; ?>
   <?php comments_template(); ?>
</div>

We then create the “comments.php” file for the comment template.

First, we print out existing comments:

<div id="comments">
   <div class="comments_title">Kommentare</div>
 
      <?php if ( have_comments() ) : ?>
         <?php foreach ($comments as $comment) : ?>
 
            <div class="comment" id="comment-<?php comment_ID() ?>">
               <div class="commentavatar"> <?php echo get_avatar( $comment, 56); ?></div>
               <div class="commentmeta">Geschrieben von <b><?php comment_author_link() ?></b> am <b><?php comment_date('j. F Y') ?></b> um <b><?php comment_time('H:i') ?> Uhr</b></div>
               <div class="commenttext"><?php comment_text() ?></div>
            </div>
 
         <?php endforeach; ?>
      <?php endif; ?>
 
</div>

With this we check whether comments exist.

If so, the author is displayed with his avatar, creation date and time, and of course the comment itself.

However, something important is still missing:

We still need to print information about it if no comments exist.

We should also check whether the comment function for the post is activated at all. If not, we will display information about it. Otherwise a contact form. But we’ll get to that.

For the two pieces of information, we extend the code as follows (insert at the very bottom):

<div id="comments">
   <div class="comments_title">Kommentare</div>
 
      <?php if ( have_comments() ) : ?>
         <?php foreach ($comments as $comment) : ?>
 
            <div class="comment" id="comment-<?php comment_ID() ?>">
               <div class="commentavatar"> <?php echo get_avatar( $comment, 56); ?></div> 
               <div class="commentmeta">Geschrieben von <b><?php comment_author_link() ?></b> am <b><?php comment_date('j. F Y') ?></b> um <b><?php comment_time('H:i') ?> Uhr</b></div> 
              <div class="commenttext"><?php comment_text() ?></div> 
 
            </div> 
         <?php endforeach; ?> 
      <?php endif; ?>   
 
         <?php if ( get_comment_pages_count() == "0"  ) : ?>               
            <p>Noch keine Kommentare.</p>         
         <?php endif; ?>     
     
         <?php if ( ! comments_open() ) : ?>              
            <p>Die Kommentarfunktion f&uuml;r diesen Beitrag ist geschlossen.</p>         
         <?php endif; ?> 
 
</div>

Now we need a contact form in which you can enter comments, provided the comment function is open.

above the last

in the file we enter the following code:

   <?php if ( comments_open() ) : ?>
 
      <div class="comments_title">Kommentar schreiben</div>
 
      <div class="comments_form">
         <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
 
            <p>
            Name:<br />
            <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="32" tabindex="1"/>
            </p>
 
            <p>
            E-Mail-Adresse:<br />
            <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="32" tabindex="2" />
            </p>
 
            <p>
            Webseite:<br />
            <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="32" tabindex="3" />
            </p>
 
            <p id="comment_textarea">
            Kommentar:<br />
            <textarea name="comment" id="comment" style="width: 50%;" rows="10" tabindex="4"></textarea>
            </p>
 
            <p>
            <input type="submit" name="submit" id="submit" tabindex="5" value="Kommentar abschicken" />
            <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
            </p>
 
            <?php do_action('comment_form', $post->ID); ?>
 
         </form>
      </div>
   <?php endif; ?>  

Now one little thing is missing. If a comment has to wait for activation, the author should receive information about it. That’s why we carry it too about to the last

:

<?php if ($comment->comment_approved == '0') : ?>
   <div class="comment_awaiting_moderation">Achtung: Der Kommentar muss erst noch freigegeben werden.</div>
<?php endif; ?>

We now extend the CSS with the newly created classes:

#comments {
}
.comments_title {
font-size:20px;
font-weight:bold;
margin: 40px 0 20px 0;
}
.comment {
background: #f1f1f1;
padding:20px;
}
.comment_avatar {
}
.comment_meta {
font-style:italic;
}
.comment_text {
margin: 10px 0 0 0;
background-color:#fff;
padding:10px;
}
.comments_form {
margin: 10px 0 0 0;
background: #f1f1f1;
padding:20px;
}
.comment_textarea {
}
.comment_awaiting_moderation {
color:red;
font-weight:bold;
}

The footer.php

Now only the footer is missing. For this we create a file called “footer.php”, which must contain the following tags:

</body>
</html>

What else it should contain is up to you:

<div id="footer">
Text im Footer
</div>
</body>
</html>

And here is the CSS for it:

#footer {
height: 100px;
background:#1b1b1b;
color:#fff;
text-align:center;
padding: 30px 0 0 0;
}

The page.php

The page.php is responsible for all static pages. If it doesn’t exist, the standard index.php template is loaded.

However, since a static page usually looks a bit different than an ordinary blog post, we create a page.php in order to then edit it.

Therefore copy we move the index.php to page.php and open the page.php.

Now we remove the author and creation date information on the page, as this is usually not required for static pages.

<?php get_header(); ?> <!-- Hier wird der Header (header.php) eingebunden -->
 
<div id="wrap">
   <div id="content-area">
 
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
      <div class="entry">
 
         <h2><a href="https://www.df.eu/blog/wordpress-theme-erstellen/<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
         <div class="content">
            <?php the_content(); ?>
         </div>
 
      </div>
 
      <?php endwhile; endif; ?>
   </div>
 
   <?php get_sidebar(); ?> <!-- Hier wird die Sidebar (sidebar.php) eingebunden -->
</div>
 
<?php get_footer(); ?> <!-- Hier wird der Footer (footer.php) eingebunden -->

Complete!

The blog’s home page will now look something like this:

Wordpress Theme - Ready Template

So the basic framework is in place. Now the template can be expanded and redesigned as desired.

Another little tip: The hierarchy of the files is very useful when creating or editing a theme. A nice overview of this can be found here: http://wphierarchy.com/