Mostly Harmless

Mostly about my amusement

Tag: child themes (page 1 of 1)

August 30, 2014

No more @import for me

Well, at least not for current WordPress child themes.

I like child themes and always recommend that people use them instead of modifying any WordPress theme directly. Using a child theme makes your changes belong to you and they won’t get erased when the original theme gets updated.

I’ve told people to use something like this in their child theme’s style.css file.

/*
Theme Name: Sorbet Child theme for Mostly Harmless
Theme URI: https://blog.dembowski.net/
Description: Child theme for the Sorbet theme
Version: 0.1
Author: Jan Dembowski
Author URI: https://blog.dembowski.net/
Template: sorbet
*/

@import url("../sorbet/style.css");

/* Start your custom CSS after this line */

See that @import line? That had previously been required if you wanted to inherit the parent theme’s CSS. At the moment my child theme does not have that @import anymore and instead I’ve created a functions.php file with these lines in it.

<?php

function mh_sorbet_child_style() {
        wp_enqueue_style( 'sorbet-parent-style', get_template_directory_uri() . '/style.css' );
        // wp_enqueue_style( 'sorbet-child-style', get_stylesheet_uri() );
}

add_action( 'wp_enqueue_scripts', 'mh_sorbet_child_style' , 5 );

Which really is a more WordPress way to do it. I added a function mh_sorbet_child_style() where I first queue up the parent theme’s style.css and then queue up the child theme.

Notice how I commented out the second line? The parent theme already queues up the current theme’s style.css file and in my case that is sorbet-child/style.css. In my child theme I do not need to queue it a second time as it’s not necessary.

But I do want to ensure that the parent theme is queued up earlier than the child theme CSS. That’s why I add the wp_enqueue_scripts with a priority of 5 instead of the default 10. That should always load the parent CSS first. If the theme does not queue up it’s style.css that way then I would un-comment out that line.

Just as before, any new CSS will go into my child theme’s style.css file.

 

January 1, 2012

Using WP-PageNavi with the Elemin theme

Update: Added a conditional to ensure that wp_pagenavi() runs once.

The Elemin theme has it’s own built-in page navigation after the posts. It’s attractive, but not quite as flexible as the WP-PageNavi plugin. With this plugin you can put a page counter, link to the start and end pages, etc. It’s a cool add-on and I’ve gotten comfortable using it on my WordPress blog.

Adding support for that plugin to Elemin can be done simply by creating an includes directory for the child theme, and copying the elemin/includes/pagination.php file into the child theme includes directory. You then modify the copy with the wp_pagenavi() code and due to the magic of get_template_part() the child theme will pick that up.

Modifying a copy of a parent theme file isn’t too bad and that file is very small. But that’s not a very interesting solution. What’s more fun is to add support via hooking into the loop.

I’ve made many modifications to my child theme and not once have I had to copy and/or modify one of the parent theme files. For me, that’s the whole point of this exercise: creating a child theme that only uses functions.php and CSS.

So far using that method for this child theme I’ve been able to do the following:

  1. Add a random header image
  2. Made some CSS changes including a page background
  3. Added a fix for Internet Explorer 8 issues
  4. Created a front page view that shows the full content and then the excerpts and without using a front-page.php template

I’m having a great time doing it too. WordPress is very extensible and I’m picking up more and more PHP knowledge as a result of playing with my WordPress blog.

Here’s how I added support for WP-PageNavi to the Elemin theme. Read more

December 13, 2011

Themify child theme fix

Update: Themify fixed the issue and an update is now available. The child theme fix is no longer needed.

I updated my Elemin theme to the latest and greatest and ran into a problem. They’ve changes how style sheets are queued up to use wp_enqueue_scripts.

That’s good, but now my child theme’s style.css will not get loaded, just the Elemin parent style.css file.

Easy to fix and I’ve added the following lines to my child theme’s functions.php file:

add_action( 'wp_print_styles', 'mh_remove_themify_styles' );
function mh_remove_themify_styles() {
        wp_dequeue_style( 'themify-styles' );
}
add_action( 'wp_enqueue_scripts' , 'mh_add_child_style' );
function mh_add_child_style() {
        wp_register_style( 'mh-child-style' , get_stylesheet_uri() );
        wp_enqueue_style( 'mh-child-style' );
}

That removes the parent theme style sheet and adds the child theme’s version.

Update: Themify (seriously, they’re really good and you should buy their themes) is going to address this problem with an update today. Which is good, de queuing their style sheet broke other styling and I ended up using add_action(‘wp_head’… instead of the above.

December 8, 2011

I really am limited by my PHP and CSS

As part of purchasing the Elemin theme I get support from Themify and I asked for CSS help on their forum. It’s a good benefit and part of the package.

I was able to get two full posts on the home page and leave the rest as excerpts but the CSS was baffling me. I couldn’t work out how to set the post-meta to format as I wanted it to.

My CSS is at best “not too good” and I was messing up some inherited properties.

The response was good: why not just wrap the posts in divs with the correct class and let the default style.css do the rest? That way the generated output would look kind of like this:

<div class="list-post">
 [post 1]
 [post 2]
</div>
<div class="grid2">
 [post 3]
 [post 4]
 [post 5]
 [post 6]
 [post 7]
 [post 8]
</div>

That was a real light bulb moment for me. I know I can do that by making a copy of the elemin/index.php file into my child theme directory and making modifications.

So that’s exactly what I did and replaced the regular get_template_part() line with this code:

<!-- child mods -->
<?php if( is_home() and $post_layout == "grid2" and $paged < 2 ) {
   $mh_post_count++;
   switch($mh_post_count) {
      case 1: ?>
         </div><!--/loops-wrapper list-post-->
         <div class="loops-wrapper">
         <div class="list-post">
         <?php get_template_part( 'includes/loop','index');
         break;
      case 3: ?>
         </div><!-- /list-post -->
         <div class="grid2">
         <?php get_template_part( 'includes/loop','index');
         break;
      case get_option('posts_per_page'):
         get_template_part( 'includes/loop','index'); ?>
         </div><!-- /grid2 -->
         <?php break;
      default:
         get_template_part( 'includes/loop','index');
   }
} else {
   get_template_part( 'includes/loop','index');
} ?>
<!-- /child mods -->

I also had to put in a conditional right before get_sidebar() to properly close off the last div. Changing the excerpt to the post content is still handled in the child theme functions.php file.

It all works and I’m now using it my child theme. This only gets applied when I select the two column excerpts page format. Switching to anything else restores the default Elemin formatting.

But you copied and edited a theme file!

Yes, I did and I’m thoroughly ashamed of myself.

There are hooks into different parts of the WordPress loop so that I should be able to put into my child theme’s functions.php file the logic to figure out where in the loop we are and insert the HTML as needed.

The logic is dependent on if we’re at post #1, post #3, and the last post defined by the posts_per_page option. So all I need to do is add the appropriate add_filter() or add_action() to my functions.php file. I already add to the_content using a filter for before and after.

But I’m not quite there yet. I’m pretty sure that I can pull it off with something like add_action( ‘the_post’, ‘insert_before_posts’ ) but I’m still doping it out.

I’m also having a great time doing it too which is really the point of all this effort. Now if only that WordPress Bible would get here sooner…

August 12, 2010

Coraline child theme

Have I mentioned how easy it is to use WordPress child themes? I can’t stress it enough, never modify a WordPress theme. Create a child theme instead.

I just converted a blog from an old outdated Cutline theme to a SVN copy of Coraline.  This is the WordPress.COM replacement for the Cutline theme.  The old theme bugged me for a few reasons, mainly it was the lack of basic features such as Gravatar support. I had meant to clean it up but never got around to it.

It took me less than an hour to make the switch. I retrieved a copy of Coraline like so

$ cd wp-content/themes
$ svn co http://svn.automattic.com/wpcom-themes/coraline coraline

This keeps an unmodified copy of the Coraline theme.  Once it’s in the WordPress.ORG website, I’ll replace it with that copy.

All I had to do was create a separate directory and create a style.css file with the following:

/**
 * Theme Name: Coraline for Stefan's Stuff
 * Description: Jan Dembowski's Coraline Child Theme
 * Version: 1.0
 * Template: coraline
 */

@import url("../coraline/style.css");

/* =Asides
---------------- */

.home #content .aside {
 border-left: 1px solid red;
}

The old asides had a slightly different styling.  I made copies of the header.php and footer.php files into my child theme directory and added an archives.php template. I modified one line in each of the copies.

I tossed in a rotate.php script and copies of the random banner images and I was all set. I did need to resize the old banner images from a width of 970 to 990 but that was it.

Child Themes are cool and once again I can keep the parent theme up to date without worrying about my changes.

July 23, 2010

Use WordPress child themes

Before WordPress 3.0 the default Kubrick theme was called, um, “Default”. In the support forums people would update to the latest and greatest WordPress version and become shocked when their edits to the Default theme were lost.

It’s part of the WordPress distribution. When you override the WordPress files, those get included as well. Now with 3.0 the Default theme is gone and replaced with Twenty Ten. People will still make the mistake and modify the theme directly.

It’s not necessary and by creating a few simple file and directories, using a child them on your own is easy.

I’m a fan of the Hybrid theme and have been using a child theme already. The Vigilance theme caught my eye and I thought I’d give it a try. It was even easier when I located their instructions on how to start off.

1. Start with a pristine copy

I downloaded a copy of Vigilance from the Theme Foundry website and extracted it to my wp-content/themes directory. The version on their website is 1.51 which is slightly more up to date than the version on WordPress.ORG’s site.

2. Create your child theme directory

In wp-content/themes I create a directory called mostlyharmless-vigilance and extracted the files from this zip file into it. This is outlined in The Theme Foundry’s instructions.

3. Modify the CSS on the child theme

In the child theme directory I modified the style.css and added  a few lines:

.center-ad { text-align: center; margin:10px 0 10px 0; }
ul li.widget ul li a {
 display: inline;
 padding: 0;
 background: none;
}
embed {
 background: #fff;
 border: 2px solid #eee;
 }
#wrapper {
 background-color: white;
 border: 1px solid #ccc;
 padding: 15px;
 margin: 25px;
 margin-left: auto;
 margin-right: auto;
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
}
body {
 background-color: #ecf1ef;
}

This was to do provide me a CSS class to

  1. Provide a class to center my 2 ads
  2. Modify how the sidebar links look
  3. Put a border around and embedded videos
  4. Mess with the wrapper ID
  5. And change the color of the body background.

Nothing dramatic and the rounded corners are very 2004.

4. Modify the child theme’s functions.php file

My child theme has one useful line in it like so


php
$GLOBALS['content_width'] = $content_width = 600;
?>

I use oembed to insert YouTube and Vimeo videos into my posts. By adding this line, the embeds become 600px wide when the content supports that.

5. Start modifying files (if you want to)

The Vigilance theme will display that posts featured image if it exists. I comment out that line in index.php to disable the from happening. I copied index.php from wp-content/vigilance into wp-content/mostlyharmless-vigilance and edited line 15

<div class="entry clear">
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail( array(250,9999), array( 'class' => 'alignleft' ) ); ?>

and commented out the if function.

<div class="entry clear">
<?php // if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail( array(250,9999), array( 'class' => 'alignleft' ) ); ?>

Next I copied the header.php file into my child directory and modified the second line DOCTYPE from strict to transitional. Some plugins I use look better in transiti0nal.

Last, I made a copyof single.php and modified it to insert my second ad.

6. Upgrades wont worry me now

The whole point of this exercise was to make changes to the Vigilance theme while not touching the Vigilance theme’s files. When an update to the parent theme comes out, I won’t have to worry about what I’ve changed.  The three files I have modified are easily determined and simple for me to support.

If you only want change the CSS, then it’s even less work and you can skip step #5.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 16 other subscribers
Jan Dembowski

Jan Dembowski

I am a software enthusiast who is easily amused and definitely mostly harmless.

View Full Profile →