As a Certified NationBuilder Architect, one of the most common requests I hear from my NationBuilder clients is, “Can I integrate NationBuilder with WordPress?” The answer is absolutely yes, you can.

While NationBuilder and WordPress are two different softwares, there are a variety of reasons why anyone would want to use them together:

  • You have a brand new website on WordPress and don’t have the budget to move it all over to NationBuilder;
  • You’re interested in the tools and functionality offered by NationBuilder, but want to use WordPress as your CMS and front end;
  • You want to try NationBuilder out, but aren’t ready to commit to migrating everything over just yet.

Using the NationBuilder API

I recently worked on a client website where myself and a Certified NationBuilder Developer hooked forms on a client’s WordPress website up to their NationBuilder account. These forms were used to register new users, and to leave feedback. Once a user filled out the form, our application sent the form data over to the client’s NationBuilder account.

nationbuilder, nationbuilder wordpress, nationbuilder and wordpress, nationbuilder worpress api, nationbuilder api, hook nationbuilder to wordpress, nationbuilder with wordpress
A form on a WordPress website that is linked to a NationBuilder environment using the API


nationbuilder, nationbuilder wordpress, nationbuilder with wordpress, nationbuilder and wordpress, nationbuilder worpress api, nationbuilder api, hook nationbuilder to wordpress
The form information was submitted successfully to the NationBuilder environment.

Without having to migrate their entire WordPress website over to NationBuilder, we allowed the client to easily collect data into their NationBuilder environment.

There are two common ways to display NationBuilder blog post images on other pages of your NationBuilder website.

In my first example, our Recent news section needs to show an image from the post in the left column, and the title/excerpt in the right column.

nationbuilder blog, nationbuilder image attachment, nationbuilder featured image, blog post image, nationbuilder post image, nationbuilder images from blog

In this situation, we need to call the post’s image separately from the excerpt and title. To do this, I added the following code to my “_blog_latest.html” file (if you’re confused about this, please reference the NationBuilder documentation here for showing content from one page on another).

 <div class="col-md-5 col-small-12">
     {% for attachment in post.attachments limit:1 %}  
          <img src= "{{attachment.url}}">
{% endfor %}          

The above code will tell NationBuilder to find the post’s attached image (this is key) and display it in the left column. To attach an image to a post, you need to upload the image as a File in the post’s Dashboard, thereby attaching it to the post. Simply adding the image into the body of the post will not work!

The second example is much easier. In this design, the website’s blog landing page needs a design where an image from the body of the blog post will appear above the excerpt. To accomplish this, we need to upload our image to the “Files” section and then add the image to the “Before the Fold” section of the post’s content. Below is the code you’ll need for this to work.

nationbuilder blog landing page, images to blog page, featured images nationbuilder, nationbuilder attached images

<div class="page-excerpt padbottom" id="blog-post-page-{{ }}">
      <h3><a href="{{ post.url }}">{{ post.headline }}</a></h3>
      <div class="excerpt">
        {{ post.blog_post.content }}
      {% if post.blog_post.is_extended? %}
        <span class='read-more'><a href='{{ post.url }}'>Read more</a></span>
        {% endif %} 
    {% endfor %}

Notice the difference. Instead of calling the separate blog.attachment, we’re instead just pulling the excerpt content, which will include the image since it’s above the fold.

<div class="excerpt">
        {{ post.blog_post.content }}