Voraussetzungen und Durchführung

• installiertes WordPress
• Theme-Ordner /wp-content/themes/
• einen neuen Ordner für das Theme erstellen (nur Kleinschreibung, keine Leer- und Sonderzeichen!)
• HTML-Vorlage (Download HTML-Vorlage)
• Erstelle die folgenden 4 Dateien in deinem Theme Unterverzeichnis:
  • header.php
  • index.php
  • sidebar.php
  • footer.php
• Kopiere den Header-Teil der HTML-Vorlage in die header.php
• Verfahre mit deTeilen „footer“ und „sidebar“ analog (abspeichern mit Dateiendung .php).
• Dynamische Elemente in die header.php einfügen:
  • im title-Tag: <title><?php wp_title(‚|‘, 1, ‚right‘); ?><?php bloginfo(’name‘); ?></title>
  • wp_title gibt den Titel der aktuellen Seite aus
  • | legt das Trennzeichen fest
  • 1 gibt an, ob der Titel ausgegeben werden soll, oder nur in einer Variablen gespeichert sein soll.
• um dynamisch auf das Style-Sheet zuzugreifen (beim Kopieren muss sonst die Adresse jedesmal geändert werden) kann man für den Link zur css-Datei folgenden Code einbinden:
  • 01 <link rel=“Stylesheet“ type=“text/css“ href=“<?php echo get_stylesheet_directory_uri(); ?>/reset.css“ />
  • 02 <link rel=“Stylesheet“ type=“text/css“ href=“<?php echo get_stylesheet_directory_uri(); ?>/style.css“ />
• Das Logo wird wie folgt eingebunden (inkl. Link auf die Hauptseite):
  <a href=“<?php bloginfo(‚url‘); ?>“>
  <img src=“<?php echo get_stylesheet_directory_uri(); ?>/images/logo.gif“ width=“61″
  height=“73″ alt=“Fictious Company“></a>
  
• In der Zeile unterhalb der Logo-Einbindung: Statt der Zeile
  <span>Fictious/Company</span>
  kann man genauso auf die Backend-Einstellungen zugreifen (Einstellungen/Allgemein) und auf den dort eingegebenen Namen verwenden:
  <span><a href=“<?php bloginfo(‚url‘); ?>“><?php bloginfo(’name‘); ?></a> </span>
  also auch hier mit Link.
• Genauso wird der Banner angezeigt (hier ohne Link):
  <img src=“<?php echo get_stylesheet_directory_uri();?>/images/banner.gif“ width=“940″ height=“320″
  alt=“Wir lassen Sie nicht im Regen stehen …“ />
• unterhalb der Stylesheet-Angabe werden noch die Pfade für die Pingpacks und dem RSS-Feed eingefügt:
  <link rel=“pingback“ href=“<?php bloginfo(‚wpurl‘); ?>/xmlrpc.php“ />
  <link rel=“alternate“ type=“application/rss+xml“ title=“RSS-Feed“ href=“<?php bloginfo(‚wpurl‘); ?>/feed/“ />

Hooks

Hooks ermöglichen das Einbinden von Funktionen an bestimmten Stellen im System.

Damit dein erstelltes Theme funktioniert und Plugins funktionieren, muss WordPress bestimmte Anweisungen ausführen (können).
Umgekehrt kann man beim Programmieren von Plugins Funktionen in den Kern-Programmiercode von WordPress einhaken.

daher wird am Ende des Heads noch der Hook
<?php wp_head(); ?>
eingesetzt.

Der erste Teíle des Headers sollte nun wie folgt aussehen:

der Rest des headers so: