Adding a new theme

If you wish to add a new theme to Styles Pro, you can easily do so by adding a new CSS file to the /themes/ folder inside the plugin directory.

Styles Pro will automatically create settings for this theme so you can customize Font sizes, colors and background for your theme just the same as one of the built-in Styles Pro themes.

The easiest way to create your customized theme is to:

  1. Copy all contents of a theme stylesheet that you like, and paste into a new file.
  2. Find and replace the theme slug with your own, new theme slug, It will replace all class names as well.
  3. Change theme name and save as a stylesheet in /themes/ in the plugin directory (use theme slug as filename)
  4. Additionally, you may also find and replace the font names if you wish to change them.

This is it! Theme should now be available for selection and the plugin will also create customization settings for the theme as well.

Rules for adding the a new theme:

  • You must decide upon a unique theme slug:
    • Should be alphanumeric, cannot start with a number.
    • Must not contain any special characters other than _ (underscores)
      • We’ll use theme_slug as our example in this article
  • Theme Stylesheet: It should saved in the /themes/ directory insde the plugin directory. Should be the same as theme slug, followed by .css
    • Following our example, it should be theme_slug.css
  • Theme slug will be added as a Class to the form that theme is applied to, and with a similar wrapper class. It is advised that all styles in your stylesheet would use this targeting and use .theme_slug as class behind the styles so the styles would not conflict with other themes if they’re being used on the same page.
  • All Styles Pro default themes’ slugs will be prepended with sp_, it is advised to use your own prefix so there remains no chance of an accidental override in case a future release has a similarly named theme.

Defining headers in the CSS files:

Consider the following Theme header:

Theme Name: My Custom Theme
Theme Slug: theme_slug
Theme URI:
Author: Warp Lord
Author URI:
Version: 1.0.1
Font: 16px/Josefin Sans/#808080/Google
Font Label: 14px/Josefin Sans/#9A2DB1
  • Theme Name will be used in in theme settings and theme selection menu.
  • Theme Slug will tell the plugin, the filename, css targeting and customization settings.
  • Font and Font Label will allow Styles Pro to find 4 different values separated by a /.
    • Font-size/Font-name/Font-color/Add Google if this Google font should be added when saving theme settings.

You’ll notice in the above example, even though Josefin Sans is a Google font, we haven’t added Google as the last parameter for Fond Label. It is because we have already told the plugin to add the font, no need to add it twice. You may add /Google to the end if you are adding another Google font for Font Label.

Leave a Reply