Mailbox and Post Combos. The MailboxWorks is the largest online seller of residential mailboxes. Our inventory includes post box and posts combinations. They come in a variety of styles, colors, and locking or non-locking options. Whether you are a homeowner or a builder, we trust you will find the right post box to fit your exact needs. Ordered and filtered Lists of Contents. Feature: Posts box with multiselect for post types. Wall boxes are a type of post box or letter box found in many countries including France, the United Kingdom, the Commonwealth of Nations, Crown dependencies and Ireland. They differ from pillar boxes in that, instead of being a free-standing structure, they are generally set into a wall (hence.
You Will Learn
How to create a post type that is fully featured with custom fields, meta boxes, helps tabs, and much more with only code and not a single plugin.
Contents
If you care deeply about design and keeping WordPress organized, it's time to get to know post types fully.
In WordPress, sometimes you need more than 'Posts' and 'Pages'. Not every WordPress site is just a blog. You need the ability to add new types of content. But, how do you break out of the box and still craft an exciting user experience?
The answer to this question is found with WordPress post types. Learning the full capabilities of post types can turn your site's admin area into an organized, exciting, and beautiful place. Ultimately, you want your WordPress site to feel empowering when creating new content.
WordPress post types make it easy to organize your content by letting you create new buckets to place your own types of content into so you can have a beautiful site.
So, what are post types like practically?
What is a Post Type?
Simply put, a post type works just like the 'Pages' and 'Posts' in the WordPress admin. When you create a post type it will be listed in the admin menu and have the editor and title fields just like 'Posts'. Once you have it in place, you can add content to it in the same way you add a blog 'Post' to the 'Posts' section of the admin.
Once you learn more, you will be able to make your post type do much more than 'Pages' and 'Posts'. On top of all this, you can customize how the front-end of your site displays the content you add to post types.
Your new post type might be for 'Movies', 'Reviews', 'Homes', or 'Case Studies'. No matter what new type of content you want to create, the WordPress post type functionality makes it possible.
While there are plugins for creating post types, you do not want a plugin controlling your design. You certainly do not want any chance of a plugin update breaking your design. You want total control over the user experience. For this reason, coding your post types is the right answer to crafting an organized, exciting, and beautiful content management experience.
The fastest way to register, add, or make a post type is to code one into your theme. Designers and developers can add post types using the WordPress register_post_type function. This allows you to start adding content to the new post type bucket right away and display it on your website.
As you learn more about equipping post types, you will be able to build an amazing admin experience. Ready to get started? It will only take you five lines of code. Now, that is good news! 🙌
A First and Fast Look at a Post Type
With a sense of what a post type is, let's get into action. At a minimum, to make a post type follow these steps:
- Login to your WordPress site's admin in your web browser.
- Open up your favorite code editor and open your theme's
functions.php
file. - Add the following five lines of code to the top of your
functions.php
file. - Refresh your browser.
- Look in the admin menu under 'Comments' for your new post type menu item.
- Finally, flush the WordPress permlinks
That's it. Just like that, you have your first post type. Congrats!
Now, when you start using your post type, you might wonder 🤔 'This is great... but, this doesn't seem amazing to me. Things look a bit strange, and I need more control! Can I do more?'
YES! If you dare. Take a walk with me and let's explore the full capabilities and control you can possess with post types and move toward a more refined experience.
A Comprehensive WordPress Post Type: 'Study'
Our example from before was a great sample, but let's take a peek at a complete picture. Something that we might do in the real world. Making a portfolio website that needs to list case studies is a great place to start. In this case, we will want to register a post type to manage each 'Study'.
Using the Twenty Seventeen WordPress theme as our starting block (you can use the Twenty Twenty WordPress theme if you like), let's add our 'Study' post type right into the theme. Open the themes functions.php
file in your favorite editor because we will be writing all of the post type code into the functions.php
file.At the top of functions.php
you need to register your post type first. You can do this with the init
WordPress hook using add_action()
. When using the register_post_type
function to add your post type it must be coded within the init
hook to work properly.
There are three arguments for the register_post_type
you will want to start with:
public
- Make the post type accessible to everyone.description
- Though the description is not used much, it is nice to have.label
- The label of the post type. We will expand on this later.
Now, be sure you flush the WordPress permlinks anytime you complete changes to a post type. If you modified yours, do that before moving forward.
With our new post type in place, let's fix all the places and labels that say 'Post' instead of 'Study'. We need great design.
Admin: Labeling
Let's customize our post type labels within the admin. By default, WordPress will label our new post type as 'Post' almost everywhere.
We need the labels to be primarily marked as 'Study', not 'Post'.
To override the default labels for our post type, we need to set the label
argument from before to an array of named key pairs. In other words, we need to specify a few labels manually.
To set the labels for English readers, let's create a function that compiles the labels without having to clutter up our post type registration code.
Add this function to your theme so you can use it within the post type registration process.
Finally, back in the registration code, call the function we created xcompile_post_type_labels()
and use that for your labels instead and check your admin.
Nice. Now we are talking! 👍 (If you want to customize the alert messages and the labels, hold on, we will cover them soon.)
However, the menu icon... Can't that be better? Who wants to reuse the pin icon?!
Admin: Menu Icon and Position for a Post Type
Since the introduction of the WP Dashicons, adding menu icons to post types has become very simple.
Set the menu_icon
argument to one of the Dashicon names. For our post type, we can use the computer desktop icon by using the value dashicons-desktop
.
Also, if we want wanted to change where the menu item is located we can use the menu_position
argument. menu_position
takes a value between 0
and 100
and will list the menu item up and down the menu base on the value 0
being the top and 100
is the bottom. However, we do not need to do that here.
Okay, things are starting to take shape and look great. However, having a featured image for the study would bring us closer to great design and makes a lot of sense for a 'Study'. Only, how do you add a featured image field?
Admin: Enabling and Disabling the Featured Image, Title, Editor, and More
When you want to change or add to the default WordPress admin form fields, like the 'Featured Image' and 'Title' and 'Editor' fields, on your post type you need to use set supports
argument.
There are several options you can enable and disable using the post type supports
argument:
title
- For the title field.editor
- For the WordPress editor.author
- For the author meta box.thumbnail
- For the featured image.excerpt
- For the excerpt of text on an archive page for example.trackbacks
- For the trackback meta box.custom-fields
- For the custom fields.comments
- For comments.revisions
- For revisions and restoring old versions of the editor field.page-attributes
- For enabling the menu order and parent content when the post types hierarchy is enabled.post-formats
- For enabling the different post formats.
For the 'Study' post type, we can override the WordPress default supported options and add a 'Featured Image' by applying the thumbnail
option.
Note that we must enable theme support for post-thumbnails
using the add_theme_support function so we can use the thumbnail
.
Using the support feature is a little more complicated, but it works out great. Plus, it will only cost us three more lines of code, and it enables the 'Featured Image'.
You are crushing it now. Not too many designers or developers make it this far, but you are not most. You care about all the details, including the title placeholder text that says 'Enter title here'.
As they say, the devil is in the details. 😈
Admin: Change a Post Types Title Placeholder Text
You do not always want the placeholder text for a post type to be 'Enter title here'. To change it you need to use the WordPress enter_title_here
hook using the function add_filter
.
For the 'Study' post type, we can set the title fields placeholder text 'Enter name of the client here'. This will enhance our design by adding clarity. We want users to feel empowered, not confused.
Changing the placeholder text is a great way to remind you what the title information should be, and it is kind to be clear. Still, is there a way to be more helpful? Many times our user wants to be a hero but needs a guide.
By adding help tabs, we can direct the user when they need assistance. Now that is empowering!
Admin: Adding a Help Tab to a Post Type
To add a help tab to a post type use the admin_head
hook using the function add_action
. We just need to make sure our help tab only appears for our 'Study' post type.
There is a lot you can do with help tabs in WordPress. Our example is just a basic setup to help you get moving in the right direction. You can learn about help tabs more in the WordPress codex.
By adding help tabs, you get to the heart of empowering the user and allowing them to feel like a hero.
Now, if you hang in there a little longer, we are about to move from the admin into the REST API, custom fields, and theme templating! But first, to do that, you need to understand post type hierarchy and those tricky little alert messages we promised to tackle.
Admin: Post Type Hierarchical
In WordPress, 'Posts' can not have child posts but 'Pages' can. With 'Pages' a child page is a subpage. You can have your custom post type use hierarchy like 'Pages' using the hierarchical
argument. However, for the 'Studies' example, we do not need this functionality.
Admin: Messaging for Edit, Add, Bulk, and More.
If you are a true master of the details, you also noticed that your alert messages in the admin say 'Post' and 'Posts'. To make alerts fit the post type you need to customize them.
When you update, add, edit, restore, draft, delete, or perform a single or bulk action on your custom post type WordPress displays alert messages. By default, a post type message for updating a post is 'Post updated. View post.'. The other messages will also say 'Post' in some form.
Our 'Study' post type alert post messages for single and bulk actions should not say 'Post' but 'Study'. To update the messaging, we need two hooks:
post_updated_messages
- For single custom post type alert messages.bulk_post_updated_messages
- For bulk custom post type alert messages.
Single Post Messages
The post_updated_messages
allows us to add custom post messages in the admin for our post type.
Bulk Post Messages
To add custom bulk messages in the admin for our post type we need to use the bulk_post_updated_messages
hook.
Let's move out of the admin design for now and onto the REST API. Great design is not just how things look; it's also about solving problems, and the REST API empowers problem-solving.
Enable the REST API for the Study Post Type ⚡️
The REST API is the next big thing in WordPress. You will also want your post type to take advantage of the newest parts of WordPress, like Gutenberg.
To enable the REST API for your custom post type it's as easy as setting the show_in_rest
argument to true
.
When you enable the REST API your post type will also start using Gutenberg if it also supports the editor
.
Enabling the WordPress REST API allows you to access your post type through the new WordPress endpoints as a JSON object. To view the post type REST endpoint go to the URL /wp-json/wp/v2/study
.
If you would like to change the post type base name in the URL from study
to studies
use the rest_base
argument.
Boom! Like a pro. The API is good to go, and Gutenberg is enabled.
There is a lot you can do with the REST API and post types, but for us, its good just to know it's enabled.
Add Gutenberg to a Custom Post Type
To enable Gutenberg for a custom post type it must support the editor
and have the REST API enabled.
Let's step back from the study
post type for a moment to create a new post type named article
. We will use the article
post type to focus on enabling Gutenberg.
As you can see the two arguments we need to add Gutenberg are the following:
Removing Gutenberg from a Post Type
To remove Gutenberg from a post type, add the WordPress action hook use_block_editor_for_post_type
to your theme's functions.php
file with the following code.
The above code will forcibly disable Gutenberg when your post type. Forcibly disabling Gutenberg is super handy when your post type also needs to be accessible from the WordPress REST API.
Not all post types should have Gutenberg enabled. Sometimes you want to use the classic editor with your custom post type. In those situations, this solution will give you the result you need.
Adding a Meta Box
A meta box is a drag-and-drop element or container that appears on the dashboard or within a post type page. Let's add a meta box when registering our post type. This will give us a place to add our own custom input fields which we will do next. These custom fields are important because they let us break content into smaller parts giving us greater control of our design. Greater control is a great feeling.
To step toward adding a meta box to a post type we need to use the register_meta_box_cb
argument.
Now, it is important to understand a few things when it comes to meta boxes:
register_meta_box_cb
does not add a meta box to the WordPress post type. It simply hooks us into the location WordPress will want us to add a meta box.... I know super confusing. Keep moving along and you will get it soon enough.- We need to create a function to use with
register_meta_box_cb
. We will call itstudy_meta_box()
. - To add a meta box we actually need to use the function
add_meta_box
. We can do that within thestudy_meta_box()
function we are about to create. - Again,
register_meta_box_cb
only allows us to hook into WordPress at the right place and time to register a meta box but does not add a meta box to the post type itself.
Great work! Adding a meta box is not so simple to understand but you did it. Now we can build the most powerful feature yet: Custom fields 🎉
Adding Custom Fields and Saving Them
Custom fields make it easy to take more control over the front-end design of your site. After all, some types of content need more than the 'Title', 'Featured Image' and 'Editor'. For example, what if a case study page needs a link to the client's website?
Sure you could simply add a link to the body copy of the case study. However, sometimes you need more flexibility. You don't always want the editor to control the full design. You need to break the different pieces of content into separate input fields.
This is why we use the meta box on the post types. We can use the meta box as a place to add the HTML we need for our custom input fields. Doing this will give us the control and flexibility we need.
Once you have a meta box and field are in place you need to save the field's value to the database. For a post type, the place to save your data is the post meta table, wp_postsmeta
, in the WordPress database.
Let's take a deep dive into writing an HTML input field and saving it to the WordPress database. Are you ready?
Adding the custom text field to our meta box
To add the custom input field we just need to visit our study_meta_box()
function and update the code that is there. In our case, we will create a simple HTML text input field named your_field
. We will not get into other types of fields but the text field is very powerful.
Here are the things we need to consider for our text input field:
- Make sure we follow the WordPress design guidelines. For the sake of brevity, our code will cover the bare minimum.
- Consider accessibility and use
<label>
. - Populate the field if there is an existing value using get_post_meta.
- Sanitize the field output with
esc_attr
. We can not always trust user input. - Secure your meta box and all fields using wp_nonce_field.
Great Work! Now let's save the field when we update, save a draft, or publish our post type content.
Saving the Custom HTML field using WordPress and PHP
To save our custom field to WordPress we need to use the WordPress hook save_post
. The save_post
hook will be called when a post is added or updated. Because the hook fires when content is saved and updated it is a perfect place to wire our code to save custom fields.
When saving custom fields we need to consider a few things:
- Since post meta does not work with WordPress revisions we need to make sure our fields are not overridden when a post is autosave or restored.
- If our field is not present in the
$_POST
PHP super global we need to back out of saving since thesave_post
hook could be fired from anywhere and we do not want to delete our custom data if that happens. - Make sure we complete our security check of the nonce field using check_admin_referer.
- We need to clean up our text field so we don't get empty strings but we do want to allow for the text value of
0
. - We need to store the field in the WordPress database
wp_postsmeta
. We can do this with update_post_meta.update_post_meta
will not only update existing post meta but also add it if it does not exist. - We need to delete the old metadata if there is no value in the input field to keep the database clean. This will be better than saving the meta value as an empty string.
With all this in mind, we can code the saving bits of our custom field.
Now, this is exciting. Your admin design is getting very powerful and looking sharp. Yes, you can do a little dance. 🙌
Creating and saving custom fields is a big deal. If you want to add multiple fields you can modify what we have written. However, if you plan to code a lot of custom fields installing and using TypeRocket would be a faster way to code them.
TypeRocket lets you add more than just text fields. You can add gallery, radio, and repeater fields. Plus, it is 100% free!
Adding a Taxonomy
Taxonomies enable you to link related content. In WordPress 'Posts' have the taxonomies 'Tags' and 'Categories'. 'Tags' let you link related posts to one another as well as label them so you can understand what the topics of the posts might include.
For our custom post type 'Study' we can take advantage of 'Tags' using the taxonomies
argument.
By default, WordPress has two taxonomies: 'Tags' (post_tag
) and 'Categories' (category
). You can also create your own taxonomies and use them for your post type. Much like post types, you need to register custom taxonomies. For taxonomies, use the function register_taxonomy
.
Setting Up For The Front-end By Enabling Archives
At long last, we have arrived at the front-end design! To set-up the list of your custom post type content on the front-end you need to do three things:
- Enable the
has_archive
argument. - Set the rewrite rules
slug
to the plural form of the post types name. In our case, this is 'studies'. - Then flush the WordPress permlinks
Now that everything is in place you can start theming your custom post type content. For me, that is the default WordPress theme. For you that can be any theme!
Templating a Post Type In Your WordPress Theme
Templating a custom post type requires a little understanding of the WordPress Templating Hierarchy. If you are not familiar with how WordPress works with templates they use a pattern similar to how CSS handles specificity. However, we do not need to get bogged down with details this late in the game.
From the templating hierarchy, there are two template files we care about for the 'Study' post type:
single-study.php
- For the single page when you go tohttp://example.com/studies/your-study-post
to see a study.archive-study.php
- For the archive page when you go tohttp://example.com/studies/
to see the list of studies.
By default, WordPress will use your themes single.php
and archive.php
templates for a custom post type's front-end design. When your specific post types template files exist, single-study.php
and archive-study.php
, they override the WordPress defaults.
You ready to start theming? Read on!
Single Page
Because we are using the WordPress Twenty Seventeen theme in this tutorial we need to create a new file name single-study.php
and work with that file.
Types Of Post Bachelor Degrees
Within our single template file for the post type, we need to add a WordPress loop.
Types Of Post Box Uk
Also, since we added a custom field to the post type meta box we can access it from within the loop as well.
Archive Page
For the post type's archive page we use the same process as we did for the single page. Only this time we use the archive-study.php
template.
For the archive page, we will want to link to each study we look through and only show the title of the 'Study'. However, nothing is stopping you from having your own fun.
With the archive page in place, everything is looking great... or is it? 'What happens if you have 100 case studies?' 😱
Modifying the Archive Page Query
When you have an archive page it will only list as many items as your admin has specified in the 'Settings > Reading' area. Many times you will not want the main archive page for a custom post type to be limited to the same number of items as your main blog feed. To remove the number limit on the archive page modify the main query using the hook pre_get_posts
.
Once you are hooked into pre_get_posts
you can access the main WP_Query
object and modify it. To list every 'Study' we need to:
- Hook into
pre_get_posts
. - Detect if we are running the main query using the method
is_main_query
. - Detect if we are on the 'Study' archive page using
is_post_type_archive
. - Set the
posts_per_page
of the mainWP_Query
and set it to-1
.-1
will remove the number limit and list everything.
When you use the hook pre_get_posts
you are accessing the SQL query that WordPress runs for you. This query is what gives you access to your custom post type, heck even 'Posts' and 'Pages', without having to write any SQL. That is kinda nice. 😎
Well, there is not much left to share. However, if you want to be a complete post type master you must learn one more thing. How to take total control!
Controlling Post Type Rights and Capabilities
When you create a post type anyone who can edit or add a 'Post' in the admin and do so for your new post type. Most of the time this is what you want. However, some types of content you might want to restrict so that only an administrator can edit and add them.
Lockdown! 🙅♂️
When you need to add restrictions to your post type WordPress roles and capabilities come into play.
WordPress capabilities are the levels used to the manage permissions of authenticated users. For example, only an 'Administrator' will have the capability to activate plugins by default. For an 'Editor' to be able to activate plugins we need to add the right capability so they can.
Activate a Capability
To activate a capability for a WordPress 'Role' like 'Editor' you need to use the WP_Role
object method add_cap
. If you want to remove a capability you can use remove_cap
.
When you update a role and add a capability it changes the database. If you do not want the database to be updated on every page load, and you do not, you need code only run on theme activation.
To run code when a theme is activated you need to use the hook after_switch_theme
.
Types Of Post Office Positions
Also, when your theme is deactivated you will want to remove any changes you made roles and capabilities. You can use the hook switch_theme
to run code on your themes deactivation.
Update Post Type Capabilities
Like we talk about before, every custom post type has the capabilities of 'Posts'. This means that your custom post type will have 'Post' capabilities controlling who can use the new post type. The default post type capabilities will be:
edit_post
read_post
delete_post
edit_posts
edit_others_posts
publish_posts
read_private_posts
read
delete_posts
delete_private_posts
delete_published_posts
delete_others_posts
edit_private_posts
edit_published_posts
create_posts
However, you can remap, or rename, these capabilities and apply them to the 'Role' you want the post type to be accessible. For us, that is the 'Administrator' role. Doing this will remove the default permissions levels.
Types Of Post Office
To set the capabilities we need to use the capabilities
argument when we register our 'Study' post type. Like when setting labels we will create a function to keep everything clean.
Next, we just need to apply the capabilities to our post type when it is registered.
Finally, we must update the 'Administrator' role's capabilities when the theme is activated and deactivated. Note, you will need to reactivate your theme if it is activated already.
Controlling Visibility
The last piece in taking control of your post type is understanding its visibility. That is, whether your post type should be seen on the front-end and in the admin.
Think back to the beginning when we first register our post type. We did not mention it at the time but there is a public
argument.
The public
argument lets WordPress know if your post type should be visible in the admin and on the front-end of your site. If you set this setting to false
the post type will not be seen on the front-end or the admin.
But, what happens if you want a post type for adding private 'Notes' that should be visible in the admin but not visible on the front-end?
To handle situations like this WordPress gives you finer control over visibility. Let's take the 'Notes' problem and solve it with a few more advanced visibility arguments:
show_in_nav_menus
show_in_admin_bar
show_in_menu
show_ui
By setting all of the above to true
and the public
setting to false
we can make the 'Notes' post type only visible in the admin.
When the 'Notes' are accessible on the admin only and you publish a note it will no longer display a link under the title.
Color me impressed that you are now a WordPress post type expert. You know just about everything there is to know of importance about post types. And with all of this, I leave you with a finishing thought.
Types Of Post Office Jobs
The One Thing You Never Want to Forget
Remember the goal at the heart of crafting a post type is creating a user experience that is beautiful and clear. You won't need a post type for everything but you will need a heart that cares deeply about creating the best experience. An experience that leaves a user who has completed a task feeling like a hero.
Types Of Post Bacc Programs
You rock! ❤️ ❤️ ❤️
Extra Notes
Normally, WordPress recommends making a plugin when registering post types. Don't worry! You don't need to learn to create a plugin. A plugin is only helpful because when you code a post type into a theme that post type and all the content into will be hidden if you switch or change themes. When you switch themes the content will not be lost or deleted. Do not worry there. Only, it will not be accessible.
Flush the WordPress permlinks once you finish making a change to a post type.
To customize the meta box further go to the WordPress documentation on adding a meta box.
For more label options check out the documentation for register_post_type.
- For even more information on post types check the documentation.