Skip to content

CMS integration: connecting WordPress and binding data

In this section, we'll set up WordPress as a data source, connect it to Silex, and bind blog posts to your homepage.

If you don't have WordPress or don't want to use a CMS, you can skip this page. Your site works perfectly well without it — just hard-code your content instead of pulling it from WordPress.

Setting up WordPress (if you don't have it yet)

You'll need a WordPress site running with two plugins:

Pods — Lets you create custom content types and custom fields beyond the default Post/Page structure. Pods is 100% free and open source.

WPGraphQL and WPGraphQL for Pods — Exposes your WordPress content via GraphQL (a query language that Silex uses to fetch data).

Installing the plugins

  1. In WordPress admin, go to Plugins → Add New
  2. Search for "Pods" and install it
  3. Search for "WPGraphQL" and install it
  4. Search for "WPGraphQL for Pods" and install it
  5. Activate all three plugins

Creating a custom post type for projects (optional)

If you want to showcase projects in addition to blog posts, create a custom post type with Pods:

  1. In WordPress, go to Pods Admin → Add New
  2. Select Custom Post Type
  3. Name: "Project", Singular: "Project", Plural: "Projects"
  4. Click Save Pod

Now you have a "Projects" menu in WordPress where you can add portfolio items.

Setting up custom fields for blog posts

  1. In WordPress, go to Pods Admin → Edit Pods
  2. Select the Post pod (or your custom post type)
  3. Click Add Field and create fields for blog content:
  4. "Featured Image" (type: File / Image)
  5. "Excerpt" (type: Paragraph, 200 chars)

  6. "Author Name" (type: Plain Text)

  7. Make sure Show in GraphQL is enabled for each field

  8. Click Save Pod

When you create blog posts, you can now fill in these custom fields.

Getting your WordPress GraphQL endpoint

Your WordPress site exposes data via a GraphQL endpoint. This is the URL Silex will use to fetch content.

Find your GraphQL endpoint:

If your WordPress is at https://mywordpress.com, the GraphQL endpoint is usually:

https://mywordpress.com/graphql

Test it by visiting that URL in your browser. You should see a GraphQL interface (or a JSON response if viewing in the browser).

Connecting WordPress in Silex

Now let's tell Silex where to find your WordPress data.

In Silex, go to Site Settings:

  1. Click Settings (left sidebar, usually a gear icon)
  2. Find Data Source or CMS section
  3. Click Connect Data Source
  4. Choose WordPress (or GraphQL if you're using a different GraphQL API)
  5. Paste your endpoint URL: https://mywordpress.com/graphql
  6. Click Save

Silex now connects to WordPress. You should see a green checkmark indicating the connection is successful.

Creating a data binding for blog posts

Now we'll add blog posts to the homepage. Let's create a section that displays the three latest posts.

On the index page:

  1. Find a place below your hero section to add a blog posts area
  2. Add a Div with class agency-blog
  3. Add a Heading 2 (h2) with text "Latest Blog" or similar
  4. Below it, add a Div with class agency-blog-grid — this will hold the cards

Set up the grid:

  1. Select the agency-blog-grid Div
  2. Set Display: Flex
  3. Set Flex-wrap: wrap
  4. Set Column-gap and Row-gap (e.g., 24px)
  5. This will display blog posts side by side

Adding a blog post card component

Inside the agency-blog-grid, create a card that will repeat for each blog post:

  1. Add a Div with class agency-blog-card
  2. Inside, add:
  3. Image — will show the featured image
  4. Heading 3 (h3) — will show the post title
  5. Paragraph — will show the excerpt
  6. Link — will link to the post

Style the card:

Set the same card styles you used before:

  • Border, Border-radius, Padding, Box-shadow
  • Flex-basis around 300px with Flex-grow 1
  • Set the image Width to 100% and Height to 200px with Object-fit: cover

Creating an expression for blog posts

An expression tells Silex where to get the data and how to format it.

On the agency-blog-card Div:

  1. Click the Data panel (right sidebar)
  2. Look for "States" or "Data Binding"
  3. Create a new state called post
  4. Set the type to a loop — this tells Silex the card will repeat for each item

Configure the loop:

The loop needs to know which data to repeat over. Create an expression:

  1. Click Edit Expression (or similar button in the Data panel)

  2. Your expression should point to blog posts. In WordPress via GraphQL, this might be: 

    posts.edges.node
    (or posts.nodes depending on your WordPress setup)

  3. This tells Silex to loop over each post in the posts collection

For detailed guidance on expressions, see Expressions and Binding data.

Binding individual fields

Now that the card repeats for each post, bind each field to the post data:

Post image:

  1. Select the Image element in the card
  2. In the Data panel, create a state called featured_image or image
  3. Set the expression to: post.featuredImage.sourceUrl (or similar, depending on your WordPress setup)
  4. This pulls the featured image URL from each post

Post title:

  1. Select the Heading 3
  2. Create a state for the title
  3. Set the expression to: post.title
  4. In the HTML content, bind the state to display the title

Post excerpt:

  1. Select the Paragraph
  2. Create a state for excerpt
  3. Set the expression to: post.excerpt
  4. Optionally use a filter to limit the length (e.g., post.excerpt | slice: 0, 150)

Post link:

  1. Select the Link
  2. Set the href attribute to the post URL: post.link or post.uri

Using filters to format data

Silex includes Liquid filters to transform data. Common ones:

  • post.excerpt | strip_html — remove HTML tags
  • post.date | date: "%Y-%m-%d" — format the date
  • post.excerpt | slice: 0, 150 — show only the first 150 characters
  • post.title | upcase — convert to uppercase

See Filters for the full list.

Limiting the number of posts shown

By default, a loop displays all posts. To show only three:

When you create the loop expression, modify it to limit results:

posts.edges.node | slice: 0, 3

This shows only the first three posts.

Testing your CMS integration

Before publishing, test the data binding:

  1. In Silex, make sure you're on the index page
  2. You should see blog posts rendered in the editor with real WordPress content
  3. Check that titles, images, and excerpts appear correctly
  4. Verify the card layout looks good with the data

If nothing appears:

  • Check that your WordPress connection is working (go to Site Settings and verify the endpoint)
  • Ensure you have at least one published blog post in WordPress
  • Check the browser console (F12 → Console) for error messages
  • Verify your GraphQL query is correct (you can test it directly at yourwordpress.com/graphql)

Next steps

Your homepage now dynamically pulls blog posts from WordPress. Visitors see your latest posts without you manually updating the page.

Head to Publish to get your site live on GitLab Pages.

Edit this page on GitLab