Thema van nul: Opzet

Het voordeel van een thema gebaseerd op een ander thema is dat je opbouw en CSS van het parent theme gaat overnemen. Je start niet van nul. Je kan CSS en templates overnemen in je child theme om ze wat zaken specifiek te wijzigen.

Als het parent thema al goed doet wat je wenst is dat een goede oplossing. Als je echter veel wil wijzigen kan het wat complex worden.

Een thema van nul is dan zeker iets wat je kan overwegen.

Met onze kennis van HTML/CSS, PHP en de Wordpress template structuur gaan we van eens van nul een thema bouwen.

Hieronder geef ik wat belangrijke PHP functies die specifiek in de Wordpress core zitten om de Wordpress inhoud te verwerken in je templates.

style.css

/*
Theme Name:   Uw thema naam hier
Description:  Het thema voor 'uw site naam hier'
Version:      1.0.0
*/

...

functions.php

De functions.php wordt gebruikt voor:

  • het inladen van stylesheet(s)
  • het creëren van sidesbar(s) binnen Wordpress
  • het creëren van menu(s) binnen Wordpress

Stylesheet inladen

<?php
function uw_thema_naam_enqueue_styles() {
    wp_enqueue_style( 'theme-style', get_stylesheet_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
}

// Voer de functie uw_thema_naam_enqueue_styles uit.
add_action( 'wp_enqueue_scripts', 'uw_thema_naam_enqueue_styles');
?>

Custom logo optie activeren in thema

<?php
function uw_thema_naam_custom_logo_setup() {
	add_theme_support( 'custom-logo', [] );
}

// Voer de functie uw_thema_naam_custom_logo_setup uit.
add_action( 'after_setup_theme', 'uw_thema_naam_custom_logo_setup' );
?>

Je kan het logo nu opladen via “Customizer” > “Website identiteit”. Je moet het thema wel even desactiveren en opnieuw activeren.

Primaire navigatie registreren in thema

<?php
function uw_thema_naam_primary_nav_init() {
    register_nav_menus(
        array('primary' => 'Primary menu')
    );
}

// Voer de functie uw_thema_naam_primary_nav_init uit.
add_action( 'init', 'uw_thema_naam_primary_nav_init' );
?>

Je kan het menu beheren via “Customizer” > “Menu’s”. Je moet het thema wel even desactiveren en opnieuw activeren.

Gebruik van het hoofd beeld activeren

function uw_thema_naam_add_post_thumbnail_supports() { add_theme_support( ‘post-thumbnails’ ); } add_action( ‘after_setup_theme’, ‘uw_thema_naam_add_post_thumbnail_supports’);

Je kan nu via een (custom) post of pagina een hoofd beeld selecteren.

<?php
function uw_thema_naam_sidebar_init() {
    register_sidebar( array(
        'name' => 'Footer',
        'id' => 'footer-sidebar',
        'description' =>  'De footer sidebar verschijnt onderaan.',
    ) );
}  

// Voer de functie uw_thema_naam_sidebar_init() uit.
add_action( 'widgets_init', 'uw_thema_naam_sidebar_init' );
?>

Een sidebar wordt beschikbaar via “Customizer” > “Widgets”. Je kan de inhoud gaan toevoegen via de Gutenberg editor.

Klik hier verder: