Customizing Twenty Twenty-One Theme

I did not succeed in installing a proper “Child-Theme” to the “Twenty Twenty-One” despite many descriptions on the Internet and many trials: the child’s style was applied but the parent style got lost (e.g. the logo) even if it was loaded.

Remarks:

  • Activating / deactivating of themes: just “Activate” a new theme – the previous theme will be deactivated. Only one theme is active.
  • The style file can also be included in the functions.php of twentytwentyone (/wp.nosco.ch/wp-content/themes/twentytwentyone/functions.php) by inserting the line
    wp_enqueue_style( 'https://wp.nosco.ch/jk/style.css', "my css-file");
    after
    wp_enqueue_style( 'twenty-twenty-one-style', …);

I customized the theme using own files that are included by the the original theme.

My customization with 3 files.

  • jk_header.php : include this file at the end of header.php (must be done after any update of the Theme)
  • jk_footer.php : include this file at the end of footer.php (must be done after any update of the Theme)
  • jk_style.css : include this file in jk_header.php
<?php 
    wp_head(); 
 
    global $JK_WP_THEME, $JK_WP_FILEROOT, $JK_WP_DOCROOT;
    $JK_WP_THEME = "twentytwentyone"
    $JK_WP_FILEROOT = "/home/noscoch/www/wp.nosco.ch/jk_wp";     // use in PHP
    $JK_WP_DOCROOT  = "https://wp.nosco.ch/jk_wp";	         // use in href=...

    include_once("$JK_WP_FILEROOT/themes/$JK_WP_THEME/jk_header.php"); 
?>  
<?php 
    wp_footer(); 

    global $JK_WP_THEME, $JK_WP_FILEROOT, $JK_WP_DOCROOT;
    include_once("$JK_WP_FILEROOT/themes/$JK_WP_THEME/jk_footer.php"); 
?> 
// jk_header.php
<?php
    global $JK_WP_THEME, $JK_WP_FILEROOT, $JK_WP_DOCROOT;

    echo "<link rel='stylesheet' href='$JK_WP_DOCROOT/themes/$JK_WP_THEME/jk_style.css' /> \n";
?>

When editing the WordPress files header.php and footer.php be careful about line endings. These files have usually only <CR> as line endings, so adding //-comments to the end of lines break the php-script. The easiest remedy is to end the added lines with <CR><NL>.

Customization of the css styles is very tedious. The ID or class of the respective widget must be found in the debugger/inspector of the HTML page. Usually many classes apply for each element and the “nesting” of classes must be taken into account. Finally, there are different layouts for the desktop, the tablet and the mobile device. I was not able to change the width of the main text and had to install a special plugin “Options for Twenty Twenty-One“. Even if this plugin allows to change the width of the text and some other widgets, it is rather restricted and not sufficient.

It should be noted that CSS can also be adapted in the Customize section of WP: “Additional CSS”. The problem of specifying the widget remains. Some help can provide the following articles:

Nach vielen Änderungen des css-Stylesheets sind einige Probleme geblieben. Die meisten betreffen die Darstellung auf dem Smartphone Samsung Galaxy S9:

  • Der Samsung Browser zeigt falsche (resp. keine) Abstände zwichen Paragraphen. Der Chrome Browser zeigt sie richtig an.
  • Unten ist eine Zeile mit Kontakten und Ikonen. Der Samsung Browser zeigt sie richtig an. Der Chrome Browser zeigt die Nosco Ikone überhaupt nicht an.

Leave a Comment

Your email address will not be published.