Hi, in the previous article we had seen slider section and blog post dynamic. Now in this article we will learn single post dynamic and many more..
So lets Start
Open single.php
We call header and footer section using below code
single.php
<?php get_header() ?>
<?php get_footer() ?>For header use <?php get_header() ?>
For Footer use <?php get_footer() ?>
single.php
<?php get_header() ?>
<section class="section">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-8">
<div clas="post-img">
<?php the_post_thumbnail('single-img') ?>
</div><!-- post image -->
<!-- post meta -->
<div class="post-meta">
<ul class="list-inline">
<li> <a href="#"><i class="fa fa-calender"></i><?php the_date()?></a></li>
<li> <a href="#"><i class="fa fa-user"></i>By Admin</a></li>
<li> <a href="#"><i class="fa fa-calender"></i><?php echo get_comments_number()?></a></li>
</ul>
</div><!-- post meta end -->
<div class="post-description">
<h3><?php the_title() ?></h3>
<p><?php the_content() ?></p>
<blockquote><?php the_content() ?></blockquote>
</div>
</div>
</div>
</div>
</section>
<?php get_footer() ?><?php the_post_thumbnail(‘single-img’) ?> single-img already define in functions.php file
If you notice in home page we use <?php the_excerpt() ?> function for getting the blog content but in single blog we have to use <?php the_content() ?> function
Full Code single.php
single.php
<?php get_header() ?>
<section class="section">
<div class="container">
<?php
if(have_posts()){
while(have_posts()){
the_post();?>
<div class="row">
<div class="col-md-8 col-sm-8">
<div clas="post-img">
<?php the_post_thumbnail('single-img'); ?>
</div><!-- post image -->
<!-- post meta -->
<div class="post-meta">
<ul class="list-inline">
<li> <a href="#"><i class="fa fa-calender"></i><?php the_date()?></a></li>
<li> <a href="#"><i class="fa fa-user"></i>By Admin</a></li>
<li> <a href="#"><i class="fa fa-calender"></i><?php echo get_comments_number()?></a></li>
</ul>
</div><!-- post meta end -->
<div class="post-description">
<h3><?php the_title() ?></h3>
<p><?php the_content() ?></p>
<blockquote><?php the_content() ?></blockquote>
</div>
</div>
</div>
<?php }} ?>
</div>
</section>
<?php get_footer() ?>Now we will work on Sidebar
Open sidebar.php file
<div class="col-md-4 col-sm-4 widget-main post-categories">
<?php dynamic_sidebar('sidebar-2') ?>
</div>For Dynamic sidebar we have to use WordPress default function <?php dynamic_sidebar(‘sidebar-2’) ?> and sidebar-2 is our widget id
Now go to your Dashboard and drag and drop search field into the widget like below
Now go to your single.php file and paste the below code
<?php get_sidebar() ?> because if we didn't call from single.php file sidebar can't understand which file required sidebarOur Single Page Working successfully.
Now we will learn how to create custom post, there have two method one is using php code another is using wp-hasty.com.
In this article we will use wp-hast.com site for custom post
Lets Start go to the mentioned site
Now create a folder named inc under the theme folder in my case my theme folder name is bornfeel . Once create a folder inc create a file named protfolio.php and paste the below code
protfolio.php
// Register Custom Post Type protfolio
function create_protfolio_cpt() {
$labels = array(
'name' => _x( 'profolios', 'Post Type General Name', 'bornfeel' ),
'singular_name' => _x( 'protfolio', 'Post Type Singular Name', 'bornfeel' ),
'menu_name' => _x( 'profolios', 'Admin Menu text', 'bornfeel' ),
'name_admin_bar' => _x( 'protfolio', 'Add New on Toolbar', 'bornfeel' ),
'archives' => __( 'protfolio Archives', 'bornfeel' ),
'attributes' => __( 'protfolio Attributes', 'bornfeel' ),
'parent_item_colon' => __( 'Parent protfolio:', 'bornfeel' ),
'all_items' => __( 'All profolios', 'bornfeel' ),
'add_new_item' => __( 'Add New protfolio', 'bornfeel' ),
'add_new' => __( 'Add New', 'bornfeel' ),
'new_item' => __( 'New protfolio', 'bornfeel' ),
'edit_item' => __( 'Edit protfolio', 'bornfeel' ),
'update_item' => __( 'Update protfolio', 'bornfeel' ),
'view_item' => __( 'View protfolio', 'bornfeel' ),
'view_items' => __( 'View profolios', 'bornfeel' ),
'search_items' => __( 'Search protfolio', 'bornfeel' ),
'not_found' => __( 'Not found', 'bornfeel' ),
'not_found_in_trash' => __( 'Not found in Trash', 'bornfeel' ),
'featured_image' => __( 'Featured Image', 'bornfeel' ),
'set_featured_image' => __( 'Set featured image', 'bornfeel' ),
'remove_featured_image' => __( 'Remove featured image', 'bornfeel' ),
'use_featured_image' => __( 'Use as featured image', 'bornfeel' ),
'insert_into_item' => __( 'Insert into protfolio', 'bornfeel' ),
'uploaded_to_this_item' => __( 'Uploaded to this protfolio', 'bornfeel' ),
'items_list' => __( 'profolios list', 'bornfeel' ),
'items_list_navigation' => __( 'profolios list navigation', 'bornfeel' ),
'filter_items_list' => __( 'Filter profolios list', 'bornfeel' ),
);
$args = array(
'label' => __( 'protfolio', 'bornfeel' ),
'description' => __( '', 'bornfeel' ),
'labels' => $labels,
'menu_icon' => '',
'supports' => array('title', 'editor', 'excerpt', 'thumbnail', 'custom-fields'),
'taxonomies' => array(),
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'menu_position' => 5,
'show_in_admin_bar' => true,
'show_in_nav_menus' => true,
'can_export' => true,
'has_archive' => true,
'hierarchical' => false,
'exclude_from_search' => false,
'show_in_rest' => true,
'publicly_queryable' => true,
'capability_type' => 'post',
);
register_post_type( 'protfolio', $args );
}
add_action( 'init', 'create_protfolio_cpt', 0 );Now we have to include the template file, So go to the functions.php file and paste the below code
require get_tempplate_directory() .'/inc/protfolio.php';
Now Create a sample post and we will fetch custom protfolio data on frontend
Paste the below code where you want to show
<?php
$query= new WP_Query(array(
'post_type'=> 'protfolio',
'posts_per_page'=> 1
));
query_posts($query);
while($query->have_posts()) : $query-> the_post();
endwhile;
?>
<div class="s-12 m-12 l-6">
<div class="image-border-radius margin-m-bottom">
<div class="margin">
<div class="s-12 m-12 l-4 margin-m-bottom">
<a class="image-hover-zoom" href="<?php the_permalink() ?>"><img src="<?php the_post_thumbnail()?></a>
</div>
<div class='s-12 m-12 l-8 margin-m-bottom'>
<h3><a class='text-dark text-primary-hover' href='<?php the_permalink() ?>'><?php the_title() ?></a></h3>
<p><?php the_excerpt() ?></p>
<a class='text-more-info text-primary-hover' href='<?php the_permalink() ?>'>Read more</a>
</div>
</div>
</div>
</div>
<?php wp_reset_query()?><?php wp_reset_query()?> this code is required for avoiding conflict the post because we will fetch post and protfolio data on the same home page. if you know when we use flot in css we need to clear div same as here.
Congratulations our custom protfolio data is showing on home page.
Thanks for reading…. Next part will be published as soon as possible.
