Global code is a feature to add custom CSS and JavaScript code globally to a WordPress website. We can modify the appearance and functionality of your WordPress site beyond what themes and plugins offer natively.
How to Add Global Code? #
So, to add the Global Code into your website just go to WordPress Dashboard → Gutenify →Setting → Global Code.
Advantages #
- Consistency and Branding: Global CSS allows you to enforce consistent styles, such as colors, fonts, and spacing, across all pages of your WordPress site. This ensures a cohesive branding experience for visitors.
- Enhanced Functionality: With global JavaScript, you can add interactive elements and custom functionalities that enhance user experience beyond what themes and plugins provide natively.
- Flexibility and Control: Both global CSS and JavaScript give you the flexibility to customize your site’s appearance and functionality according to your specific needs and preferences, providing full control over how your website behaves and looks.
- Performance Optimization: By optimizing both CSS and JavaScript code globally, you can improve page load times and overall website performance. This is crucial for user experience and SEO rankings.
- Maintenance and Scalability: Centralizing your customizations in global CSS and JavaScript files makes it easier to maintain and scale your website. It simplifies updates and modifications, ensuring that your site remains efficient and consistent as it grows.
Adding Global CSS Code #
Before writing global code, you should first assign a class name to the specific block where you want to modify its appearance and functionality.
To add a class name to blocks, navigate to Add New Page → Block (top right sidebar) → Advanced. Please refer to the image provided below.
Global Header Code #
Global header code includes CSS or JavaScript elements placed in the header section of every webpage on a site. This ensures these crucial parts load early when a page loads, affecting how the site looks and behaves for users.
In the image, the class name “global-code-navbar” is applied to the Navigation block, which serves as the parent container for the navbar items. Moreover, the class name “global-code-navbar-items” is assigned to each individual navbar item such as Services, About Us, Portfolio, and Contact Us, to apply text decoration: underline , Gap between navbar items and color while hover.
Now that you have assigned a class name to the specific block, you are ready to begin writing CSS in the global code.
Output of the above Css code is:
Global Body Open Code #
Global Body Open code refers to the CSS and JavaScript elements strategically positioned immediately after the opening <body> tag on each webpage within a website. This placement ensures that these essential components are loaded early in the page rendering process, influencing the initial appearance, behavior, and functionality of the site consistently across all pages.
In the image, the class name “global-code-infobox” is assigned to the Info Box Block to change its background color. Additionally, the class name “global-code-infotitle” is assigned to the heading Info Box to change its text color, and the class name “global-code-infoparagraph” is assigned to the paragraph to change its text color as well.
Now that you have assigned a class name to the specific block, you are ready to begin writing CSS in the global code.
Output of the above Css code is:
Global Footer Code #
Global Footer code consists of CSS and JavaScript elements strategically placed just before the closing tag on each webpage within a website. This positioning ensures that these critical components are loaded effectively, contributing to the overall functionality and presentation of the site.
In the image, the class name “global-code-footer-stack” is applied to the Stack block, which serves as the parent container for the footer items. Moreover, the class name “global-code-footer-stack-items” is assigned to each individual stack header item such as, About,Privacy, and Social, to apply border , Gap between stack header and color of header.
Now that you have assigned a class name to the specific block, you are ready to begin writing CSS in the global code.
Output of the above Css code is:
