WordPress Themes anpassen durch Child Themes

Es gibt viele kostenlose, wie auch kostenpflichtige Themes für WordPress. Oft ist es aber so dass ein paar Dinge doch nicht den eigenen Ansprüchen genügen. Nun könnte man anfangen und die gewünschten Änderungen in den einzelnen php oder css Dateien vornehmen. Das ist sicher möglich, doch gibt es spätestens nach der Installation eines verfügbaren Theme-Updates ein böses Erwachen. Alle vorgenommenen Änderungen haben sich plötzlich in Nichts aufgelöst und das Theme sieht aus wie am Anfang.

Seit WordPress 3.0 gibt es nun die Möglichkeit eigene Child-Themes anzulegen. Durch die Nutzung der Child Theme-Option kann man zuverlässig verhindern dass, am Theme vorgenommene Änderungen, bei einem Update des Parent-Themes, verloren gehen. In diesem Beitrag werde ich nun erklären, wie man ein Child-Theme anlegt und was dabei zu beachten ist.

Anlegen eines Child-Themes

Als erstes geht man in den Ordner „wp-content->themes“ und legt dort einen neuen Unterordner an. Ich benutze aktuell das Theme „foghorn“, also nennen ich den neu erstellten Unterordner „foghorn_child“. In diesem Ordner erstellt man eine Datei namens „style.css“. In diese Datei können Sie folgenden Code kopieren. Vergessen Sie nur nicht diesen anzupassen. Besonders wichtig dabei ist die Angabe hinter „Template:“ Dort müssen Sie auf jeden Fall den Namen Ihres Parent-Themes angeben. Hinter „Theme Name:“ können Sie einen beliebigen Namen angeben. Man sollte aber bereits an diesem Namen sehen können um welches Theme es sich handelt.

/*
Theme Name:     Foghorn Child
Theme URI:      http://www.fluuux.de/
Description:    Child Theme für das Theme "Foghorn" von "Devin Price"
Author:         Enrico Sadlowski
Author URI:     http://www.fluuux.de/
Template:       foghorn
Version:        1.0
*/

Wenn Sie jetzt im Backend (Adminbereich) Ihrer WordPress-Installation schauen, können Sie unter „Design->Themes“ bereits Ihr Child-Theme sehen. Es fehlt noch der Screenshot des Themes, aber das kommt alles noch.

Wordpress-Themesverwaltung

Anpassen der styles.css

Jetzt können Sie bereits das neue Theme aktivieren. Da ab der Aktivierung des Themes die styles.css des Child Themes greift, werden Sie Ihre Seite erst einmal ohne irgendwelche Style-Formatierungen sehen. Am einfachsten ist es, den Inhalt der „styles.css“ aus dem Parents Theme Ordner, also in meinem Fall aus dem Ordner wp-content->Themes->foghorn in die Datei „styles.css“ des Child Themes Ordners zu kopieren. Beachten Sie dabei aber, dass die oben angegebenen Zeilen am Anfang der Datei enthalten sein müssen. Das Design der einzelnen Elemente der Seite können Sie nun zum größten Teil über das Ändern der CSS-Anweisungen in der styles.css vornehmen.

Anpassen weiterer  Theme Elemente

Neben dem Anpassen der CSS-Anweisungen hat man die Möglichkeit praktisch sämtliche Dateien des Themes quasi zu überschreiben. Will man z.B. Änderungen in der „footer.php“ vornehmen, so kopiert man diese Datei einfach aus dem Parents Theme in das Child Theme und nimmt dort die Änderungen vor.  Zu beachten wäre, dass die Datei den selben Namen wie im Parents Theme haben muss und dass die Ordnerstruktur die selbe sein muss. Befindet sich also eine zu bearbeitende Datei im Parents Theme in einem Unterordner, so muss man diesen Unterordner auch im Child Theme anlegen. Eine Besonderheit gibt es noch in Bezug auf die Datei „functions.php“. Wenn Sie im Child Theme eine eigene „functions.php“ anlegen, dann wird diese Datei nicht die Anweisungen der „functions.php“ des Parents Themes überschreiben. Vielmehr werden die Anweisungen der „functions.php“ im Child Theme vor den Anweisungen der „functions.php“ des Parents Themes ausgeführt. Auf diese Weise können Sie weitere php-Funktionen zu Ihrem Theme hinzufügen ohne dass diese bei einem Update des Parent Themes überschrieben werden.

Da meine rechte Sidebar so überladen ist, möchte ich mein Social Media Widget, das einige Icons zeigt lieber am unteren Ende der Seite anzeigen lassen.  Um das zu bewerkstelligen, basteln wir uns nun eine neue Sidebar für den Footer.

Fangen wir also damit an, eine neue Datei mit dem Namen „sidebar-footer.php“ im  Child-Themes Verzeichnis anzulegen.

sidebar-footer.php

<div class="clear"></div>

<?php if(!is_active_sidebar('footer-widget-area') && !is_active_sidebar('footer-widget-area-right')) return ?>
<div id="sidebar-footer" role="complementary">
  <?php if(is_active_sidebar('footer-widget-area')) : ?>
    <div class="footer-widget"> 
      <ul>
        <?php dynamic_sidebar( 'footer-widget-area' ); ?> 	
      </ul>	
    </div> 
  <?php endif; ?>
  <?php if(is_active_sidebar('footer-widget-area-right')) : ?>
    <div class="footer-widget-right"> 
      <ul>
        <?php dynamic_sidebar( 'footer-widget-area-right' ); ?> 	
      </ul>	
    </div> 
  <?php endif; ?>
</div>

<div class="clear"></div>

Zuerst wird geprüft, ob Widgets in der Footer-Sidebar vorhanden sind. Sollte nichts angezeigt werden, gehen Sie im Backend auf „Design->Widgets“ und ziehen Sie die gewünschten Widgets in die zwei Footer-Sidebar-Bereiche „Footer-Sidebar“ und „Footer-Sidebar (Rechts)“. Wenn wenigstens ein Widget in einer der Footer-Sidebars vorhanden ist, wird der Quelltext nach „return“ abgearbeitet und die Widgets werden in die einzelnen Sidebar-Bereiche geladen.

functions.php
Im selben Verzeichnis legen wir nun die Datei functions.php an.
In der functions.php wird die Sidebar registriert. In diesem Beispiel registrieren wir 2 Bereiche. „footer-widget-area“ ist der Breite Bereich unter dem Content-Fenster und „footer-widget-area-right“ ist der Bereich unter der rechten Sidebar. Brauchen Sie mehr als 2 Bereiche in der Sidebar, dann fügen Sie einfach weitere Bereiche hinzu.

<?php
function firsttec_widgets_init() {
register_sidebar( array( 
    'id'          => 'footer-widget-area', 
    'name'        => __( 'Footer-Sidebar', $text_domain ), 
    'description' => __( 'Das der der Bereich unter dem Contentfenster in der Footer-Sidebar.', $text_domain ),
    'before_widget' => '<b id="%1$s" class="footerwidget %2$s">', 
    'after_widget'  => '</b>', 
    'before_title'  => '<h2 class="widgettitle">', 
    'after_title'   => '</h2>', 
) );
register_sidebar( array( 
    'id'          => 'footer-widget-area-right', 
    'name'        => __( 'Footer-Sidebar (Rechts)', $text_domain ), 
    'description' => __( 'Das ist der rechte Widget-Bereich der Footer-Sidebar.', $text_domain ),
    'before_widget' => '<b id="%1$s" class="footerwidget %2$s">', 
    'after_widget'  => '</b>', 
    'before_title'  => '<h2 class="widgettitle">', 
    'after_title'   => '</h2>', 
) );
}
add_action( 'widgets_init', 'firsttec_widgets_init' );
?>
  • ‚id‘: ist die eindeutige ID der Sidebar und muss auf jeden Fall angegeben werden.
  • ’name‘: der Name der Sidebar wird im Backend unter „Design->Widgets“ angezeigt.
  • ‚description‘: ist eine Beschreibung für die Sidebar die ebenfalls im Backend gezeigt wird.
  • ‚before_widget‘: HTML-Text der vor jedem Widget eingefügt wird.
  • ‚after_widget‘: HTML-Text der nach jedem Widget eingefügt wird.
  • ‚before_title‘: HTML-Text der vor jedem Widget-Titel eingefügt wird.
  • ‚after_title‘: HTML-Text der nach jedem Widget-Titel eingefügt wird.

