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.
- 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:
- For light themes (if the theme is Gray Shade 1 on a light background): style.css → skins/light-theme-gray-1/skin.css
- 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
- 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:
- 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.
- 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
- 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.
- 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:
- 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.
- Download the files for the Suffusion BuddyPress Pack and put them in your child theme’s folder.
- 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.
- Create a child theme with the following header:
- 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_prefixesandsuffusion_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.
First and foremost thank you very much for all your hard work.
i have been looking all over the place and i cannot find the child theme version so i can use with bp.
can you post the link for the one that works the best with buddy press? Please.
i would greatly appreciate it
btw, is it possible to download the suffusion all ready with the updates and ready to go for bp?
have a good day
again thanks a million
hello, sayontan,
i am having the hardest time getting the @ import to work.
is it suppose to look something like this
@import url (http://my url/wp-content/themes/suffusion/light-theme-blue-pale/style.css”);
or
@import url (..suffusion/light-theme-blue-pale/style.css”);
i tried both and neither is working for me.
english is not my first language so i am very lost, please help me.
can someone please help me. i really can’t figure this out. please.
Please use the support forum for queries. Your declaration is wrong at several places:
I apologize, i just could not find the help online.
as you can see i am very lost.
so how would i have @import url(“../suffusion/ight-theme-pale-blue/style.css”);
to work for me?
As suggested, please post to the support forum.
I did and search all over the forum for help. why won’t you just show me here. i am sure tons and tons of people have the same question please. i follow the instruction that you have above and not click inherit and put the codes. still not working. please sayontan.
Jon,
I have already responded to your query on the support forum. It is my policy not to handle support through the comments section.
Sayontan.
thank you very much.
much appreciate it.
love the theme. you are a genius
take care
I’m sorry, I really don’t understand where to put this child theme language and I don’t understand how to open the buddy press pack into the child them once I do set it up. Please help! Thank you.
Have you seen the page for the Suffusion BuddyPress Pack? It tells you how to install the plugin.
Please use the support forum for further queries.
You have been hacked. I would suggest you try and follow your link above.
:-/ Kindly elaborate. Which link?
Hi Sayontan!
Thanks for your good work. Don’t worry about bugs in 3.7.7 – we know, you work hard.
I have an issue: I’m trying to use more then one child theme with WP-MS. It works, but not perfect. Can you fix it?
Thanks
Leo
Hate this new “not so friendly” feature. When I say my language is Dutch (nl_NL) in de config.php file, every other skin is translated in the right language…. Above is too much work to translate the skin. Thats why I allready have change the skin of my website dennisreith.nl to another one. I love the Suffusion skin, but really think you will lose a lot of users with this way of translating a skin. I also think to change the skin of my other sites (pchulpbrabant.nl). Hope you will fix this option in a new release soon………
Not sure what you mean at all. What are you referring to? If you set your language to nl_NL even Suffusion gets translated correctly. So what is the concern? And what needs to be fixed? Using child themes for translation is a pretty standard feature for several advanced themes. Plus I am trying to get users to embrace a good process for preserving their changes through upgrades – nothing wrong with that.
Is there any way to have a simple how to get a simple translate to suffusion? From what i read here i understand greek.
On the translate page it says that the easy way? to translate suffusion is to create a child theme and it directs me here. The problem is that for users like me that do not have the know how i see no easy to use guide.
Anyway thanks in advance for all your hard work. I might go back to a much earlier version to do it
The translation is very simple. The basic steps are outlined in the Translations page. If you don’t want to create a child theme you can simply download the files for Greek from the right side here and put the extracted PO and MO files in the translations folder of suffusion. The reason I recommend a child theme is because if you upgrade the theme your translation will be safe, otherwise every time that you upgrade the theme you will have to copy the translation files.
[…] https://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). […]
[…] sure to set it up appropriately following different tutorials on the […]
When I make a child theme with Suffusion 3.8.1, following your guide, I lose my Main Navigation bar, even without otherwise customized css. Am I doing something wrong?
Great work btw. It’s a great pleasure working with Suffusion otherwise!
[…] 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 […]
I just tried Step (1) above to import the CSS, and noticed two discrepancies with the current version (3.9.0). In the following line:
style.css → light-theme-gray-1/style.css → dark-style.css → dark-theme-gray-1/skin.css
there is now an extra “skins” directory for the skin.css files, and the 2nd file listed above should be skin.css, not style.css.
So the sequence should be (for 3.9.0, of course):
style.css → skins/light-theme-gray-1/skin.css → dark-style.css → skins/dark-theme-gray-1/skin.css
The extra subdirectory is not a big deal (and is valid for the light and minima skins as well), but people do need to make sure they’re importing both skin.css files.
Anyway, just thought I’d share this! Thanks again for a great theme!
Thanks. I have fixed the article.
Is it also necessary to include the rounded-corners.css file since v4.0.0? Or do style.css and skin.css suffice in all light themes?
[…] 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). […]
[…] 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: https://aquoid.com/news/2010/09/suffusion-child-themes-tips-and-tricks/ […]