• Home
  • blog
  • A Beginners Guide to Titan Framework: Automatically Generate CSS for Your Options

A Beginners Guide to Titan Framework: Automatically Generate CSS for Your Options

Category: Uncategorized

One of the coolest features of Titan Framework is that it can automatically generate CSS for all the option types. There also exists a Sass compiler which not only compiles but also minifies the CSS. Two different ways are defined for generating CSS. Let’s automatically generate CSS for your options.

Ways to Generate CSS With TF

There are basically two ways through which you can automatically generate CSS with TF (Titan Framework):

  1. Via the css parameter
  2. Via the createCSS function

1. Generating CSS via the CSS Parameter

Throughout the series, you’ve come across the css parameter for defining CSS rules in most of the options. It is stated in the documentation that whenever you create any option in an admin page and/or theme customizer section, the css parameter generates CSS automatically (only if you are using that parameter). Let’s list all the options which support this parameter:

  • Text
  • Textarea
  • Color
  • Upload
  • Number
  • Editor
  • Checkbox 
  • Font
  • Radio
  • Radio Palette
  • Radio Image
  • Select

Let’s learn how the css parameter generates CSS properties via an example.

Example Declaration

Here, I’ll create a color type option in an admin panel. Use the following code:

I created a color type option at line #19 which sets the color value. I defined the css parameter at line #25. I’ve defined a class and then inside it I have defined the CSS property where I want the color value to be printed. So I added a class aa_bg_class, and inside it I added a CSS property background-color: value;. Here the keyword value will be swapped with the output of this option, i.e. whichever color the user selects will swap it.

Titan automatically generates a CSS file that contains all your CSS rules for you. It creates the file inside WordPress’s uploads folder in the format: titan-framework-<namespace>-css.css. In my case it is titan-framework-neat-css.css.

Let’s use this option to automatically generate CSS.

Example Usage

I added a div tag with class aa_bg_class and some dummy text on my page. 

Displaying the Result at the Front-End

Let’s select a demo color from the admin.

Generate CSS for Options

Look, the background color has been automagically applied. 

Viewing the result of the save color for options

2. Generating CSS via the CreateCSS Function

There is another way to generate CSS with TF. This is via the createCSS function, which declares all your CSS styles.

Let’s explain how it works with an example.

Example Declaration

I’m using the same color type option which was explained previously.

Here, I created an admin panel named Neat Options at line #7. Then I added a color type option at line #18. Next I defined the createCSS function at line #33 which takes up the variable $aa_color_opt. This is basically the ID of the same color type option I just defined above, and this variable has the value of the color which the end user selected in the admin panel.

Again note that this is a Sass (Syntactically Awesome Style Sheets) variable which corresponds to the ID of the option you want to get the value of. So don’t mix it up with a normal PHP variable.

I’ve added single quotes to avoid escaping the $ sign of the variable. Inside CSS I am targeting h1 headings. I set the value of the color option against the color property of CSS at line #34.

Example Usage

At this stage, if you preview the front-end it displays heading 1 in its default color.

Previewing the header in its default color

Let’s choose any demo color and save it. Suppose I select #ed3325.

Changing the color of the heading

The color of the heading now changes to this new value. Here is the screenshot:

Viewing the updated header

You can read more about the createCSS function.


Have fun generating CSS with Titan Framework. Make sure you are using the latest Titan Framework release

In my opinion, the createCSS function works really well when you need to add multiple CSS values dynamically, in a more controlled and modular fashion. 

If you have any questions, comment here or reach out to me on Twitter.