Fixing the WordPress Theme for good

As I wrote before: It absolutely annoys me that most WordPress themes do not show the side bar at my preferred browser window width. I fixed that once but that fix got overwritten when the theme was updated.
Somebody suggested I create a child theme to overcome that problem (I cannot find that comment any more, otherwise I would attribute this to the commenter) and gave me a link to a tutorial.

So I went and did it. It’s actually quite simple to do:

  1. Create a new subdirectory in wp-content/themes
  2. Create a style.css file in that directory with a header referring to the parent theme and the changes
  3. Create a functions.php file that loads both style sheets

So, my themes directory now looks like this:

wp-content/themes
   * independent-publisher-2-child
   * independent-publisher-2-wpcom

independent-publisher-2-child contains two files:

  1. style.css
    /*
    Theme Name: Independent Publisher 2 Child
    Theme URI: https://blub.dummzeuch.de/themes/independent-publisher-2-child/
    Description: Fixes some annoyances in Independent Publisher 2
    Version: 1.0
    Template: independent-publisher-2-wpcom
    Author: Thomas Mueller
    Author URI: https://blub.dummzeuch.de
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: independent-publisher-2-child
    */
    
    /*--------------------------------------------------------------
    16.3 - >= 945px
    --------------------------------------------------------------*/
    
    @media screen and (min-width: 945px) {
    	.has-header-image #hero-header {
    		padding: 16.6vh 3.5em;
    	}
    	.has-header-image #hero-header .inner {
    		max-width: 1080px;
    	}
    	#infinite-footer .container {
    		max-width: 740px;
    	}
    	.has-sidebar #infinite-footer .container {
    		max-width: 1080px;
    	}
    	.content-wrapper {
    		box-sizing: border-box;
    		max-width: 1080px;
    		margin: 2.625em auto 0;
    		padding: 0 1.75em;
    	}
    	body:not(.has-header-image) .site-header {
    		margin-bottom: 0;
    	}
    	.content-area {
    		max-width: 740px;
    		margin: 0 auto;
    	}
    	.has-sidebar .content-area {
    		float: left;
    		width: 100%;
    		max-width: 100%;
    		margin: 0 -26% 0 0;
    	}
    	.has-sidebar .site-main {
    		margin: 0 26% 0 0;
    		max-width: 740px;
    	}
    	.has-sidebar .site-content .widget-area {
    		float: right;
    		width: 22%;
    	}
    
    	body:not(.has-header-image) .site-main > article:first-child {
    		padding-top: 1.75em;
    	}
    }

    The part after the header is a copy of the 16.3 section from the Independent-Publisher 2 styles.css, adapted to be used if the minimal width is >= 945 pixels rather than the default.

  2. functions.php
    <!--?php
    function my_theme_enqueue_styles() {
    
        $parent_style = 'independent-publisher-2-wpcom-style';
    
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'independent-publisher-2-style',
            get_stylesheet_directory_uri() . '/style.css',
            array( $parent_style ),
            wp_get_theme()--->get('Version')
        );
    }
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    ?>
    

w