How To Integrate Semantic UI Into Your WordPress Theme

CSS front-end frameworks allow you to quickly churn out beautiful stylish elements with minimal coding. That’s because the CSS styles are already declared in the framework. All you do is get the markup right, add the required CSS classes and there you have your fancy call-to-action button.

But how do you integrate this awesomeness into your theme? There are several free WordPress themes that are powered by some popular CSS UI frameworks like Bootstrap, Semantic UI etc. But what about integrating these frameworks into your own theme or plugin? The things can get tricky if not done right.

Here’s a quick checklist:

1. Things to keep in mind

One of the critical points to be noted is that Semantic UI (or any CSS framework) for that matter must be enqueued before any other stylesheet. There are two reasons for doing this:

1. Semantic UI includes the CSS resets. If you enqueue Semantic UI after other stylesheets, the resets in Semantic UI will reset your declared styles.
2. Semantic UI gives you a strong typographical base that you can build upon without having to redo things in your style.css. Smaller style.css means less work and you only style WordPress specific markup-elements.

Second, remove any CSS resets in your style.css since the resets are already included in Semantic UI. If you don’t do this, it will break the Semantic UI styles.

2. Download the framework and include into your theme

Keeping things simple, you can download Semantic UI from https://github.com/Semantic-Org/Semantic-UI-CSS. The dist.zip file inside the master zip is not required. Unzip the contents of the zip file, remove dist.zip and upload the rest of the files and folders to respective folder in your theme.

3. Enqueue the styles & scripts

Add the following code to enqueue the Semantic UI stylesheet and scripts including dependencies like jQuery.

if ( current_theme_supports( 'convertica-semantic-ui' ) ) {
        wp_enqueue_script( 'sui-script', get_stylesheet_directory_uri() . '/semantic-ui/semantic.min.js', array(
             'jquery' 
        ), false, true );
        wp_enqueue_style( 'sui-style', get_stylesheet_directory_uri() . '/semantic-ui/semantic.min.css' );
    }

Also, you don’t need to involve individual components inside the components folder. They are already included in the above files.

4. Getting Started With Semantic UI

Finally you are ready to start using Semantic UI to style your WordPress theme. Head over to the getting started guide for Semantic UI to quickly begin creating your markup and stylish components.

Which CSS UI framework do you use and how do you integrate it to your WordPress theme?