How does the whole post & post type thing work?

Hi, this is Sandra from GREYD and today I’d like to give you a comprehensive insight into working with posts and post types in GREYD.SUITE. To start with, a few terminologies. Post types are different types of content on your website, for example by default WordPress comes with the post types pages and posts — for example for news articles. And each post type now has up to three different templates. First of all the single template, also called the post template, that defines how the individual post pages should look like. So for example on our GREYD.SUITE website we have regular pages and we also have a blog that displays several blog articles. And those blog articles, they all have the same structure and layout which is defined by the single template or post template. And depending on what kind of post type you have, there may also be additional templates, for example to create archives like these ones, also for search results pages. And the last term you should know when talking about posts and post types is the post overview, which is a block that enables you to display several blog posts as an overview as the name already indicates.

So what we’re going to do now is, we’re going through the entire process and create a custom post type and all corresponding templates and a post overview. So let’s go to the GREYD.SUITE backend and open the post type dashboard and let’s create a new post type that we name “Job ad”.

So I’m going to do that all in fast forward. If you want to learn it all in very much more detail, then we have a dedicated tutorial on post types in our Helpcenter. So I now just select an icon, we need content editor, no post image, nothing like that, categories and then we need some fields. For example we need the contact person, we need a description, no that’s no, location — that’s it. So now the post type is ready and we can create posts here, for example developer, the job description, contact person is me, location is Munich. Let’s just create a couple of posts. Another cool job at GREYD, contact is also me and location is Munich and that’s two. One last one, and that’s it. So now we’ve created a post type and we also have three different posts.

So what I now want to do is, I want to have a career page like on our website where we have a post overview displaying the available jobs. So I’m now going to create a career page and I want to show the open positions and this is where the post overview comes in. With the post overview — as already described — I can show in the frontend a couple of posts, so I’m going to have to select the template I want to use to display the job ads, which I’ve already prepared. So let’s just take a quick look at the template. As you can see here I’ve made all elements like for example this headline here dynamic, same with the link and everything. So I can now fill it with content of my posts.

The first thing I have to do in the post overview is to select which post type I’d like to display. The post overview in general is a variation of the native WordPress query loop as you can see here. So I can now select the job ad post type. This variation works basically the same as the native query loop but it offers a lot more options. For example, I can not only define in which order I’d like to display my posts and work with certain filters like only display posts of a certain category or of a certain author. But there are lots of additional options, for example much more detailed and sophisticated filter and sorting options, responsive options. In the template there are also many design options, for example to display the post overview as a slider, with animations, with frontend filter and sorting options. We won’t deal with that today — there are dedicated tutorials for that in our Helpcenter.

What I want to show you now is how you get the content of your posts from the custom post type into that post overview. And that’s where Dynamic Tags come into place. So I now mark everything that I want to fill with content and I will find a dynamic tag here and can say okay, I want to display the post titles or the job ad title. Same for the location. I can either work with the icon here or alternatively I can just enter # and can then also select my dynamic elements. The same works for images and links. For links for example I just set a dynamic link here in the trigger picker and link it to the post. And that’s basically it.

So let’s just update the page and have a look at the frontend. Now we have this post overview displaying all my job ads and when I now click here, I can see the dedicated post. But as you can see that doesn’t really look good. Why? We haven’t dealt with the single template yet, so that’s exactly what we’re now going to do. We are moving to the site editor. By default there is already a single template for posts, but we want our own single template for our custom post type job ads, so that’s what we’re now going to do — we create a single template for job ads.

So let’s get that. I’m now just going to place some content here. For example, we want a header, we want a heading, we want the location. As before you can again work with dynamic tags to display here for example the post title and the location. But in a single template you can also use dedicated post blocks like for example post content. The result is the same, it’s just a different way of how to do it. Let’s put that into a group. Okay, that won’t be really beautiful but it’s going to do the job, so let’s just have a look again at our job ad. If we now look at it, it looks much better. So it has our dedicated content from this particular job ad and in terms of design I can do whatever I want here on that single template and all my posts will have the same layout.

And that’s basically all you need to know when working with post types and posts in GREYD.SUITE. We had a look at how to create a custom post type and create posts of that post type, we had a look at how to create post overviews to display several posts on a page and we just had a look at how to design an individual single template for that post type. For most use cases you won’t need more, but I’m going to show you two more things — archives and search templates.

So for this example here, it might be cool to have another section here that displays additional jobs for example from the same category. So what we could add here now: let’s start with a heading “other cool jobs for you”, we want a spacer and now we put an archive here. Now I could say for example in that archive show me all posts of the job ad, sort them by month. I could also have a category archive if I want to do that. There are again lots of formatting, design, filter and sorting options. We won’t have time to look at all of that. I’m just going to show you how it works. Okay, so let’s just have a look again here. Well, not beautiful, but it doesn’t matter now. What we can see is, we just created an archive that shows us all related posts for example by month.

And we just had a look at a single template. This is exactly the same but for archives, so there’s a dedicated archive template in the site editor. We can just have a look at it. Here it is. So that’s the archive template. Again I’m completely flexible in what I put in here, the only difference is that in the post overview here, we have one option which is this one here — “inherit query from template”. This makes sure that only the posts related to the archive are displayed here, for example I selected all job ads from July and that’s exactly what this is doing.

According to exactly the same principle works the search. We have a dedicated search block in GREYD.SUITE. Let’s just add one here, GREYD search. So I can enter for example a job search with filtering and sorting options, again lots of possibilities. There’s a dedicated tutorial video in the Helpcenter. I just want to show you that it works exactly the same with posts. So you have the search block and you again have a search template with a post overview, again with this option here that will make sure that only the posts related to the search term will be displayed — and that’s it.

So let’s summarize again. Maybe here on our website where there is a little bit more content and let’s have a look at the blog. We had a look at post types — you can work with the default post types by WordPress, pages, posts etc. But we can also create own custom post types in GREYD.SUITE, also with custom categories, taxonomies and everything like that. With post overviews you create overviews that display several posts like here. When you click on an article in a post overview, you will land on the single template. And there are also possibilities to add for example an archive, like you can see here, let’s show for example all marketing articles. And you can also work with searches.

For more videos and information please visit our Helpcenter.