Fixing the WordPress Theme for good

blub 1 Minute

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' );
?>
Published