How to Integrate Bulma (CSS Framework) in WordPress?

In this guide, we are going to integrate Bulma (CSS Framework) in WordPress without using any plugin.

Alternative to Bootstrap, Bulma is one of the CSS frameworks and it’s getting more popular day by day.

In this tutorial, you are going to learn

  • What is Bulma.io & How to use it?
  • Integrate Bulma in GeneratePress Theme.
  • Integrate Bulma in WP Astra Theme.
  • So on…

Though adding Bulma.io CDN is easy but it might get conflict with your current WordPress Theme. So, use it wisely.

When I first get to know about Bulma CSS Framework, I open my VS Code and tried it. I quickly fell in love with Bulma.

What is Bulma.io?

So, what is Bulma, and how to get started?

Bulma is a CSS framework alternative to Bootstrap and other CSS frameworks.

It is a free, open-source CSS framework where you can design a responsive website quickly.

With 45000+ stars on Github, Bulma is a powerful framework and you are in the good hands of developers.

To get started with Bulma Framework you need to have basic knowledge of HTML. Head towards the Bulma documentation and get started with it.

Steps to Integrate Bulma (CSS Framework) in WordPress

Here, we are going to integrate Bulma in two of the popular WordPress Themes i.e. in GeneratePress and Astra Theme.

How to Integrate Bulma (CSS Framework) in WordPress

1. Add Bulma in GeneratePress Theme

Follow these steps exactly to add and use Bulma in GP Theme.

1. Activate Elements Module

We need to add Hook in GeneratePress in order to insert Bulma.io CDN on our website. so, let’s activate the Element Module.

Go to Appearance > GeneratePress > Elements > Activate

For this, you need to have a premium module of GeneratePress Theme.

Activate Element Module in GeneratePress Theme

2. Add New Hook Element

Let’s add New Hook in Element.

Go to Appearance > Elements > Add New Element

Adding a New Hook in GeneratePress

Choose the Element Type as Hook. Give the Hook New Title as Bulma CDN URL.

Here we are going to add the Bulma CDN HTML link.

To get started, you only need one URL.

For the latest CDN link, please visit the official website. I am using version 0.9.3 at the time of writing this tutorial.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">

3. Manage Hook Settings

After inserting the code.

Go to Hook Settings and choose Hook to show wp_head. Leave other settings blank.

Again, Go to Display Rules and Choose the Location to display on an Entire Site.

4. Create a Post/Page to use Bulma CSS

Create a new post/page where you want to use the Bulma code.

Recommended Reading

2. Add Bulma in WP Astra Theme

Use exactly these steps to add and use Bulma in Astra Theme.

1. Activate Custom Layouts Module

Now go to Appearance > Astra Options > Custom Layouts > Activate the option.

Activating Custom Layouts Module in Astra Theme

2. Add Custom Layouts Bulma Hook

  • First, Go to Appearance > Astra Options > Custom Layouts.
  • Click on Add New button to add custom layouts.
  • Now, Enable Code Editor Option that is located at the top of the box.
  • Here, Add the Title for the Bulma Integration.
  • Under Layout Option, choose the Hooks option.
  • Now, you will be able to see more Hooks options.
Bulma CDN WP Astra

Copy and Paste the following code into the snippet box.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">

3. Manage Custom Layout Settings

  • Under Action, Select wp_head.
  • Leave Priority as it is.
  • Under Spacing leave it as it is.
  • Select Entire Website under Display On Option.
  • Under Responsive Visibility leave as it is.
  • For other settings leave blank.
  • Finally Hit Publish Button.

4. Create a Post/Page in Astra to use Bulma CSS

Create a new post/page where you want to use the Bulma code in the current Astra Theme.

Check Out

Bottom Line

This is the demonstration to integrate Bulma (CSS Framework) in WordPress. I hope that you can now easily add an online Bulma.io CDN. In this tutorial, I have mentioned steps for Astra and GeneratePress Theme only.

Likewise, you can try the theme that you are using with a similar process. If you have any questions regarding this guide then feel free to comment down below.

Share:

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, Blogging. I mostly publish tutorials on GeneratePress and GenerateBlocks.

9 thoughts on “How to Integrate Bulma (CSS Framework) in WordPress?”

  1. hello suraj bhai! can you please explain (gp vs newspaper) which wordpress theme is more user-friendly and good choice for technology based website?

    Reply
    • Hi Suvho,
      I have been using GeneratePress and Generateblocks past 2-3 years.
      Lately, the Newspaper theme has worked on various things like core web vitals, etc.
      I have only good things about GP and GB.
      Also, I have seen lots of tech sites using Newspaper themes. So before using it analyze your requirements, read reviews, and decide.
      Thanks

      Reply

Leave a Comment