Genesis Child Theme auf Basis von Tailwind CSS erstellen (Teil 2)

In diesem Teil des Tutorials wird das Genesis Child Theme eingerichtet.

style.css

Zunächst muss eine style.css mit folgendem Inhalt im Theme-Verzeichnis angelegt werden:

/*
Theme Name: Tailwind Demo
Theme URI: https://purewp.io/
Description: This is a Tailwind CSS Demo Theme
Author: Sebastian Widmann
Author URI: https://www.sebastian-widmann.de/

Version: 1.0.0

Template: genesis

Text Domain: tailwind-demo
*/

functions.php

Nun, eine functions.php mit folgendem Inhalt anlegen:

<?php

/** SETUP THEME **/
add_action('genesis_setup', function () {

    // Define theme constants.
    define('CHILD_THEME_NAME', 'Tailwind Demo');
    define('CHILD_THEME_URL', 'https://www.sebastian-widmann.de');
    define('CHILD_THEME_VERSION', '1.0.0');

    // Add HTML5 markup structure.
    add_theme_support('html5', ['comment-list', 'comment-form', 'search-form', 'gallery', 'caption']);

    // Add viewport meta tag for mobile browsers.
    add_theme_support('genesis-responsive-viewport');

    // Add theme support for accessibility.
    add_theme_support('genesis-accessibility', [
        '404-page',
        'drop-down-menu',
        'headings',
        'rems',
        'search-form',
        'skip-links',
    ]);

    add_theme_support('custom-background');

    // Add theme support for footer widgets.
    add_theme_support('genesis-footer-widgets', 2);

    // Unregister layouts that use a secondary sidebar.
    genesis_unregister_layout('content-sidebar-sidebar');
    genesis_unregister_layout('sidebar-content-sidebar');
    genesis_unregister_layout('sidebar-sidebar-content');
    genesis_unregister_layout('sidebar-content');

    // Unregister secondary sidebar.
    unregister_sidebar('sidebar-alt');

    // Move Primary Navigation in site-header wrap
    remove_action('genesis_after_header', 'genesis_do_nav');
    add_action('genesis_header', 'genesis_do_nav', 12);

    // Remove Site Description
    remove_action('genesis_site_description', 'genesis_seo_site_description');
}, 15);

/** LOAD TEXT DOMAIN **/
load_child_theme_textdomain('tailwind-demo');

/** GOOGLE FONTS */
 add_action('wp_enqueue_scripts', function () {
     wp_enqueue_style('google-fonts', '//fonts.googleapis.com/css?family=PT+Sans|Open+Sans:300,400,600');
});

/** ADD ADDITIONAL CSS **/
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('tailwind', CHILD_URL . '/main.css', [], CHILD_THEME_VERSION);
}, 1);

Im nächsten Schritt kann das „Tailwind Demo“-Theme im WordPress Backend aktiviert werden. Das neue Child Theme ist damit (in einer zugegebenermaßen sehr frühen Version) aktiv.

Weiter mit Teil 3.

Schreibe einen Kommentar