How can I add CSS to WordPress pages?

The Digital Marketing team has built the GSU WordPress themes using official Georgia State-themed colors, fonts, and spacing and margins that work specifically with the layouts as they are intended. In order to use our specifically themed elements (buttons, accordions, tabs, and toggles), please see our article on Georgia State Flex Theme Elements.

There are times though when some styles that are not already provided in the Flex Theme may be needed. If a new CSS style is required on a single page of a given site, open that page in the WordPress dashboard editor, and click on the "gear icon" in the top right of the "WPBakery Page Builder" block. Then add the css required on this specific page in the popup window that appears. Then save the page and view it from the front end to verify that the css is working properly. 

If the same css is required on multiple pages throughout a given site, access CSS & JS Toolbox Plus in the left menu bar of the WordPress dashboard. Click on "New Code Block." When the new, blank code block appears, add the CSS that is needed in it, making sure to bookend your css with <style> and </style>.

Once the code has been added, go to the tabbed options on the right of the code block you just created. One can select which page, post, category, etc. that this newly created css code block should be added to. For example, if the css in that specific code block needs to display on a site's homepage just click on the "page" tab, and then find the homepage in the list of pages that appear. Click on the check box for homepage, and then click on the save button in the top right of that code block.  

If the css needs to be added to the entire website, or every page, or every post on the site, click on the the "Aux" tab and click on either "Entire Website," "All Pages," or "All Posts." Then click on the save button in the top right of that code block.

Click on "Save", then clear the site's cache by going to the Hummingbird Pro option in the left menu bar in your site's backend WordPress dashboard. Go to the "Caching" option under that, and click on "Clear Cache." Then go to a page that had the CSS added and refresh that page if the new CSS doesn't appear at first.

Feedback and Knowledge Base