Immer wieder werde ich gefragt wie man überhaupt so ein eigenes WordPress-Theme erstellen kann… – nachdem ich erst gestern mal wieder als WordPress-Dozent von einer Klasse gebeten wurde ein Theme komplett „from the scratch“ aufzubauen, habe ich mich mal hingesetzt und einige Informationen zusammengetragen, wie man so ein WordPress-Theme erstellt.
Übrigens – in meinen WordPress Advanced Kursen gehe ich natürlich auf den Theme-Aufbau von WordPress noch genauer ein!
Bewusst möchte ich hier ein sehr einfaches Theme erstellen, dass mit wenig Aufwand an Zeit & Nerven das Funktionsprinzip von WordPress einfach näher beleuchtet, ohne zuviel zu verwirren.
Wer schon mal einen ersten Blick in die wirklich umfangreiche Funktions-Referenz von WordPress wagen will, hier ist der Link: http://codex.wordpress.org/Function_Reference
Unser eigenes WordPress-Theme
Ich möchte hier ein minimalistisches WordPress-Theme mit 2 Spaltenlayout, einem Hauptteil und einer Sidebar erstellen.
Start: der Template Ordner:
unter /wp-content/themes/ muss zunächst ein neuer Odner für das eigene WordPress Theme erstellen werden, indem die Template Dateien abgespeichert werden können. Der Ordner sollte den Namen des Themes beinhalten, damit er auch wieder gefunden wird, also /wp-content/themes/eigeneswordpresstemplate
index.php:
Das wichtigste an einem WordPress Template ist die Datei index.php, diese muss auf jeden Fall enthalten sein muss, denn die index.php sorgt (eigentlich) bei WordPress für die Darstellung von den beiden Beitragstypen Seiten und Artikeln in WordPress. Ich habe eines der vielen HTML Grundgerüste einfach mal mit den wichtigsten WordPress-Funktionen komplettiert, damit der Start einfacher fällt:
<html lang="de">
<head>
<meta charset="utf-8" />
<title><?php wp_title(); ?> – <?php bloginfo(’name‘); ?></title>
<link rel="stylesheet" href="<?php bloginfo(’stylesheet_url‘); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo(‚pingback_url‘); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="wrapper">
<div class="inner">
<div id="header">
<!– Inhalt Header –>
</div>
<!– #header –>
<div id="main">
<div id="content">
<!– Inhalt Main –>
</div>
<!– #content –>
<div id="sidebar">
<!– Inhalt Sidebar –>
</div>
<!– #sidebar –>
<div class="clear"></div>
</div>
<!– #main –>
<div id="footer">
<!– Inhalt Footer –>
</div>
<!– #footer –>
</div>
<!– .inner –>
</div>
<!– #wrapper –>
<?php wp_footer(); ?>
</body>
</html>[/php]
style.css
damit ein Theme auch ein wenig Styling erhalten kann fügen wir ein kleines Stylesheet unter der Bezeichnung style.css in den Template-Ordner und füllen den File mit folgenden, zugegeben wenigen Styling Anweisungen:
Theme Name: <em>eigeneswordpresstemplate</em>
Theme URI: https://max2-consulting.de
Description: mein erstes eigenes Blog Theme für meinen WordPress Blog
Author: Peter Fürsicht
Author URI: https://max2-consulting.de
*/
* {
margin: 0;
padding: 0;
}
.clear {
clear: both;
}
.inner {
width: 1000px;
margin: 0 auto;
}
body {
background: #f5f5f5;
}
#header {
padding: 1% 2% 0 2%;
width: 96%;
background: #fff;
}
#menu {
margin: 1% -2% 0;
background: #ccc;
padding: 0.5%;
}
#menu li {
display: inline;
}
#main {
margin: 2% 0 0 0;
}
#content {
width: 69%;
margin: 0 2% 0 0;
background: #fff;
padding: 1% 2%;
}
#sidebar {
width: 21%;
padding: 1% 2%;
background: #fff;
}
#sidebar, #content {
float: left;
}
#meta {
background: #ccc;
padding: 0.5% 1%;
margin: 1% 0;
}
#category_description,
#tag_description {
margin: 0 0 2%;
}
.search-title {
margin: 0 0 2% 0;
}
#comments_container {
padding: 2%;
margin: 2% 0 0 0;
border-top: 1px solid #ccc;
}[/php]
Logo und Slogan:
Jedes Theme braucht ein Logo und einen Slogan, deswegen fügen wir den Namen des Blogs und den Slogan in den Header ein.
<h1><a href="<?php bloginfo(‚url‘); ?>"><?php bloginfo(’name‘); ?></a></h1>
<span id=”description”><?php bloginfo(‚description‘); ?></span>[/php]
Die Loop
Das Herzstück von WordPress.
Mit folgendem Code werden die Artikel aus der Datenbank ausgegeben und angezeigt! Deshalb muss folgender Code in den Container mit der ID “content” geschrieben werden:
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="article">
<h2 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
<!– .article –>
<?php endwhile; endif; ?>
</div>
Die zuvor erstellte index.php sorgt für die Darstellung von den beiden Beitragstypen Seiten und Artikeln in WordPress. Eigentlich differenzieren sich die beiden Dateien auch kaum. Allerdings sind bei Seiten die Angaben des Autors und des Datums unnötig.
Übersichtlicheres Coding dank Auslagerungen
Zur Steigerung der Übersichtlichkeit im eigenen WordPress Theme, sollte man die Teile, die sich immer wiederholen, auslagern. deswegen verändern wir die index.php indem wir den Header, den Footer und die Sidebar auslagern. Hierzu kopieren wir den entsprechenden Teil aus der index.php in eine Datei header.php, den entsprechenden Teil aus der index.php in eine Datei footer.php und den entsprechenden Teil aus der index.php in eine Datei sidebar.php.
dadurch erhalten wir z.B. eine header.php die wie folgt aussieht:
<html lang="de">
<head>
<meta charset="utf-8" />
<title><?php wp_title(); ?> – <?php bloginfo(’name‘); ?></title>
<link rel="stylesheet" href="<?php bloginfo(’stylesheet_url‘); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo(‚pingback_url‘); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="wrapper">
<div class="inner">
<div id="header">
<!– hier machen wir im nächsten Teil weiter –>
</div>
<!– #header –>[/php]
und eine index.php die wie folgt aussieht:
<div id="main">
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="article">
<h2 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
<!– .article –>
<?php endwhile; endif; ?>
</div>
<div id="sidebar">
<?php get_sidebar(); ?>
</div>
<!– #sidebar –>
<div class="clear"></div>
</div>
<!– #main –>
<?php get_footer(); ?>[/php]
Legen wir nun zwei verschiedene Dateien für Seiten und Artikel an – eigentlich sind die beiden Dateien „fast“ identisch, allerdings wird oft gewünscht, dass bei statischen Seiten die Angaben des Autors und des Datums nicht angezeigt wird. Deswegen erstellen wir nun die
page.php
Für die Datei page.php kann man die Datei index.php nahezu ohne Änderungen übernehmen. Damit es übersichtlicher wird, verzichte ich auf den Container “article”
<div id="main">
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>
<!– #content –>
<div id="sidebar">
<?php get_sidebar(); ?>
</div>
<!– #sidebar –>
<div class="clear"></div>
</div>
<!– #main –>
<?php get_footer(); ?>[/php]
single.php
Die single.php ist eine erweiterte page.php, denn in Artikeln ist es normalerweise erwünscht den Autor, das Datum, die Kategorie und die Tags anzuzeigen.
<div id="main">
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<div id="meta">
<span>erstellt am: <?php the_date(‚d.m.Y‘); ?>
von: <?php the_author(); ?> in
Kategorie(n): <?php the_category(‚, ‚); ?><?php the_tags(‚ und getagged mit: ‚, ‚, ‚, “); ?></span>
</div>
<div class="entry">
<?php the_content(); ?>
</div>
<?php endwhile; endif; ?>
</div>
<!– content –>
<div id="sidebar">
<?php get_sidebar(); ?>
</div>
<!– #sidebar –>
</div>
<!– #main –>
<?php get_footer(); ?>[/php]
Nachdem WordPress im Ursprung ein Blog-System ist, muss unter jedem Beitrag die Möglichkeit gegeben sein, diesen Beitrag zu kommentieren. Hierzu erstellen wir uns die Datei
comments.php
Die Datei besteht aus zwei verschiedene Teilen, während der obere Teil die bereits geschriebenen Kommentare anzeigt und darauf hinweist, dass ein soeben geschriebener Kommentar bald (vom Autor) freigegeben wird, ist der untere Teil der Datei für die Bereitstellung des Formulars zum Eingeben eines Kommentars verantwortlich.
<div id="comments_container">
<?php foreach ($comments as $comment) : ?>
<div class="comment" id="comment-<?php comment_ID() ?>">
<div class="commentMeta"><?php comment_author_link() ?> am <?php comment_date(‚j. F Y‘) ?> um <?php comment_time(‚H:i‘) ?> Uhr</div>
<?php comment_text() ?>
<?php if ($comment->comment_approved == ‚0‘) : ?>
<div>Dein Kommentar wird von uns überprüft und schnellstmöglich freigegeben.</div>
<?php endif; ?>
</div>
<!– .comment –>
<?php endforeach; ?>
</div>
<!– #comments_container –>
<div id="comment_form">
<h3 id="respond">Hinterlassen Sie einen Kommentar:</h3>
<form action="<?php echo get_option(’siteurl‘); ?>/wp-comments-post.php" method="post" id="commentform">
<div>
<label for="author">Name</label>
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
</div>
<div>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
</div>
<div>
<label for="url">Webseite</label>
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
</div>
<div>
<label for="comment">Kommentar</label>
<textarea name="comment" id="comment" rows="10" tabindex="4"></textarea>
</div>
<div>
<input name="submit" type="submit" id="submit" tabindex="5" value="Kommentar abschicken" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</div>
<?php do_action(‚comment_form‘, $post->ID); ?>
</form>
</div>
<!– #comment_form –>[/php]
Damit die Kommentare auch angezeigt werden, müssen
a) natürlich Kommentare vorhanden sein (Tipp: In einer „frischen Installation“ hat der Beitrag: Hallo Welt einen Kommentar).
b) der folgende kleine Code unter den Artikel einfügen:
Kategorien und Schlagworte
Artikel/Beiträge werden in Kategorien und Schlagworte (sogenannte Tags) organisiert. Ohne diese Dateien zum Anzeigen von Kategorien und Schlagwörter greift WordPress auf die index.php zurück!
category.php
Auch die Datei category.php ist „nahezu“ identisch zur index.php. Zusätzlich wird lediglich der Name und die Beschreibung der Kategorie ausgegeben.
<div id="main">
<div id="content">
<h2 id="category_title"><?php single_cat_title( “, true ); ?></h2>
<div id="category_description"><?php echo category_description(); ?></div>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="article">
<h2 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
<!– .article –>
<?php endwhile; endif; ?>
</div>
<!– #content –>
<div id="sidebar">
<?php get_sidebar(); ?>
</div>
<!– #sidebar –>
<div class="clear"></div>
</div>
<!– #main –>
<?php get_footer(); ?>[/php]
tag.php
Die Datei tag.php sieht fast genauso aus, wie die category.php. Allerdings müssen andere Funktionen verwendet werden, um den Namen und die Beschreibung des verschiedenen Tags anzuzeigen.
<div id="main">
<div id="content">
<h2 id="tag_title"><?php single_tag_title(); ?></h2>
<div id="tag_description"><?php echo tag_description(); ?></div>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="article">
<h2 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
<!– .article –>
<?php endwhile; endif; ?>
</div>
<!– #content –>
<div id="sidebar">
<?php get_sidebar(); ?>
</div>
<!– #sidebar –>
<div class="clear"></div>
</div>
<!– #main –>
<?php get_footer(); ?>[/php]
Ein Menü hinzufügen:
Um im Theme ein Menü anzeigen zu lassen muss diese Funktion zunächst in der functions.php aktiviert werden. Dadurch kann man dann im Backend die Position „Header Menu“ dem Menu zuweisen.
functions.php
);
}
add_action (‚init‘, ‚register_my_menus‘);[/php]
Um das Menü, dann auf der Position “Header Menu” anzeigen zu können, fügen wir folgenden Code in den Header (header.php) ein:
header.php
<div id="menu">
<?php wp_nav_menu( array( ‚menu_class‘ => ‚dropdown‘, //Fügt eine Klasse zum Menü hinzu
‚container_id‘ => ’navwrap‘, //Legt ID von dem Container fest, der das komplette Menü umgibt
)
); ?>
</div>
Sidebar und Footer mit Widgets füllen
Widgets sind kleine nützliche “Blöcke”, die in definierten Bereichen (Widget Areas) angezeigt werden können. Um diese Widgets allerdings nutzen zu können müssen diese Bereiche erst einmal erstelltund aktiviert werden, deshalb fügen wir folgenden Code in die functions.php ein:
functions.php
register_sidebar( array(
’name‘ => __( ‚Sidebar‘),
‚id‘ => ’sidebar-widget-area‘,
‚description‘ => __( ‚Bereich für Widgets innerhalb der Sidebar‘ ),
‚before_widget‘ => ‚
<li id="%1$s" class="widget-container %2$s">‘,
‚after_widget‘ => ‚</li>
‚,
‚before_title‘ => ‚<strong class="widget-title">‘,
‚after_title‘ => ‚</strong>‘,
) );
register_sidebar( array(
’name‘ => __( ‚Footer‘),
‚id‘ => ‚footer-widget-area‘,
‚description‘ => __( ‚Bereich für Widgets innerhalb des Footer‘),
‚before_widget‘ => ‚
<li id="%1$s" class="widget-container %2$s">‘,
‚after_widget‘ => ‚</li>
‚,
‚before_title‘ => ‚<strong class="widget-title">‘,
‚after_title‘ => ‚</strong>‘,
) );
}
add_action( ‚widgets_init‘, ‚widgets_init‘ );[/php]
Danach müssen wir lediglich die Widget Areas im gewünschten Bereich des Template platzieren – also in meinem Beispiel einmal in der Sidebar, einmal im Footer:
einmal also folgenden Code in die Sidebar
und einmal diesen Code hier in den Footer
Fehlerseite 404.php
WordPress bringt „serienmäßig eine Funktion mit um einen Fehlerabfang zu aktivieren, indem dann eine spezielle Fehlerseite angezeigt wird, wenn die URL nicht existiert. Deshalb sollte man sich so eine Fehlerseite sofort zum Start anlegen:
<div id="main">
<div id="content">
<h2>404 – Seite nicht gefunden</h2>
Achtung! Diese Seite existiert nicht, haben sie sich vertippt?
</div>
<!– #content –>
<div id="sidebar">
<?php get_sidebar(); ?>
</div>
<!– #sidebar –>
<div class="clear"></div>
</div>
<!– #main –>
<?php get_footer(); ?>[/php]
Suchergebnis anzeigen in der search.php
Eine weitere Funktion von WordPress ist eine integrierte Suchfunktion. Wenn in der Suche keine Ergebnisse gefunden werden können, wird “Entschuldigung, aber leider ergab Deine Suche keine Treffer.” ausgegeben.
<div id="main">
<div id="content">
<div class="search-title"><strong>Suchergebnisse für: <span class="category-name"><?php echo $s ?></span></strong></div>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="article">
<h2 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
<!– .article –>
<?php endwhile; else: ?>
<?php _e(‚Entschuldigung, aber leider ergab Deine Suche keine Treffer.‘); ?>
<?php endif; ?>
</div>
<!– #content –>
<div id="sidebar">
<?php get_sidebar(); ?>
</div>
<!– #sidebar –>
<div class="clear"></div>
</div>
<!– #main –>
<?php get_footer(); ?>[/php]
Im Prinzip „steht“ nun das Grundgerüst des ersten eigenen WordPress Theme. Natürlich kann man sich an der einen oder anderen Stelle komplett „austoben“ – Viel Spass und Erfolg dabei!
Vielen Dank fürs Lesen,
Ihr Peter Fürsicht
Über den Autor: Peter Fürsicht
Hallo lieber Leser, ich schreibe in diesem Blog über Aktuelles und Interessantes aus unserem direkten Firmenumfeld im Bereich Onlinemarketing und Social Media Marketing sowie als WordPress Agentur in München. Ich freue mich auf spannende Diskussionen.
Meine Qualifikationen: zertifizierter Online-Marketing-Manager (macromedia), zert. Datenschutzbeauftragter, zweifach ZdK-zertifizierter Automobilverkäufer (BMW, Mercedes) mit über 16 Jahren Berufserfahrung, Ausbildung zum Verkaufsleiter (BMW), Coach für Nachwuchsverkäufer innerhalb der ZdK-zertifizierten Ausbildung. Als Dozent für Onlinemarketing bin ich u.a. bei der Macromedia-Akademie und der PTM Akademie in München tätig.
Für Meinungen, Wünsche und Anregungen können Sie mich direkt kontaktieren: pf@max2-consulting.de
