How to Easily Add Custom CSS to Your WordPress Site
  • 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.

23_2 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 ();}}
23_3 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).
24_4 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.

Did you know ?

One standard license is valid only for 1 project. Running multiple projects on a single license is a copyright violation.

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.