Preview:
add_action('init', 'services_post_type_init');
function services_post_type_init()
{
 
    $labels = array(
 
        'name' => __('Services', 'post type general name', ''),
        'singular_name' => __('Service', 'post type singular name', ''),
        'add_new' => __('Add New', 'Services', ''),
        'add_new_item' => __('Add New Service', ''),
        'edit_item' => __('Edit Service', ''),
        'new_item' => __('New Service', ''),
        'view_item' => __('View Service', ''),
        'search_items' => __('Search Services', ''),
        'not_found' =>  __('No Services found', ''),
        'not_found_in_trash' => __('No Services found in Trash', ''),
        'parent_item_colon' => ''
    );

    $args = array(
        'labels' => $labels,
        'public' => true,
        'publicly_queryable' => true,
        'show_ui' => true,
        'rewrite' => true,
        'query_var' => true,
        'menu_icon' => 'dashicons-admin-generic',
        'capability_type' => 'post',
        'hierarchical' => true,
        'has_archive' => true,
        'show_in_nav_menus' => true,
        'menu_position' => null,
        'rewrite' => array(
            'slug' => 'services',
            'with_front' => true
        ),
        'supports' => array(
            'title',
            'editor',
            'thumbnail'
        )
    );

    register_post_type('services', $args);

    // Add a taxonomy for your custom post type
    $taxonomy_labels = array(
        'name' => _x('Service Categories', 'taxonomy general name'),
        'singular_name' => _x('Service Category', 'taxonomy singular name'),
        'search_items' =>  __('Search Service Categories'),
        'all_items' => __('All Service Categories'),
        'parent_item' => __('Parent Service Category'),
        'parent_item_colon' => __('Parent Service Category:'),
        'edit_item' => __('Edit Service Category'),
        'update_item' => __('Update Service Category'),
        'add_new_item' => __('Add New Service Category'),
        'new_item_name' => __('New Service Category Name'),
        'menu_name' => __('Service Categories'),
    );

    register_taxonomy('service_category', 'services', array(
        'hierarchical' => true,
        'labels' => $taxonomy_labels,
        'show_ui' => true,
        'query_var' => true,
        'rewrite' => array('slug' => 'service-category'),
    ));
}



// Add Shortcode [our_services];
add_shortcode('our_services', 'codex_our_services');
function codex_our_services()
{
    ob_start();
    wp_reset_postdata();
?>
 
    <div class="services-main-start">
        <div class="servicesSlider">
            <?php
            $arg = array(
                'post_type' => 'services',
                'posts_per_page' => -1,
            );
            $po = new WP_Query($arg);
            ?>
            
            <?php if ($po->have_posts()) : ?>
 
                <?php while ($po->have_posts()) : ?>
                    <?php $po->the_post(); ?>
                    
                          
                        <div class="ser-body">
                            <!--<a href="#">-->
                                <div class="thumbnail-blog">
                                    <?php echo get_the_post_thumbnail(get_the_ID(), 'full'); ?>
                                </div>
                                <div class="service-icon">
                                    <img src="<?php the_field('icon-service'); ?>">
                                </div>
                                <div class="content">
                                    <h3 class="title"><?php the_title(); ?></h3>
                                     <p><?php the_field("excerpt"); ?></p>
                                </div>
                            <!--</a>-->
                            <div class="readmore">
                                <a href="<?php the_permalink(); ?>">Read More</a>
                            </div>
                        </div>
                        
                        
                   
                <?php endwhile; ?>
 
            <?php endif; ?>
         
    </div>
    </div>
 
 
<?php
    wp_reset_postdata();
    return '' . ob_get_clean();
}
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter