Sep 102010
 

With effect from version 3.7.5 of Suffusion any reference to Blog Features below should be read as Back-end Settings.

Thanks to Suffusion’s fairly complex back-end coding there are a few tips and tricks that will help you as a user use child themes effectively.

When Should I Use Child Themes?

The simplest use case I can think of for using child themes is if you have BuddyPress on a WP-MS (WordPress Multi-Site) configuration, because you will want to use the Suffusion BuddyPress Pack and you would want to prevent its files from getting overwritten every time you upgrade the theme.

Apart from that if you have significant changes that you want to  make to the layout, which cannot be accommodated through CSS alone, using a child theme is a very clean and elegant way to do it.

What Should I Know While Using Child Themes in Suffusion?

In this post I will highlight two tips and tricks regarding child themes in Suffusion.

  1. Import CSS
    As per WordPress guidelines this is the generic header of a child theme’s style.css should look like this:
    /*
    Theme Name: Son of Suffusion
    Theme URI: http://your-theme-url
    Description: Child Theme based on Suffusion
    Version: 1.0.0
    Author: Your Name
    Author URI: http://your-url
    Template: suffusion
    */
    
    @import url("../suffusion/style.css");

    But here is a catch. You are typically going to select a skin for Suffusion. If so, you will have multiple stylesheets included in your page, depending on your skin:

    1. For light themes (if the theme is Gray Shade 1 on a light background): style.css → skins/light-theme-gray-1/skin.css
    2. For dark themes (if the theme is Gray Shade 1 on a dark background): style.css → skins/light-theme-gray-1/skin.css → dark-style.css → skins/dark-theme-gray-1/skin.css
    3. For Minima (and future skins): style.css → skins/minima/skin.css

    Note that this entire stylesheet hierarchy is loaded before your child theme is loaded, because of the complexity of the design. So by including your import statement you are actually re-inserting the base style.css file after all the other stylesheets. That will naturally cause display issues.

    As it turns out, the fix is easy. You have many options, actually:

    1. Go to Blog Features → Child Themes and set it to not inherit any stylesheets. You can then pick and choose your stylesheet declarations in this manner:
      /*
      Theme Name: Son of Suffusion
      Theme URI: http://your-theme-url
      Description: Child Theme based on Suffusion
      Version: 1.0.0
      Author: Your Name
      Author URI: http://your-url
      Template: suffusion
      */
      
      @import url("../suffusion/style.css");
      @import url("../suffusion/skins/minima/skin.css");
      

      This way you are telling the theme to ignore the skin selection and you are handpicking the skins you want. Note that this method requires some familiarity with the theme’s internals.

    2. The second option works if you are using Suffusion’s internal optimization features from Blog Features → Site Optimization → Use Compression for CSS. You can choose to use either of the methods with GZIP compression. In addition, set the Blog Features → Child Themes to inherit the stylesheets. This method ignores any import statements that you might have in your child theme’s style.css
    3. The third method is even simpler. You can leave your Blog Features → Child Themes to inherit the stylesheets. But simply don’t put any @import statements in your style.css. That’s all. This is best suited if you are using the child theme as a replacement for the Custom Styles option.

  2. BuddyPress tag

    This is a very simple trick for using Suffusion with the Suffusion BuddyPress Pack. I have explained this trick on the BP Pack page too. If you are running WordPress in a multi-site mode and you want to use Suffusion, here is what you will see if you activate Suffusion as your default theme:

    You’ll need to activate a BuddyPress compatible theme to take advantage of all of the features. We’ve bundled a default theme, but you can always install some other compatible themes or upgrade your existing WordPress theme.

    Here is what you do to fix this message:

    1. Create a child theme with the following header:
      /*
      Theme Name: Son of Suffusion
      Theme URI: http://your-theme-url
      Description: Child Theme based on Suffusion
      Version: 1.0.0
      Author: Your Name
      Author URI: http://your-url
      Template: suffusion
      Tags: buddypress
      */
      

      The last line is very important. It tells WP that your theme is BuddyPress-compatible.

    2. Download the files for the Suffusion BuddyPress Pack and put them in your child theme’s folder.
    3. Activate the child theme. The message goes away!!

    I could have added the "buddypress" tag to Suffusion by myself, but that really really slows down the approval of the theme. In fact I had added the tag in a prior version, but disappointed with the delay in it getting approved I separated BP support from the core theme.

  3. Sidebar Management

    This is a very cool trick if you want to create your own templates with different sidebars etc. I introduced this feature in version 3.6.6 after an interesting discussion on the support forum. Note: You don’t need to do all of this if you are adding a regular template that has the same number of sidebars as the rest of your site.

    The core of the requirement is that you might want to create your own templates that have specific arrangements of sidebars and other widget areas. For example you might create a template for a custom post type that uses 1 sidebar while the rest of your site uses 2 sidebars. How would you tell Suffusion that this template has 1 sidebar? Given that all components of Suffusion are fixed-width, you cannot simply avoid calling a sidebar function – that will result in an empty space.

    So how is this to be done? The answer: using filter hooks. I introduced two filter hooks in 3.6.6 – suffusion_filter_template_prefixes and suffusion_filter_template_sidebars. In the functions.php file of your child theme, put in this code:

    <?php 
    add_filter('suffusion_filter_template_prefixes', 'my_custom_template_prefixes');
    function my_custom_template_prefixes($template_prefixes) {
        if (is_array($template_prefixes)) {
            $template_prefixes['my-custom-template-1.php'] = false;
            $template_prefixes['my-custom-template-2.php'] = false;
            // In the above replace my-custom-template-1.php etc with the name of your template file.
            // For every custom template that has specific sidebar requirements create a line such as the above.
        }
        return $template_prefixes;
    }
    add_filter('suffusion_filter_template_sidebars', 'my_custom_template_sidebars');
    function my_custom_template_sidebars($template_sidebars) {
        if (is_array($template_sidebars)) {
            $template_sidebars['my-custom-template-1.php'] = 1;
            $template_sidebars['my-custom-template-2.php'] = 1;
            // In the above replace my-custom-template-1.php etc with the name of your template file and "1" with the number of sidebars you need.
            // For every custom template that has specific sidebar requirements create a line such as the above.
        }
        return $template_sidebars;
    }
    ?>
    

    Be careful about not putting any empty spaces or new lines before and after the php tags! Otherwise you will get the notorious white screen of death.

    Once you have this code in place, you can have your custom templates in your theme with their unique sidebar arrangements, and not worry about Suffusion updates overwriting them.

Note that the last feature is not currently available, but it should soon be, based on when the next version is approved.

As I find more use cases of this sort I will post them for your consideration.

  28 Responses to “Suffusion Child Themes: Tips and Tricks”

Comments (23) Pingbacks (5)
  1. […] http://www.aquoid.com/news/2010/09/suffusion-child-themes-tips-and-tricks/ For the Suffusion theme you need to be more careful (because of the modifying settings to the theme). […]

     
  2. […] sure to set it up appropriately following different tutorials on the […]

     
  3. […] They will all be available from the translations page. The best way to use a translation will be to create a child theme. Posted by Sayontan at 12:40 […]

     
  4. […] Först ett huvud som beskriver syftet med filen och definierar den sedan två importrader som importerar föräldertemats css-filer. Den andra importraden används om man i inställningarna för Suffusion väljer skin Light gray. Väljer man ett annat skin får man ändra importraden (se Suffusion Child Themes). […]

     
  5. […] That’s it, I hope that you saw the importance of child themes (and the difficulty of setting a child theme of Suffusion is presented in the dark box from the beginning of the post). More about child themes of Suffusion can read in this great article of Sayontan: http://aquoid.com/news/2010/09/suffusion-child-themes-tips-and-tricks/ […]

     

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*