You need to define the custom post type by specifying its name, label, and other parameters. You can do this by adding code to the functions.php file in your WordPress theme or by using a plugin like Custom Post Type UI.
Step-1 : Here’s an example of how you can define a custom post type:
//Custom Post
function vasist_toolkit_custom_post()
{
// Projects Custom Post
register_post_type('project',
array(
'labels' => array(
'name' => esc_html__('Projects', 'vasist-toolkit'),
'singular_name' => esc_html__('Projects', 'vasist-toolkit'),
),
'menu_icon' => 'dashicons-images-alt',
'supports' => array('title', 'thumbnail', 'editor', 'excerpt'),
'public' => true,
'has_archive' => true,
'rewrite' => array( 'slug' => $project_permalink ),
)
);
}
Here’s describe more detailed every parameter :
register_post_type() function is doing: ‘project’ : This is the name of the custom post type being registered. In this case, it’s called “project”.
- Labels: This parameter is an array that defines the names of the post type, both plural and singular. In this function, the plural and singular names are both set to “Projects”.
- Menu Icon: This parameter specifies the icon that will appear next to the post type in the WordPress dashboard menu. In this function, the icon is set to dashicons-images-alt, which is a built-in WordPress icon for image-related content.
- Supports: This parameter specifies the features that the post type will support, such as title, thumbnail, editor, and excerpt. In this function, the post type supports all of these features.
- Public: This parameter specifies whether the post type should be publicly visible on the frontend of the site. If set to true, the post type will be visible to visitors of the site. If set to false, the post type will only be visible to administrators and editors. In this function, the post type is set to true, so it will be publicly visible.
- Has Archive: This parameter specifies whether the post type should have an archive page that lists all the posts of this type. If set to true, the post type will have an archive page. If set to false, the post type will not have an archive page. In this function, the post type is set to true, so it will have an archive page.
- Rewrite: This parameter is used to define the URL structure for the custom post type. In this case, the ‘slug’ parameter is set to ‘project-post’, which means that the URL structure for the custom post type will be example.com/project-post/post-name.
The ‘init’ and ‘add_action’ functions are WordPress functions that are used to hook into the initialization process of WordPress and run the function ‘vasist_toolkit_custom_post’ when WordPress is initializing. This ensures that the custom post type is registered and available to use when the site loads.
Step-2: Here’s an example of how you can define a custom post Catagory:
//Custom Post
function vasist_custom_post_taxonomy(){
register_taxonomy(
'project_cat',
'project',
array(
'hierarchical' => true,
'label' => esc_html__('Projects Category', 'vasist-toolkit' ),
'query_var' => true,
'show_admin_column' => true,
'rewrite' => array(
'slug' => 'project-category',
'with_front' => true
)
)
);
}
add_action('init', 'vasist_custom_post_taxonomy');
Here’s describe more detailed every parameter :
The register_taxonomy() function is used to create a new taxonomy and takes an array of parameters that define the taxonomy.
- ‘project_cat’ : This is the name of the custom taxonomy being registered. In this case, it’s called “project_cat”.
- ‘project’ : This is the name of the custom post type that the taxonomy is associated with. In this case, it’s the ‘project’ post type that was registered earlier.
- ‘hierarchical’ : This parameter specifies whether the taxonomy is hierarchical or not. A hierarchical taxonomy is one that has parent-child relationships between its terms. In this case, it’s set to true to create a hierarchical taxonomy.
- ‘label’ : This parameter sets the label used to identify the taxonomy in the WordPress admin menu and in the page title.
- ‘query_var’ : This parameter sets whether the taxonomy is queryable or not. If set to true, the taxonomy can be used in custom queries to filter posts by their terms.
- ‘show_admin_column’ : This parameter sets whether the taxonomy should be displayed on the admin column in the dashboard. If set to true, the taxonomy will be displayed on the post-edit screen.
- ‘rewrite’ : This parameter is used to define the URL structure for the taxonomy. The ‘slug’ parameter sets the base URL for the taxonomy, and the ‘with_front’ parameter sets whether the taxonomy should use the site’s permalink structure or a custom structure.
Finally, the add_action() function is used to hook into the ‘init’ action in WordPress and run the ‘vasist_custom_post_taxonomy’ function when WordPress is initializing. This ensures that the custom taxonomy is registered and available to use when the site loads.
Step-3: Here’s an example of how you can define a custom post Elementor Widget:
<?php
/**
* Projects Widget
*/
namespace Elementor;
class Graphos_Projects extends Widget_Base {
public function get_name() {
return 'Projects';
}
public function get_title() {
return __( 'Projects', 'graphos-toolkit' );
}
public function get_icon() {
return 'eicon-image-before-after';
}
public function get_categories() {
return [ 'graphos-elements' ];
}
protected function register_controls() {
$this->start_controls_section(
'project_section',
[
'label' => __( 'Projects', 'graphos-toolkit' ),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'cat_name', [
'label' => __( 'Category', 'graphos-toolkit' ),
'description' => __( 'Enter the category slugs separated by commas (Eg. cat1, cat2)', 'graphos-toolkit' ),
'type' => Controls_Manager::TEXT,
'label_block' => true,
]
);
$this->add_control(
'order',
[
'label' => __( 'Projects Order By', 'graphos-toolkit' ),
'type' => Controls_Manager::SELECT,
'options' => [
'DESC' => __( 'DESC', 'graphos-toolkit' ),
'ASC' => __( 'ASC', 'graphos-toolkit' ),
],
'default' => 'DESC',
]
);
$this->add_control(
'count',
[
'label' => __( 'Post Per Page', 'graphos-toolkit' ),
'type' => Controls_Manager::NUMBER,
'default' => 8,
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
// Projects Query
if( $settings['cat_name'] != '' ) {
$args = array(
'post_type' => 'project',
'posts_per_page'=> $settings['count'],
'order' => $settings['order'],
'tax_query' => array(
array(
'taxonomy' => 'project_cat',
'field' => 'slug',
'terms' => explode( ',', str_replace( ' ', '', $settings['cat_name'])),
'hide_empty' => false
)
)
);
} else {
$args = array(
'post_type' => 'project',
'posts_per_page' => $settings['count'],
'order' => $settings['order']
);
}
$project_array = new \WP_Query( $args );
?>
<div class="container">
<div class="row align-items-center">
<div class="col-xl-3 col-lg-6 col-md-6 order-xl-1 order-lg-1 order-md-1">
<?php
$i=1;
while($project_array->have_posts()):
$project_array->the_post();
$id = get_the_ID();
if($i==1 OR $i==2):
?>
<div class="project-card">
<?php if(get_the_post_thumbnail_url() != ''): ?>
<img src="<?php echo get_the_post_thumbnail_url( get_the_ID() ); ?>" alt="<?php the_post_thumbnail_caption(); ?>">
<?php endif; ?>
<div class="project-info">
<h3><a href="<?php echo esc_url(get_the_permalink($id)); ?>"><?php the_title(); ?></a></h3>
</div>
</div>
<?php endif; $i++; endwhile; wp_reset_query(); ?>
</div>
<?php
$i=1;
while($project_array->have_posts()):
$project_array->the_post();
$id = get_the_ID();
if($i==3 ):
?>
<div class="col-xl-3 col-lg-6 col-md-6 order-xl-2 order-lg-2 order-md-2">
<div class="project-card">
<?php if(get_the_post_thumbnail_url() != ''): ?>
<img src="<?php echo get_the_post_thumbnail_url( get_the_ID() ); ?>" alt="<?php the_post_thumbnail_caption(); ?>">
<?php endif; ?>
<div class="project-info">
<h3><a href="<?php echo esc_url(get_the_permalink($id)); ?>"><?php the_title(); ?></a></h3>
</div>
</div>
</div>
<?php endif; $i++; endwhile; wp_reset_query(); ?>
<div class="col-xl-3 col-lg-6 col-md-6 order-xl-3 order-lg-4 order-md-4">
<?php
$i=1;
while($project_array->have_posts()):
$project_array->the_post();
$id = get_the_ID();
if($i==4 OR $i==5):
?>
<div class="project-card">
<?php if(get_the_post_thumbnail_url() != ''): ?>
<img src="<?php echo get_the_post_thumbnail_url( get_the_ID() ); ?>" alt="<?php the_post_thumbnail_caption(); ?>">
<?php endif; ?>
<div class="project-info">
<h3><a href="<?php echo esc_url(get_the_permalink($id)); ?>"><?php the_title(); ?></a></h3>
</div>
</div>
<?php endif; $i++; endwhile; wp_reset_query(); ?>
</div>
<?php
$i=1;
while($project_array->have_posts()):
$project_array->the_post();
$id = get_the_ID();
if($i==6 ):
?>
<div class="col-xl-3 col-lg-6 col-md-6 order-xl-4 order-lg-3 order-md-3">
<div class="project-card">
<?php if(get_the_post_thumbnail_url() != ''): ?>
<img src="<?php echo get_the_post_thumbnail_url( get_the_ID() ); ?>" alt="<?php the_post_thumbnail_caption(); ?>">
<?php endif; ?>
<div class="project-info">
<h3><a href="<?php echo esc_url(get_the_permalink($id)); ?>"><?php the_title(); ?></a></h3>
</div>
</div>
</div>
<?php endif; $i++; endwhile; wp_reset_query(); ?>
</div>
<?php if( $settings['button_text']): ?>
<div class="text-center mt-20">
<a href="<?php echo esc_url( $link ); ?>" class="btn style2"><?php echo esc_html( $settings['button_text'] ); ?></a>
</div>
<?php endif; ?>
</div>
<?php
}
}
Plugin::instance()->widgets_manager->register( new Graphos_Projects );
Here I explain more details, Project Query:
// Projects Query
if( $settings['cat_name'] != '' ) {
$args = array(
'post_type' => 'project',
'posts_per_page'=> $settings['count'],
'order' => $settings['order'],
'tax_query' => array(
array(
'taxonomy' => 'project_cat',
'field' => 'slug',
'terms' => explode( ',', str_replace( ' ', '', $settings['cat_name'])),
'hide_empty' => false
)
)
);
} else {
$args = array(
'post_type' => 'project',
'posts_per_page' => $settings['count'],
'order' => $settings['order']
);
}
$project_array = new \WP_Query( $args );
Here’s describe more detail every parameter of Project Query:
The first if statement checks if the ‘cat_name’ key in the $settings array is not empty. If it is not empty, it means that a category name has been specified in the settings.
If a category name has been specified, an array of query arguments ($args) is created to retrieve posts of the custom post type ‘project’ that belong to the specified category. The ‘posts_per_page’ argument specifies the number of posts to retrieve. The ‘order’ argument specifies the order in which the posts should be retrieved (e.g. ascending or descending order).
The ‘tax_query’ argument is used to specify a taxonomy query. In this case, a taxonomy query is used to retrieve posts that belong to the ‘project_cat’ taxonomy, and have the term(s) specified in the ‘cat_name’ setting. The ‘field’ parameter is set to ‘slug’, which means that the query will search for terms based on their slug. The ‘terms’ parameter is set to an array of term slugs that are retrieved by exploding the comma-separated list of terms specified in the ‘cat_name’ setting. The ‘hide_empty’ parameter is set to false, which means that empty terms will also be included in the query result.
If no category name is specified in the settings, the else statement is executed. In this case, the query arguments ($args) are created to retrieve all posts of the custom post type ‘project’, based on the ‘posts_per_page’ and ‘order’ settings.
Finally, a new WP_Query object is created with the query arguments ($args) to retrieve the list of projects, and stored in the $project_array variable. This object can then be used to display the list of projects on the website.
Conclusion
this tutorial helps your create custom post & custom post elementor, and understand more details about every parameter. By following every step you can create easily custom post & custom post elementor.
Have a good day .
Leave a Reply