Nun kopieren wir die Datei footer.php aus dem Parent-Themes Verzeichnis in unser Child-Theme Verzeichnis.

footer.php
Diese Datei habe ich geringfügig angepasst.
In Zeile 15 wird die neue „footer-sidebar“ geladen.

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the id=main div and all content after
 *
 * @package WordPress
 * @subpackage Foghorn
 * @since Foghorn 0.1
 */
?>

	</div><!-- #main -->

	<?php get_sidebar( 'footer' ); ?>

	<div id="footer">	

		<div class="footerleftbox"><span class="copyright">Copyright by: Enrico Sadlowski</span></div>

		<div class="footerrightbox">
	    	<?php if ( $footer = of_get_option('footer_text', 0) ) { echo $footer; } ?>
		</div>

	</div>

</div><!-- #page -->

<?php wp_footer(); ?>

</body>
</html>

Für die Footer-Sidebar habe ich ein paar neue CSS-Anweisungen in die style.css geschrieben.
style.css

#sidebar-footer {
  width: 100%;
  margin-top:100px;
  background: silver;
}

.footer-widget {
  float: left;
  width: auto;
}

.footer-widget-right {
  width:300px;
  float: right;
}

#footer {
  height: 100px;
  margin-top:20px;
  border-top: 1px solid silver;
}

.footerleftbox {
  width:auto;
  padding: 10px;
  float:left;
}

.footerrightbox {
  width: 250px;
  padding: 10px;
  float:right;
}

.clear { clear:both; }
.copyright { color: silver; }

 

Jetzt können wir ins Backend gehen und unter „Design->Widgets“ die gewünschten Widgets in die zwei Sidebar-Bereiche ziehen. Das erste Bild zeigt die neuen zwei Sidebar-Bereiche. In Bild zwei wurde jeweils ein Widget in einen Sidebar-Bereich gezogen.

Wordpress-Footer-Sidebar-LeerWordpress-Footer-Sidebar-Widgets

 

Parents-Theme (Vorher)
Wordpress-Parent-Theme

 


Child-Theme (Nachher)

Wordpress-Child-Theme

Damit das Ganze perfekt wird, wollen wir nun noch im Backend unter „Design->Themes“ einen Screenshot unseres neuen Themes vergeben.  Dazu öffnen wir die Seite im Browser und machen wie gewohnt einen Screenshot des Browserfensters. In einem Bildbearbeitungsprogramm ändern wir nun die Größe  zu 300 x 225 px und speichern es als „screenshot.jpg“,  „screenshot.png“ oder „screenshot.gif“ ab. Kopieren Sie diese Datei in Ihren Child-Theme Ordner. Der neue Screenshot sollte sofort angezeigt werden.

Wordpress-Themesverwaltung-NEU

 

Weiterführende Informationen zum erstellen von Child Themes unter WordPress finden Sie unter folgenden Links

Wenn Ihnen dieser Beitrag gefallen hat oder Sie Tipps, Anregungen oder fragen haben, würde ich mich über einen Kommentar sehr freuen.

 

Über Enrico S.

Programmierer, Webdesigner, Grafiker, Blogger, Screencaster, Arduino- und eMobility Enthusiast. nefilim3006 ist auch bei Google+ vertreten

Ein Kommentar zu “WordPress Themes anpassen durch Child Themes

  1. Pingback: Wie erstelle ich ein Wordpress Plugin? - Fluuux - TechBlog