What if I told you there was probably a simpler way for you to do a lot of the things youâre currently doing by hand with your Showit website that would save you time AND help you lose weight while eating as many donuts as youâd like?
Okay, the losing weight thing is unconfirmed BUT the other stuff is the real deal.
Letâs say, for example, on your About Us page you have a list of people on staff.
Then one fateful day Connie comes in and gives you her two-week notice. Youâre honestly a bit relieved because Connie is the source of a lot of office-related drama.
BUT, then you realize you need to go in and take her off the website. Thereâs the rub!
Connie was the 3rd hire on a list of 15 other employees.
You now have to rearrange your entire staff on the About page when you go to delete her.
Lots of tedious work THAT YOU ACTUALLY DONâT HAVE TO DO.
OR even those pesky FAQ pages that take tons of time to set up and even more when you have to make changes.
NO MORE!
Thereâs something you can do to make all of those changes in less than half the time it would normally take you in the Showit app.
What is this dream solution that Iâm talking about?
WordPress Custom Post Types, my friend.
And, with just a little bit of knowledge, itâs going to be your new best friend.
Before we dive too deep, let me give you some background for those who are new to Showit and/or WordPress. If not, skip on down to get started.
Your Showit website can actually connect with WordPress which means that you have both the most powerful website builder out there AND the most popular website content management system on the planet at your fingertips.
How does all that power feel? Ready to apply for the Avengers?
Think about it! You can do pretty much anything you want with the right plugins.
WordPressâs superpower is its ability to take content that is kind of repetitious like a blog post and make it easy to add to your site.
So, every time you want to write an article you donât have to go to the Showit app to create a whole new page from scratch and add all the text by hand.
You create the template once and then you just add the blog post to your WordPress dashboard.
You can do the same thing for ALL SORTS of different content NOT JUST blog posts!
What do I mean exactly? The best way to teach you is to probably just show you.
Youâll see in this image what looks like a normal WordPress dashboard. And, with that normal WordPress dashboard, youâll see the normal place to add Blog Posts.
Nothing extraordinary. BUT, look a little bit further down and youâll notice some other things that you wonât find on any other WordPress site. How do I know? Because I made those.
They are Custom Post Types for things like Team Members, Pictures of My Cat, Random Stuff, Podcast Episodes, and Design Templates.
Those are all unique post types that I can make look completely different in layout, design, and style from one another AND from a normal blog post.
So, not only can it save you time BUT it gives you the option to be more creative in how you want different types of content to look!
So, cool right?!
Now, to do a lot of things outside of adding blog posts you do need to be on our Tier 3
That gives you the ability to add your own plugins, which will give us the power to add the wonderful tool known as a Custom Post Type.
If you arenât on the Tier 3 plan yet, reach out to our amazing support team and let them know youâre ready to up your game.
If youâre already on the Tier 3 plan then follow along with me while I show you how to create a custom post type for team members on an About page.
Alright, are you ready to add a Custom Post Type of your own on your Showit blog? Letâs do it!
The first thing we need to do is add a plugin called Custom Post Type UI. This is one of my favorite plugins to use AND itâs super popular.
With 1 million-plus active installations, you know something is going on thatâs probably pretty awesome.
To add CPT UI login to your WordPress dashboard and go to Plugins
Type CPT UI into the plugins search field and the right one should be the first to show up. In case youâre wondering, the one we want should have 1+ million active installations AND be created by WebDevStudios.
Install that puppy and activate it.
Now, you should see a new link on your dashboard near the bottom that says CPT UI. If your dashboard doesnât look exactly the same DONâT FEAR! As long as you see the CPT UI link with its little square icon youâre good.
Scroll over the CPT UI link and then click on Add/Edit Post Types which should be the first option from that menu.
Donât let this long list of options intimidate you. I hardly ever use most of these settings and I make Custom Post Types a lot.
First, weâre going to make a
Letâs keep going with the About us page that has multiple team members displayed on it for this example.
For slug weâll add team_members.
For the plural label, weâll add âTeam Membersâ
And for the singular label, weâll add âTeam Memberâ
The plural name and singular name are pretty self-explanatory BUT if youâre not familiar with WordPress jargon Slug might seem a bit out of place.
The slug is used by WordPress to know what to look for any time you ask it to find a certain post type. Youâll notice that youâre not able to use capital letters AND any time you use the space bar it adds an underline character instead.
AND, donât worry. CPT UI wonât allow you to add a slug that already exists. So, you wonât mess anything up.
From there we are going to skip all of the options for the âAdditional Labelâ options. In fact, if you want you can minimize that section altogether and get rid of some clutter.
The next thing we want to mess with is the âHas Archiveâ setting. Itâs about 10 steps down on the âSettingsâ section.
OR if youâre like me and donât want to remember that every time you can just do a search on the page for âhas archiveâ by hitting command + f on mac or control + f on a PC and it will highlight what youâre looking for.
Once youâve found it, youâre gonna want to change the setting to âTrueâ and then add what we want the url path to look like.
We are creating this post type for our âaboutâ page. So, add âaboutâ to that field. If not, the page defaults to mywebsite.com/archive-about which isnât very fun to send people to.
The last setting we are going to change is the menu icon that shows up in the WordPress dashboard. If you donât change this it defaults to a boring ole pin.
If you donât care about the icon then donât worry about changing it. You donât have to be fun if you donât want to. But, câmon live a little!
Scroll down a bit to find it or use our search a find feature. Click on the âChoose Dash Iconâ option and that will bring up a list of icons to choose from. Weâre going to choose the one that looks like a bald businessman
If youâd like to choose something else be my guest there are plenty of other options for whatever kind of post type you might be creating.
AND, we are officially done with the settings. Scroll all the way down and click the âAdd Post Typeâ button.
You should now be able to see your shiny new post type show up on your WordPress dashboard!
Now weâre going to add some posts to our new post type. This works just like adding a blog post does.
Click on the Team Members post type then click âAdd New.â If you need help with that check out this webinar where I talk all about it.
Just like any blog post, youâve got a title, a featured image, and some content.
Weâll also want to fill that out for all our team members except the:
For fun, Iâm going to add three fake employees so we can have something to work with.
The last thing we need to do is set up a template for the post type in the Showit app. Iâm using the free âMonsteraâ template. BUT, you can use whatever your site was built with.
Thankfully, the Monstera template has an about page already built. BUT, we need to turn it into a WordPress page.
All you have to do is select the ellipsis next to the About page link in the site settings. Then select âCopy to WordPress.â
Next, we want to delete the old about page and rename the new one to just âAbout.â You canât have two pages with the same name on Showit. SO, when you copied the About page to WordPress it made its name About-1.
Next, we want to change some settings in the Template Info options on our page. If youâre unfamiliar with how to get there:
With the page you want selected, click the Page tab at the top of the screen:
Then click the layer panel header above all the page canvases:
AND NOW, you should be able to see the Template Info option on the right. We are going to change this to the âCustomâ option then in the âCustom Template Nameâ weâre going to add archive-team_members:
That might change for you depending on what you named your slug on the custom post type. So, for instance, if you named your slug âpodcastâ then that would become archive-podcast.
If youâre someone like me, youâre probably saying something like, âCool, but how does this work?â
Answer: magic.
JK.
If youâre not the type that needs to know this stuff, move along to the next step to finish up. It will work whether you understand it or not.
BUT, if you need to know, WordPress has a system called âTemplate Hierarchy.â Thatâs honestly just a fancy way of saying âlook for these files if itâs this type of post type.â
There are a lot of options here that make Custom Post Types SUPER HELPFUL in a lot of situations which weâll likely discuss in the future. BUT, for now, just know that archive-[your slug name] will be what WP looks for whenever youâre trying to make a list of a specific type of custom post types.
Now, Weâve got to set up a Canvas on the page so that is connected to WordPress.
Add a blank canvas on that About page. Then move it right under the âBlank Spaceâ canvas and rename it to âTeam Members.â
Now, we need to tell Showit that this in fact in the WordPress loop. To do that, make sure you donât have any elements selected then click on the canvas tab on the right.
In the WordPress option select âIn Post Loop.â
Then, select the tick box that says, âCombine Views as Posts.â
Finally, we need to make sure that as more posts or added or taken away this canvas gets bigger or smaller. To do that we select âGrow with Contentâ on the canvas type.
Last big step! Are you still with me? Do you need a dance break?
We are close to the finish line, my friends.
Now, itâs time to set up how the posts that will be pulled in are going to look. Iâm going to keep it pretty simple.
Iâll add a subheading for the name, a placeholder image for the headshot and paragraph text for the title.
Now, the key is telling Showit what content from WordPress should replace the content on the canvas. To do that, select an element on the canvas and a âText Propertiesâ tab should show up on the far right.
Select that and you should see something that says âWordPressâ with âPlaceholderâ right underneath.
Just select the dropdown and choose which WordPress content Showit should look for.
In our instance, the name should be replaced by the âpost title,â and the work position or work title should be replaced by the âpost content.â
The only one that is slightly different is the image. Select the image and on the very first tab on the panel to the right you should see âImage.â
Make sure thatâs selected and then check the âWordPress Featured Imageâ right underneath the description:
If you like the way it all looks we need to copy and paste that 3 more times. Again, it doesnât need to be different. This is just placeholder stuff. WordPress is going to change it all out according to our posts in the custom post type.
Once youâve got everything laid out the way you want, you just need to add Canvas Views and place everything in there. Since we have 3 separate team members, weâll need to make 3 canvas views.
When itâs all said and done your canvas should look something like this:
If you want to you can add a title to the section BUT make sure itâs not on the same canvas as the posts are. Why? Because if you ever have more posts than canvas views the canvas will repeat itself.
So, youâll end up seeing the title repeated each time the canvas is repeated. So, for our example, if we had 4 team members add to the team members posts in WordPress youâd see that title twice.
Point isâŠput it on a different canvas đ
All thatâs left to do is hit publish and fire this puppy up on the site to see how it looks!
And, would you look at that! Just like magic, your Team Member posts show up on the About page.
Now whenever a team member comes or goes you donât have to spend tons of time rearranging all the elements on a canvas đ
You might have noticed that our post here arenât ordered great. Typically the CEO would be the first person youâd see on a list of team members.
The reason for that is that the order your posts are in on WordPress will be the order theyâre displayed on the page. Thatâs just like the regular WordPress blog posts works.
SO, what if you want to change the order?
There are a few great plugins that allow you to drag and drop the order fairly easily. My favorite is Simple Custom Post Order.
You do have to turn the ability to drag and drop custom post types order on PER CUSTOM POST TYPE in the settings. BUT, itâs fairly easy to do.
Then you just drag the post in the order you want them to display.
Hopefully, by now youâve caught the excitement of adding custom post types to your showit site. You can save yourself so much time AND use the feature in really fun ways.
So, take some time and get familiar with how you can implement it into either your site OR a site youâre working on for a customer.
It might take some time BUT I guarantee you that learning how to build custom post types on your Showit blog will be worth its weight in gold one day.
Chris is multitalented, being able to play a number of instruments, and having an inclination towards creative design, AND technical know-how. He cheerfully brings his Swiss army knife of skills to our designer community.
Start Your Free Trial
(Free for 14 days)
No credit card required