How To Use Code as a Non-Developer in WordPress

Adding code to your WordPress website might seem intimidating if you’re not a developer. However, with the right tools and resources, even non-developers can customize their websites effortlessly.

In this article, we’ll explore how you can add code to your WordPress site using WPBakery Page Builder, focusing on where and how to add code, where to get it from, and how to adjust it.

What Kind of Code Can You Add?

First, it’s important to understand what kind of code can you add, and what this code does. With WPBakery there are three main types of code you can add to your WordPress site:

• HyperText Markup Language (HTML) – Used to lay down the structure of your website. It tells the browser where to place different elements like headings, paragraphs, images, and lists. You don’t directly write HTML code in WPBakery. Instead, you use TinyMCE to add and organize these elements.
• Cascading Style Sheets (CSS) – Controls the visual appearance of your website and defines things like fonts, colors, backgrounds, spacing, and more. In WPBakery, you can customize your site’s style using CSS through built-in customization options and by adding custom code.
• JavaScript (JS) – Adds interactivity and special effects to your website, such as animations or pop-up messages. In WPBakery, you can add custom scripts to your website. While it may require a bit more technical knowledge, WPBakery’s built-in AI can generate code for you.

In a nutshell, we use CSS to style, and JS to change the behaviors of HTML elements on a website or page.

Where Can You Add Code?

Now, let’s understand where would you like to add this code in WPBakery. Is it site-wide, on specific pages, or individual elements?

For example, rounding the borders of all buttons on the website would be a global change, while customizing a particular button’s appearance on a specific page would be a local change.

Adding Code Site-Wide (Globally)

WPBakery allows you to add code globally, affecting your entire website.

You can add Custom CSS and JS code in the WPBakery Page Builder settings, from your WordPress admin dashboard and it will be applied site-wide.

Adding Code To Specific Pages and Elements (Locally)

WPBakery also lets you add code locally to individual elements on a page or post, such as text blocks, buttons, or images. This allows for more granular control over where the code is applied.

You can add custom CSS and JS on a page level or for specific elements in the Page Settings from the WPBakery editor.

Where to Find the Code?

As a non-developer, the next thing to understand is where you can get the custom code snippets from.

Online Resources for Code Snippets

If you prefer to find code snippets yourself, there are numerous online resources available. Websites like
CodePen, CSS-Tricks, W3Schools, and Stack Overflow offer a wealth of code snippets for various purposes.

Once you find a code snippet you like, simply copy it and paste it into the appropriate field in WPBakery.

WPBakery’s Built-in AI Code Generator

WPBakery’s built-in AI feature lets you generate custom code with ease. Simply describe the effect or functionality you want to achieve, and let WPBakery AI generate the code for you. Plus, you can access the AI feature to generate custom CSS and JS code both globally and locally.

Of course, you can always ask ChatGPT to generate the code for you, but with WPBakery AI, you don’t have to switch back and forth, making it much more efficient to do it all in the same interface.

How To Adjust The Code

Next, it’s important to understand how you can adjust the code, as a non-developer. For this article, we’ll focus on the structure of CSS. It’s built on three key components:

