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.
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 name ->
- Custom hook name ->
The custom hook name is built as so:
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
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.