Home>Knowledge Base>WordPress>Customizing a WordPress Theme Based on Suffusion
User Login
Username
Password
 
 Login
Information
Article ID20
Created On11/6/2010
Modified11/6/2010
Share With Others

Customizing a WordPress Theme Based on Suffusion

Instructions for Customizing a WordPress Theme Based On Suffusion

Suffusion is the most amazingly powerful WordPress theme we have ever discovered. The tremendous power of this theme is not so much that it gives you a look for your site, but rather a truly in-depth power to control a tremendous number of aspects of that look -- right through the WordPress control panel. You can download the Suffusion theme here:
http://wordpress.org/extend/themes/suffusion

Here are the steps we use to customize a site theme based on Suffusion:
 
Step 1: Copy the Suffusion theme and rename this for the site; then log into the blog and set it to use this theme (you may have to activate Suffusion and then activate this new theme). For example, the the domain name for the site is MyDomain.com, rename this copy of Suffusion to "MyDomain".

Step 2: On the left side of the dash board, click on Suffusion and then Visual Effects. Find a theme that is relatively close to the style of the web site and select it.

Step 3: Visual Effects / Header Customization
Set the settings which are most appropriate for the design.

Step 4: Visual Effects / Theme Skinning
Set the settings which are most appropriate for the design.

Step 5: Visual Effects / Body Font Settings
Set the settings which are most appropriate for the design.

Step 6: Visual Effects / Footer Customization
Set the settings which are most appropriate for the design. Enter an XTML markup needed here.

Step 7: Visual Effects / Sizes and Margins
Set the settings which are most appropriate for the design.

Step 8: Visual Effects / Custom Emphasis Elements
Set the settings which are most appropriate for the design.

Step 9: Sidebars and Widgets
Set the settings which are most appropriate for the design.

Step 10: Blog Features
You may need to change some settings under Main Navigation Bar Setup

Step 11: Create custom override styles
Once the customization of the Suffusion theme has been styled this far, further styling may need to be done through an override style sheet. Under Blog Features in Suffusion, select the Custom Includes tab. In the field for First Additional Stylesheet Link, provide the fully qualified URL for a new style sheet called style-override.css. Make the path to this file be in the customized version of the Suffusion theme you set up above, for example http://www.mydomain.com/blog/wp-content/themes/mytheme/style-custom.css

Step 12: Create whatever styles you need to override other inheriting styles in the theme in the stylesheet identified in Step 11.

Step 13: You will likely need to edit markup for the header. In Suffusion, the markup for the header is dynamic and stored in a function:
/blog-root/wp-content/themes/mytheme/functions/actions.php
function suffusion_display_header()


Step 14: Similarly, while Suffusion does provide locations to enter markup for the footer regions (Visual Effects: Footer Customization), you may need to further edit the markup beyond these controls. Like the header, the footer is also dynamically generated through a function in Suffusion, which you will find here:
/blog-root/wp-content/themes/mytheme/functions/actions.php
function suffusion_display_footer()

Using the Suffusion theme to configure steps 2-11, you should only need to edit two files: /blog-root/wp-content/themes/mytheme/functions/actions.php, and /blog-root/wp-content/themes/mytheme/style-custom.css