• Selectors – Determines which HTML elements the CSS rules should apply to. They can target elements by type (like “img”), class (like “.hover-image”), and IDs (like “#hero-image”)
• Properties – Define the specific styling rules, like “color,” “font-size,” or “background-color”
• Values – Define the specific values, like “red,” “20px,” or “blue” that are assigned to properties

Selectors are used to target specific HTML elements. There are three main types of selectors:

• Element Type – Targets all elements of a specific type (e.g., “img” for all images on the page)
• Element ID – Targets a specific element with a unique identifier (e.g., #hero-image a specific image on the page)
• Extra Class Name – Targets multiple elements with a shared class name (e.g., #hover-image for all images with shared class name)

In most cases, you would adjust either the selector (to apply the style to a different element) or value (e.g., to change an effect to a different color) in the code.

Note: Using IDs in CSS should be done only for elements that truly require unique styling or functionality.

When adjusting code, pay attention to the selectors used and ensure they match the elements you want to target on your website.

How To Add Code in WPBakery

Now that we’ve covered the basics of what kind of code you can add, where to find it as a non-developer, and how to adjust it, let’s explore how to actually add the code in WPBakery.

Let’s explore 2 examples, adding a custom CSS code snippet to a page – one that we find on the web, and the other one generated with WPBakery AI.

Adding a Custom Code Snippet from the Web

Suppose you found a cool CSS effect online that you want to add to a specific element on your WordPress page. Here’s how you can do it.

Let’s take this floating text from CodePen as an example, and add it to a text element on a page. Here’s the code that you can copy to achieve this effect:

h1 {
  text-align: center;
  color: white;
  font-family: arial;
  font-size: 90px;
  line-height: 90px;
  letter-spacing: 15px;
  text-shadow: 0 1px 0 #EFEFEF,
               0 2px 0 #EFEFEF,
               0 3px 0 #EFEFEF,
               0 4px 0 #EFEFEF,
               0 30px 5px rgba(0,0,0,.1);
  
  animation: float 3s linear infinite;
  animation-direction: alternate;
}

@keyframes float {
  from { transform: rotate(5deg); }
  
  to { transform: rotate(-5deg); }
}

To add this custom CSS in WPBakery, follow these steps:

1. In the WPBakery editor add an element, “Text Block” in this case, to the page
2. In the Element Settings, scroll to the bottom and find the “Extra Class Name” field
3. Assign a unique Extra Class Name to the element (e.g. floating-text)
4. Click “Save Changes”
5. Navigate to the Page Settings by clicking the gear icon at the top right of the navigation bar
6. Locate the Custom CSS field
7. Paste the code snippet into the Custom CSS field
8. In the code, add the Extra Class Name you chose before as the selector (e.g. replace “h1” with “.floating-text” in the code)
9. Click “Save Changes,” and your effect will be applied

Note: Remember to add (.) before your class name in the code.

Here is the result:

Adding Code with WPBakery AI

Alternatively, if you have a specific effect in mind but don’t know how to code it yourself, or can’t find it online, you can use WPBakery’s built-in AI to generate it for you.

Let’s also generate a floating text effect with WPBakery AI. Here’s how you can do it:

1. In the WPBakery editor, add an element, “Text Block” in this case, to the page
2. In the Element Settings, scroll to the bottom and find the “Extra Class Name” field
3. Assign a unique Extra Class Name to the element (e.g. floating-text-effect)
4. Click “Save Changes”
5. Navigate to the Page Settings by clicking the gear icon at the top right of the navigation bar
6. Click on the WPBakery AI icon next to the “Custom CSS” field
7. Describe the desired effect you wish to implement (e.g. Add a subtle floating effect to text) and press “Generate”
8. In the code, add the Extra Class Name you chose before as the selector (e.g. replace the “.wpbai” selector with “.floating-text-effect” in the code)
9. Click “Save Changes,” and your effect will be applied

Note: Remember to be as specific as you can, when writing AI prompts.

Here is the code generated by WPBakery AI:

@keyframes subtleFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

.floating-text-effect {
  animation: subtleFloat 2s ease-in-out infinite;
}

Here is the result:

Remember, start simple, experiment with WPBakery AI, and use online resources for further learning. With practice, you’ll be customizing your website like a pro in no time!

Conclusion

Adding code to your WordPress website doesn’t have to be complicated, even if you’re not a developer. With WPBakery Page Builder, you can easily add code globally or locally, whether it’s generated by AI or sourced from online resources. By understanding CSS selectors, you can adjust code to suit your website’s needs and achieve the desired customizations effortlessly.

Related articles:

• Cool CSS Effects: Transform Your WordPress Site Using WPBakery
• WPBakery 7.2: Introducing Your New AI Website Building Assistant
• How To Create WPBakery AI Prompts with Examples
• How to Create a Landing Page With WPBakery AI With Best SEO Practices