[Resolved] Posts page as company job postings

[Royce]

Hi there, I’m currently using the WordPress Posts Page as a “Careers” page on a corporate website for the company to post their open job positions on their website, with individual posts as the job openings.

In the event there are no job openings, the page would ideally be empty with a custom message saying there are no job openings at the moment.

I was just wondering if this would be possible at all with a custom hook of some sort?

If not, currently as a workaround, I have created a block-hook element with the message, and have displayed it in the “inside_container” portion of the webpage, but upon loading of the website, it still has an empty “gp-inside-container” with nothing inside (because I have no posts)

Is there a way to remove this empty container with no posts while there is no posts, and to return it once posts are present?

Thanks and looking forward to your response!

[Fernando]

Hi Royce,

I believe the reason why it’s appearing is because of the padding. If you set the container’s padding to 0, the container should disappear.

If however you which to add a text when the container has no content, you may try adding a custom Class to the container.

See this as reference: https://share.getcloudapp.com/KouYKwg7

Then, you can try adding this custom JS:

<script>
var myelement = document.querySelector(".my-container .gb-inside-container");
var mytag = document.createElement("p");
var mytext = document.createTextNode("There are no Job Openings at the moment");
mytag.appendChild(mytext);
	if(myelement.innerHTML === ""){
		myelement.appendChild(mytag);
	}
</script>

See this as reference: https://share.getcloudapp.com/YEuBJQA5

As shown, I added this JS through a hook element, and hooked this element to wp_footer. I then set the display rule to my preference.

Hope this helps! 🙂

[Royce]

Hi Fernando,

Thanks for the quick reply.

Unfortunately, I’m still having trouble getting the page to work the way I want it to.

I understand the JS script, but need some clarity on where to put what elements.

First, the element which you say still has some padding is the “Post Contents Template” which came preloaded from one of GP’s templates. If I remove the 30px padding all around, the container disappears, but also makes the snippets for each post ugly when I do have posts.

Second, ideally I would like to create a custom Class for the container containing snippets of all the posts, so if a custom message were to appear, it would appear there as well.

Lastly, when I no longer have any posts, the site title “CAREERS” no longer appears on the Page Hero. Any idea as to why?

[David]

Hi there,

I would try the following:

1. The Block Element – Page Hero – make a copy of your dynamic one and swap the dynamic headline for a static one. So you have a specific hero for your careers page. We’re looking into why it doesn’t return the title when no posts are found.

2. Create another Block Element, this will contain the text you want displayed when no posts are found.
It should be a Hook: after_header with a priority of 20 and have the same Display Rules as #1.
Whilst editing make a note of the Elements ID in the browser URL.

Now we can add a PHP snippet to show/hide #2 hero depending on the results:

add_filter( 'generate_element_display', function( $display, $element_id ) {
    if ( 100 === $element_id && !have_posts() ) {
        $display = false;
    }

    return $display;
}, 10, 2 );

The 100 needs to be changed to your Elements ID.

This way you don’t have to use any JS

[Royce]

Hi David,

Thanks for your reply!

I’ve disabled the dynamic page hero already, as well as added a Block Element – Hook (after_header) with a priority. You can see it currently on the website (linked) displaying fine.

Now, I just need additional guidance on adding PHP as I’m not very familiar with PHP as compared to JS. How and where would we add the PHP code? In addition just to clarify, which element ID did you need me to take note of? Was it the Block Element – Hook with my custom message? If so, where would I go to get the elements ID? Did you mean a css selector for the container?

Kindly let me know, thank you!

[David]

So thats looking good.

Edit the Block Element containing your “Thank you for your interest in…” notice.
And then click in the browser URL field, in the URL you will see something like ID=53 – thats the ID we need to swap out in the code i provided above.

Adding PHP – this doc explains:

https://docs.generatepress.com/article/adding-php/

TLDR: If you’re using a Child Theme, then it goes in the Child Theme functions.php, if not then install the Code Snippets plugin ( link in doc above ) and add the code to a new snippet.

[Royce]

Hi David,

Awesome – added the snippet and it’s working how I want it to work now.

Just a note in your code, just changed the if conditional to

( 100 === $element_id && have_posts() )

without the ! to display only when there are no posts.

Unfortunately, the padding for the container of the supposed posts are still showing up below the custom message, even if there arent any posts.

Is this normal behavior of a WordPress site has no posts?

[Fernando]

This specific “spacing”/padding seems to be coming from a Content Template Block Element.

You can try applying the same steps provided David to remove this “spacing” when there are no posts.

Specifically, you can try adding another PHP snippet:

add_filter( 'generate_element_display', function( $display, $element_id ) {
    if ( 389979 === $element_id && !have_posts() ) {
        $display = false;
    }

    return $display;
}, 10, 2 );

Kindly replace the 389979 value with the ID of your Content Template Block Element.

See this as reference: https://share.getcloudapp.com/7KuqNJvY

Kindly let us know how it goes :).

[Royce]

Hi Fernando,

Thanks for the quick reply.

I tried what you suggested and added the post Id number for my posts content element, but now it’s showing a message, presumably auto generated by WordPress for when there aren’t any posts.

You can take a look at the website now, I left it on there for you guys to see.

[David]

Can you remove the snippet that Fernando provided here:

https://generatepress.com/forums/topic/posts-page-as-company-job-postings/#post-2111874

Then i can see whats going on with the layout.

[Royce]

Hi David,

I’ve removed the snippet suggested by Fernando. You can see the Careers page without the additional snippet live now.

[David]

Hmmm…. that is very peculiar, there should be no article elements output when there are no posts.
Are there any custom functions regarding the archives ?

[Royce]

Hi David,

None that I know of. I just edited the template that came standard with one of the GP themes.

The container disappears when I remove all padding from the container block section (for post snippets) but the padding for any present posts are also affected (and are ugly) when I do have a post.

[Tom]

That’s very strange. Does anything display there if you temporarily disable the Element?

[Royce]

Hi Tom,

I disabled the element, and I’m getting the “Nothing Found. Ready to publish your first post? Get started here.” message at the bottom.

I’m leaving the element disabled so you can see.

[Author]

Posts