December 8

How to Easily Add Custom CSS to Your WordPress Site

Surely you have to edit any post, post or any entry on your website with WordPress themes and you may face the problem when you need to add your custom CSS code. It may be necessary for the styling of a section or an item on a page. You can, of course, add this CSS code in the main style sheet, but it is not the best solution, because the more your stylesheet.css - the worse for optimal quick work of your website using one of WordPress themes, and there is an extra code to anything, if it is used only on one page. Further is disclosed how to add your own CSS code by modifying the file fucntions.php, which is standard in any subject (theme) WordPress. As a result, when you create a page or article, you'll be able to add your own code.

You need to find the file titled functions.php – the main file to change in any WordPress theme.

To start, you must find the functions.php of your WordPress template. This can be done through FTP and make changes manually. The path to this file is usually: /wp-content/themes / YourThemeTitle/ functions.php. Or open it via the console: Console - Appearance - Editor - in the right column choose functions.php file straight from your WordPress theme.

Add the necessary custom CSS code to your WordPress themes:

// Custom CSS Widget add_action ('admin_menu', 'custom_css_hooks'); add_action ('save_post', 'save_custom_css'); add_action ('wp_head', 'insert_custom_css'); function custom_css_hooks () { add_meta_box ('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high'); add_meta_box ('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');} function custom_css_input () {global $ post; echo '<input type = "hidden" name = "custom_css_noncename" id = "custom_css_noncename" value = "'. wp_create_nonce ('custom-css'). '" />'; echo '<textarea name = "custom_css" id = "custom_css" rows = "5" cols = "30" style = "width: 100%;">'. get_post_meta ($ post-> ID, '_ custom_css', true) . '</ textarea>';} function save_custom_css ($ post_id) { if (! wp_verify_nonce ($ _ POST ['custom_css_noncename'], 'custom-css')) return $ post_id; if (defined ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id; $ custom_css = $ _POST ['custom_css']; update_post_meta ($ post_id, '_custom_css', $ custom_css);} function insert_custom_css () { if (is_page () || is_single ()) { if (have_posts ()): while (have_posts ()): the_post (); echo '<style type = "text / css">'. get_post_meta (get_the_ID (), '_custom_css', true). '</ style>'; endwhile; endif; rewind_posts ();}}

This script adds a box with an additional input field for your custom CSS code on every page or section of your site using free or premium WordPress themes when you are writing or editing CSS. If, after adding this code, you have no an additional input field for custom CSS - check your "Settings Screen" at the top of the page. Maybe it is necessary to click on “Custom CSS” to display this box in your WordPress template.

The best plugin for editing CSS style in WooCommerce themes

Another method of editing the CSS code is to use the special plugin that can be added to WooCommerce themes. There is a considerable number of plugins that allow you to change the stylesheet. Our specialists recommend using a free plugin Jetpack, which contains the module for editing Custom CSS.

Jetpack’s features for editing custom CSS code:

The module allows you to edit Custom CSS styles directly from the administration panel of your WooCommerce theme;
FTP Access does not require special settings or hosting site;
Custom CSS is backlit and syntax checking, audit support;
You can use the multiple CSS preprocessor (LESS and Sass).

If you have any questions left about how to add. Edit custom CSS code in any WordPress themes and WooCommerce templates, you can ask them on our forum or during the talk with the Support Service of our project.