Since search engines place so much significance on the speed of the loading time, it became vital to maximizing the website’s speed. Improving your website’s speed brings along a lot of benefits. Faster websites prove to have better conversions, higher search engine rankings, and further content reach. Another problem with slow loading time is that visitors instantly abandon pages that don’t load within a few seconds after opening!
Customers always find it convenient when they get help while purchasing a product. A lot of their niggling doubts, that crop up post reading the product description, reviews, and FAQs, come to an end with constant, instant support.
As you know, by default, WordPress comes with two post types: page and post. If you want a more variety of suitable post types to choose from, e.g., a post type for products, you have to create them yourself. Such post types are called Custom Post Types.
In this post, I am going to share with you two ways to create custom post types in WordPress. One uses codes, one uses plugins. Of course, the way using plugin seems like easier because of touching no code.
Let’s see how to do it.
Create Custom Post Types Using Code
Manually register a new custom post type
We need to hook to the init action to let WordPress register post type. We need the code below in the theme’s function.php:
Inside the prefix_create_custom_post_type() function is the register_post_type() the function which serves the purpose of creating a custom post type with parameters declared with $args.
Add parameters for your custom post type
There are many arguments that can be passed to $args and things can get quite complicated. For that reason, make sure to know what you need in order to choose sufficient arguments. To understand the WordPress register_post_type function paramerters, click here.
In this post, I have just created a simple custom post type, so I am using some basic parameters and arguments. Once you’ve clearly marked out what you want, proceed below.
With the same code structure as the one in the 1st step, but I use two additional parameters which are $labels and $supports. Furthermore, I am going to declare the $args with more details.
The $labels parameter is insignificant, you don’t have to pay too much attention to it. But, it will help you recognize the post type in the admin area.
The $supports parameter is used for declaring that the post type is supported with title, editor, excerpt, featured image, etc.
The $args parameter is used for including all the above arrays and some other important arguments as well.
You may learn more about the argument and its expression here.
function prefix_create_custom_post_type() {
/*
* The $labels describes how the post type appears.
*/
$labels = array(
'name' => 'Products', // Plural name
'singular_name' => 'Product' // Singular name
);
/*
* The $supports parameter describes what the post type supports
*/
$supports = array(
'title', // Post title
'editor', // Post content
'excerpt', // Allows short description
'author', // Allows showing and choosing author
'thumbnail', // Allows feature images
'comments', // Enables comments
'trackbacks', // Supports trackbacks
'revisions', // Shows autosaved version of the posts
'custom-fields' // Supports by custom fields
);
/*
* The $args parameter holds important parameters for the custom post type
*/
$args = array(
'labels' => $labels,
'description' => 'Post type post product', // Description
'supports' => $supports,
'taxonomies' => array( 'category', 'post_tag' ), // Allowed taxonomies
'hierarchical' => false, // Allows hierarchical categorization, if set to false, the Custom Post Type will behave like Post, else it will behave like Page
'public' => true, // Makes the post type public
'show_ui' => true, // Displays an interface for this post type
'show_in_menu' => true, // Displays in the Admin Menu (the left panel)
'show_in_nav_menus' => true, // Displays in Appearance -> Menus
'show_in_admin_bar' => true, // Displays in the black admin bar
'menu_position' => 5, // The position number in the left menu
'menu_icon' => true, // The URL for the icon used for this post type
'can_export' => true, // Allows content export using Tools -> Export
'has_archive' => true, // Enables post type archive (by month, date, or year)
'exclude_from_search' => false, // Excludes posts of this type in the front-end search result page if set to true, include them if set to false
'publicly_queryable' => true, // Allows queries to be performed on the front-end part if set to true
'capability_type' => 'post' // Allows read, edit, delete like “Post”
);
register_post_type('product', $args); //Create a post type with the slug is ‘product’ and arguments in $args.
}
add_action('init', 'prefix_create_custom_post_type');
Save that then go back to the admin dashboard. You will get something like this:
Custom post type menu in WordPress admin
A new menu named Product has appeared in the left panel. This is your created custom post type.
When you hover the mouse on this Product tab, you will see the options: All Products to show all the posts in Product type, Add new to add a new post in Product type, etc. Those are the same with two default post types, post, and page.
So now, you have finished creating your custom post type using code only. Go next and try a plugin to do it.
Create Custom Post Type using MB Custom Post Types & Custom Taxonomies plugin
I am going to use the MB Custom Post Types & Custom Taxonomies plugin to create a new post type. This is an extension of the Meta Box Plugin. If you are not familiar with the Meta Box, read this post.
Before getting started
We need to install and activate MB Custom Post Types & Custom Taxonomies. It's free and you can download them directly from wordpress.org. Just go to your Dashboard > Plugins > Add New and search for "mb custom post types".
After installing and activating these above two plugins, a new menu will appear in the left panel. Select the Post Types submenu of that.
Create a new post type
Click the New Post Type button.
Register a new post type
You'll see a board of information will appear. Fill in the singular, plural name, and the slug is auto-generated (you can change the slug as you want).
I’ve made a new post type with the name is Featured Products, the slug is featured-product. Pay attention that this slug will be used later to get the data in the front-end.
Next, you can modify the label of your post type in the Label tab if you want. All the options, just like the slug, are auto-created based on your post type's name you've just entered.
If you want to add more advanced information for your post type, press the Advanced tab then a new board with dozens of fields appears to edit.
Here are some options you may need:
Public queryable: choose it to allow getting the taxonomy’s data and display it on the website
Hierarchical: choose it to make the post type hierarchical - it means you can have a parent post type and its sub-post types inside
Show UI: tick to show the post type as the menu in the left menu in the Dashboard
Show in menu: tick to show the post type here:
Show in nav menu: tick to show the post type here
REST API base slug: enter REST API base slug to get the data of the post type via API if you need
Look at the Supports area. Choose the features which you want the post type to have. This part is the same as the step of declaring the $supports parameter when you create post types using the code.
In the Taxonomies tab, choose the taxonomies for this post type. If you create any custom post types, they will also appear here for you to select.
Bonus: We have a tutorial for creating custom taxonomies here.
Step 3: Save and check
When you finished setting up your custom post type, press the Publish button. Then, click the Get PHP code and the code of this post type appear immediately right below there. That is the automatically generated code for your custom post type. It is the same with the code when you did it manually.
Note that you can put the code in the functions.php file and then deactivate the MB Custom Post Type plugin. That means you can use it just like a code generator. Deactivating it might help your website runs a little bit faster.
And now, you can see the result in the admin area:
New post type in the WordPress admin menu
A new menu named Featured Products is now showing in the admin menu.
Is it easy and work for you? With the second method, it may be much easier, especially if you are not a developer.
Bonus: Recently, we launched a free tool called Custom Post Type Generator. It helps you generate code to register custom post types in WordPress so much more quickly and easily.
Final words
I hope that the above two methods will be useful for you when you want to create any custom post type. The code may be the barrier to contain you if you are not tech-savvy and take more time even you are a developer. So, give plugins a try. Save your time, save your efforts, and be free!
In case you need more instruction or just want to share another way to create custom post types, leave us some comments. Enjoy it!
WordPress users must be familiar with the concept of content type classification using Categories or Tags. These things also are called Taxonomy. So what is Taxonomy? Simply, it gives you various options for classifying new content types. This article will introduce you to the process of creating a custom taxonomy that stores additional custom content types without mixing them with Categories or Tags.
If you were interested in WordPress code optimization, you must have met various tips on editing the header.php file of the theme or the wp_head action in that file. It generates various tags for the HEAD of the website pages.
Nowadays, except for system fonts, Google Fonts is the optimal option for most websites for typography. However, there will be 2 disadvantages when you load Google Fonts for typical websites as instructed by Google's tutorials, or by the way to enqueue CSS in most WordPress themes:
The next resources (CSS, JS, images, ...) are blocked while loading fonts. You must wait for loading fonts completely, then these resources continue loading.
The text using Google Fonts won’t display while loading, but it only shows a blank space.
The first drawback will make your website load slower. That'll make your Google PageSpeed Insights scores decrease, so does the SEO scores. The other will cause a bad user experience.
So, how do we solve these 2 weaknesses?
Note: the techniques in this post is outdated. Please visit the 2nd part of this series for a better method. The content in this post is still useful for reference.
How to optimize the Google Fonts loading
Our purpose is to deal with 2 above disadvantages while loading Google fonts, to be more specific:
The other resources must load normally, in order to make your website load faster.
The text must display as usual. When the font is loaded completely, the displayed text will use that font. That can cause a second flash when changing the font. However, this effect may be acceptable because it happens in the blink of an eye.
To do these two tasks at once, we will use the script Google Fonts provided by PerfPerfPerf. Follow up the below way:
Supposing that you need to load font Roboto into your website, we generally add the below script after the <head> section of the website (in a file header.php of the theme):
Or enqueue into the WordPress theme as follows ( functions.php ):
add_action( 'wp_enqueue_scripts', 'themeprefix_scripts' );
function themeprefix_scripts() {
wp_enqueue_script( 'themeprefix-fonts', themeprefix_fonts_url() );
}
function themeprefix_fonts_url() {
return 'https://fonts.googleapis.com/css?family=Roboto';
}
Instead of doing so, now you only need to copy the URL of the font https://fonts.googleapis.com/css?family=Roboto and access PerfPerfPerf page, paste that URL into a URL fonts box. Then, copy the code in the text area box and paste that code into the<head> section of the website. Or if using WordPress, you can hook into wp_head as following (insert into the functions.php file of the theme):
add_action( 'wp_head', 'themeprefix_load_fonts' );
function themeprefix_load_fonts() {
?>
<!-- Code snippet to speed up Google Fonts rendering: googlefonts.3perf.com -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto" as="fetch" crossorigin="anonymous">
<script type="text/javascript">
!function(e,n,t){"use strict";var o="https://fonts.googleapis.com/css?family=Roboto",r="__3perf_googleFontsStylesheet";function c(e){(n.head||n.body).appendChild(e)}function a(){var e=n.createElement("link");e.href=o,e.rel="stylesheet",c(e)}function f(e){if(!n.getElementById(r)){var t=n.createElement("style");t.id=r,c(t)}n.getElementById(r).innerHTML=e}e.FontFace&&e.FontFace.prototype.hasOwnProperty("display")?(t[r]&&f(t[r]),fetch(o).then(function(e){return e.text()}).then(function(e){return e.replace(/@font-face {/g,"@font-face{font-display:swap;")}).then(function(e){return t[r]=e}).then(f).catch(a)):a()}(window,document,localStorage);
</script>
<!-- End of code snippet for Google Fonts -->
<?php
}
After that, load your website again. You will see that the other resources still load normally while loading the font. And when the font is loaded completely, this text will use that font.
The working mechanism and browser compatibility
The reason why the script of PerfPerfPerf, which has just been created recently, can solve the above problems is dependent on several up-to-date technologies on the browsers.
The working mechanism of this script is quite simple but really efficient:
Using thepreload mechanism to load the font. This one allows the browser to priory load the underground resources without any effect on loading the other ones. Now, all browsers support strongly the preload.
Using thefont-display: swap mechanism to display the text first then load the font completely, turn the text's display into the wanted font. All browsers, except IE and Edge, support this attribute.
In case the browser doesn’t support one of or both mechanisms, the fonts will be loaded as usual and your website is still displayed as before.
Make a point of utilizingfont-display: swap, when you inform font in CSS, you must have fall-back font in the end, as follows:
h1, h2 { font-family: Roboto, sans-serif; }
Don't write as below:
h1, h2 { font-family: Roboto; }
How to load Google Fonts in WordPress themes
It will be a really suitable choice if you do it for your websites. But, for WordPress themes, there will need to get a little tweak.
Have a look at the below code which I used for the EightyDays theme of GretaThemes:
add_action( 'wp_head', 'themeprefix_load_fonts' );
function themeprefix_load_fonts() {
$url = themeprefix_fonts_url();
?>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="preload" href="<?php echo esc_url( $url ); ?>" as="fetch" crossorigin="anonymous">
<script type="text/javascript">
!function(e,n,t){"use strict";var o="<?php echo esc_url( $url ); ?>",r="__3perf_googleFontsStylesheet";function c(e){(n.head||n.body).appendChild(e)}function a(){var e=n.createElement("link");e.href=o,e.rel="stylesheet",c(e)}function f(e){if(!n.getElementById(r)){var t=n.createElement("style");t.id=r,c(t)}n.getElementById(r).innerHTML=e}e.FontFace&&e.FontFace.prototype.hasOwnProperty("display")?(t[r]&&f(t[r]),fetch(o).then(function(e){return e.text()}).then(function(e){return e.replace(/@font-face {/g,"@font-face{font-display:swap;")}).then(function(e){return t[r]=e}).then(f).catch(a)):a()}(window,document,localStorage);
</script>
<?php
}
function themeprefix_fonts_url() {
$fonts = array();
$subsets = 'latin-ext';
/* translators: If there are characters in your language that are not supported by Crimson Text, translate this to 'off'. Do not translate into your own language. */
if ( 'off' !== _x( 'on', 'Crimson Text font: on or off', 'themeprefix' ) ) { $fonts[] = 'Crimson Text:400,400i,700,700i'; } /* translators: If there are characters in your language that are not supported by Merriweather, translate this to 'off'. Do not translate into your own language. */ if ( 'off' !== _x( 'on', 'Merriweather font: on or off', 'themeprefix' ) ) {
$fonts[] = 'Merriweather:400,400i,700,700i';
}
/* translators: If there are characters in your language that are not supported by Merriweather, translate this to 'off'. Do not translate into your own language. */
if ( 'off' !== _x( 'on', 'Merriweather font: on or off', 'themeprefix' ) ) {
$fonts[] = 'Merriweather:400,400i,700,700i';
}
$fonts_url = add_query_arg( array(
'family' => rawurlencode( implode( '|', $fonts ) ),
'subset' => rawurlencode( $subsets ),
), 'https://fonts.googleapis.com/css' );
return $fonts_url;
}
This code will do the following things:
Allow the users to choose both loaded fonts and subsets of their using language through the function. Doing this one by translating them from on to off (or maintain them) in the WordPress theme. If you don't know how to translate a WordPress theme to another language, refer to this article.
Generate the JavaScript code for fonts through function themeprefix_load_fonts. This script is copied from the above PerfPerfPerf page. It's using PHP here to change fonts URL only.
Pay attention that you must replace themeprefix with the slug of your theme.
How to deal with page builders plugins or WordPress themes that already load Google Fonts
Not always do you build a theme from scratch? Most people create their websites by using themes from some theme provider or page builder plugins as Beaver Builder or Elementor. In this situation, it will be very difficult to control how to load Google Fonts as well as apply the script provided by PerfPerfPerf.
However, don’t worry, there is still a method to solve this problem. Here takes GretaThemes website as a typical example. This site utilizes Beaver Builder and its available themes to build its web. Because of using the page builder plugin, selecting the font is very easy, with just a few mouse clicks. So, how to optimize Google Fonts loading?
Step 1: See which Google Fonts you are using
For this, you can view it in the theme which you are using, and in the enqueue style section. Pay attention that using page builders may cause it is impossible to get all the fonts like that. The easiest way to get all fonts is by pressing F12 when you are opening the website with Google Chrome or Firefox then see those fonts' URLs in the Network tab:
Get Google Fonts URL in-browser dev tools
Then, copy that URL and save it to use for the below step 3.
Step 2: Disable all Google Fonts loaded by theme and plugin
Next, you must disable all Google Fonts loaded by theme and plugin. You can dequeue CSS files which are enqueued by theme and plugin to get it. However, it takes a lot of time because you must know the IDs of these CSS files. Regarding themes, it is also easy, but it's quite complete if you use page builder.
In place of doing that way, we can use the Autoptimize plugin. This plugin allows us to disable all Google Fonts on the website. Just go to Settings → Autoptimize and select the Extra tab, then on Google Fonts section, select Remove Google Fonts.
Disable Google Fonts with Autoptimize
Step 3: Load Google Fonts into the website
After Google Fonts are disabled, we need to load Google fonts manually. I want you to copy the URL fonts you get in step 1, then access to PerfPerfPerf page, paste the URL fonts into this page to generate the script.
Then, insert that script into your website by adding the following code to the functions.php file of the theme (or child theme):
add_action( 'wp_head', 'themeprefix_load_fonts' );
function themeprefix_load_fonts() {
?>
<!-- Code snippet to speed up Google Fonts rendering: googlefonts.3perf.com -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto" as="fetch" crossorigin="anonymous"> <script type="text/javascript"> !function(e,n,t){"use strict";var o="https://fonts.googleapis.com/css?family=Roboto",r="__3perf_googleFontsStylesheet";function c(e){(n.head||n.body).appendChild(e)}function a(){var e=n.createElement("link");e.href=o,e.rel="stylesheet",c(e)}function f(e){if(!n.getElementById(r)){var t=n.createElement("style");t.id=r,c(t)}n.getElementById(r).innerHTML=e}e.FontFace&&e.FontFace.prototype.hasOwnProperty("display")?(t[r]&&f(t[r]),fetch(o).then(function(e){return e.text()}).then(function(e){return e.replace(/@font-face {/g,"@font-face{font-display:swap;")}).then(function(e){return t[r]=e}).then(f).catch(a)):a()}(window,document,localStorage);
</script>
<!-- End of code snippet for Google Fonts -->
<?php
}
Pay attention to changing the above script into the one which you copy on the PerfPerfPerf page.
If you don't want to code, you can use the Slim SEO plugin to insert that code. Go to Settings → Slim SEO, then paste that script:
Insert header and footer code with Slim SEO
Note that Slim SEO is a SEO plugin for WordPress. It supports inserting webmaster verification tags or tracking scripts into the header or footer of the website. We use it to insert our scripts to load Google Fonts. But Slim SEO does more than that. It's a free WordPress SEO plugin that's lightweight, fast and has no-bloat. It's developed by the same team at Meta Box, so check it out!
In case you use Beaver Theme, to simplify, you can go to Customize → Code → Head Code and directly paste that script from PerfPerfPerf to there:
Insert Google Fonts script in Beaver Builder
That's done!
So, we have learned about how to load Google Fonts faster for WordPress: do manually and by plugins. At the same time, we also see how to deal with the page builder plugins. With these methods, your website speed and user experience will increase significantly. So let’s get started it, apply immediately to your website, and let me know the results in the below comment section.
We are all aware of the fact that WordPress is not so well-known for speed. One should put some effort to boost the performance of a WordPress site. One of the most popular ways to do so is to optimize images in WordPress. According to research, your website has only 7 seconds to grab the visitors’ attention. If got, there is a chance that he will be the recurring visitor. If not, he might not visit the site ever again! In this article, I’ll show you the benefits of image optimization and how one can speed up a WordPress site just by optimizing images.
Are you looking to add a contact form on your WordPress site? Not sure which one of the thousands of WordPress contact form plugins to use? If you’re running a WordPress website, contact form plugins can prove to be very useful when it comes to addressing that particular concern. WordPress contact forms make it much simpler and easier for your customers to get in touch with you, and creating one isn’t that hard either. With WordPress, all you’re going to need is a suitable plugin. In this article, we’ll be looking at eight of the very best contact form plugins available for WordPress.
WordPress is the most popular and widely used blogging platform. It is used by millions of people around the globe. Because of this reason, hackers and spammers are also taking keen interest in breaking the security of the blogs. That’s why it’s important to think about security in advance. A reliable hosting service is the first thing you should ensure for your site. As an additional layer of protection, consider the following security plugins we’re rolled out for you. The list has some of the best security plugins for WordPress that are being used by users of WordPress to keep their site secure.
