Adding static content to GeneratePress query loop

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.

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.

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.

4. The code

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