Looking to add some inline CSS in your WordPress theme or plugin? WordPress has a nifty method to properly insert inline CSS style codes in the page HTML “head” properly.
Web design is not just about creating elegant looking websites. Crafting websites that follow the best practices of coding and HTML markup cannot be ignored by a good web designer. For great web design, the user experience design or look should be complemented with the perfect code that adhere to the standards. Unfortunately, a lot of web designers, including WordPress developers, fail to craft websites that adhere to the basics.
Recently, I found a WordPress plugin which inserted inline CSS within the body itself. Though it did the work, the solution is far from ideal. Inline CSS method should not be used to place large CSS blocks inside the HTML body. You should never echo any CSS block inside the page content. All CSS code should be within the “head” section of HTML.
There are three ways of inserting a style sheet:
- External CSS: Best way to add CSS styles. With an external style sheet, it is easy to manage and maintain the website design. Each HTML page should reference the external style sheet file within the <link> element, inside the head section.
- Internal CSS: For adding any CSS in specific HTML page, it can be added within the <style> element, inside the head section.
- Inline CSS: Inline styling should be limited to minor styling for individual elements. To use inline styles, the style attribute are added to the element itself. Though it is possible to style individual elements via style attributes, you should prefer the other two methods.
Need for Inline or Internal CSS in WordPress
When you have to generate CSS programmatically using the theme or plugin settings, you do not have an external CSS file ready. Either you need to generate the CSS file using PHP (which isn’t easy or the ideal option), or you can output the same within the head section, within the <style> element.
For the second solution of adding CSS, you have two options:
- Insert the CSS block by hard-coding the CSS style within the header file
- Compile CSS and use WordPress enqueue function to insert inline style
Adding CSS & JS Files in WordPress
For better control and functioning, WordPress has the following functions to add scripts and styles. Using these functions, instead of adding them directly in the header file, gives you better flexibility and control. You can add CSS files and JS only when required, by adding conditions.
- wp_enqueue_script (for JS files)
- wp_enqueue_style (for CSS files)
Here’s an example of how to use these functions to add scripts and style sheets properly in WordPress.
function rt_custom_enqueue(){
//wp_enqueue_style('string $handle', mixed $src, array $deps, mixed $ver, string $meida );
wp_enqueue_style('rt-customstyle', get_template_directory_uri() . '/css/custom.css', array(), '1.0.0', 'all' );
//wp_enqueue_style('string $handle', mixed $src, array $deps, mixed $ver, bol $in_footer );
wp_enqueue_script('rt-customjs', get_template_directory_uri() . '/js/custom.js', array(), '1.0.0', 'true' );
}
add_action('wp_enqueue_scripts', 'rt_custom_enqueue');
Adding Inline CSS & JS in WordPress
Like CSS and JS files, WordPress has functions to handle adding small code blocks. You can add some inline CSS and JS to entire site or link them to certain files, and also add conditional outputs.
WordPress has the following functions to add inline scripts and styles.
- wp_add_inline_script (for JS)
- wp_add_inline_style (for CSS)
These two functions allow you to add chunks of CSS or JS in the head section along with the relevant file. If the associated file is not enqueued, the inline codes are skipped.
Here’s the detailed explanation of the inline style function.
wp_add_inline_style( string $handle, string $data );
$handle: (String) (Required) Name of the stylesheet (as set in the style enqueue function) to add the extra styles to.
$data: (String) (Required) String containing the CSS styles to be added.
Now, we come to the part that of the real solution to the problem faced. Properly adding inline CSS style in WordPress, rather than just echoing them within the body. Below is a basic example of using the inline style enqueue function.
/**
* Add color styling from settings
* Inserted with an enqueued CSS file
*/
function rt_custom_enqueue() {
wp_enqueue_style('rt-customstyle', get_template_directory_uri() . '/css/custom.css', array(), '1.0.0', 'all' );
$color = get_theme_mod( 'rt-custom-color' ); //E.g. #FF0000
$custom_css = ".customcolor{background: {$color};}";
wp_add_inline_style( 'rt-customstyle', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'rt_custom_enqueue' );
That’s it. Now, you don’t have to output the CSS within the body. Add them properly into the head section, associated with the relevant style sheet.