Adding static content to GeneratePress query loop

tdrayson

I came across a section on Joost De Valk’s website where he lists his upcoming gigs in a grid. I wondered if it would be possible to insert essentially “static” content before or after the GeneratePress query loop.

I created a solution that allows us to make use of the powerful “hook” system that GeneratePress has.

Demo

1. Creating our query loop

First we need to add the GenerateBlocks query loop. You can configure this to have as many or as few posts posts per page as you want.

I found having an odd number means you can make it even with the static content.

screenshot 2023 06 20 at 15.59.25

2. Adding target classes

Next we need to give our query loop -> grid a html anchor. This is going to be your unique identifier we will use for our hook later. Make sure you name it something that makes sense.

We also need to add the class static-query-loop. This is the way our code later on will know that we want to insert static content to this block.

screenshot 2023 06 20 at 16.04.31

3. Building your static content

Now we have our query loop setup, we can hook into that with our GP elements.

  • Create a new element
  • Element type -> Hook
  • Hook name -> Custom Hook
  • Custom hook name -> before_{unique_identifier}

The custom hook name is built as so:

  • Location
    • before : added before all posts
    • after : added after all posts
  • Unique identifier
    • This is the HTML Anchor that we added in step 2.
    • In my case that is upcoming_gigs
Make sure to set a location. I chose Entire Site as it will only be inserted where my query loop is added.
screenshot 2023 06 20 at 16.05.27

4. The code

Add the code below to functions.php or code snippet plugin.

Members content only

Become a SnippetClub member to gain instant access to this tutorial plus tons more premium content.

Already a member? Log in below.

Login Form

👋🏻 Weekly Tutorial Digest

I send out a weekly newsletter with links to new tutorials written in the last week, you can subscribe below.

Newsletter

🔒I won't send you spam, I promise