Display custom post type with shortcode on Page or Other

Published November 30, 2016 by Anil Kumar Vishwakarma

In my example code I create a shortcode, which shows the title, excerpt, thumbnail and custom meta key value of the Random published posts of the type ‘restaurant’:

Click here for seeing code in large


Display Custom Post Type on Page Using Shortcode By their Title, Content, Featured image etc

Published November 7, 2016 by Anil Kumar Vishwakarma

Display Custom Post Type on Page Using Shortcode

for this First install this plugin https://wordpress.org/plugins/display-posts-shortcode/ After this add function as mention below code:

add_shortcode('query', 'shortcode_query');

function shortcode_query($atts, $content){
extract(shortcode_atts(array( // a few default values
‘posts_per_page’ => ’10’,
‘caller_get_posts’ => 1,
‘post__not_in’ => get_option(‘sticky_posts’),
), $atts));

global $post;

$posts = new WP_Query($atts);
$output = ”;
if ($posts->have_posts())
while ($posts->have_posts()):

// these arguments will be available from inside $content
$parameters = array(
‘PERMALINK’ => get_permalink(),
‘TITLE’ => get_the_title(),
‘CONTENT’ => get_the_content(),
‘EXCERPT’ => get_the_excerpt(),
‘COMMENT_COUNT’ => $post->comment_count,
‘CATEGORIES’ => get_the_category_list(‘, ‘),
// add here more…

$finds = $replaces = array();
foreach($parameters as $find => $replace):
$finds[] = ‘{‘.$find.’}’;
$replaces[] = $replace;
$output .= str_replace($finds, $replaces, $content);

return; // no posts found

return html_entity_decode($output);

After adding above Code in functions.php add new attribute into the shortcode : post_type
Shortcode Example is : [query post_type=job posts_per_page=-1]

How to add a Menu to your WordPress Theme footer.php

Published August 27, 2016 by Anil Kumar Vishwakarma

Adding a Menu to the Footer

When I create a custom WordPress theme for my clients I like to create a footer menu as well. This is useful for adding links to contact, sitemap and back to top. Here are the steps to edit your own theme.

In this tutorial you are going to edit the functions.php, footer.php, and style.css files. If you modify theme files directly your customization will disappear when the theme updates. So create a child theme first.

Create a secondary menu area

Add the following code to the functions.php file for your twenty ten child theme

// This theme uses wp_nav_menu() in two locations.  
register_nav_menus( array(  
  'primary' => __( 'Primary Navigation', 'twentyten' ),  
  'secondary' => __('Secondary Navigation', 'twentyten')  
) );

Tell WordPress where the secondary menu should be used

Open your footer.php file and add the following code wherever you want the secondary menu to appear.

capture image

Style the menu

Open your css file and create a class bottomMenu and add your own styling. Here is an example.

.bottomMenu { display: block; width:960px;}
.bottomMenu ul { display:inline; float:right;}
.bottomMenu li { list-style-type: none; display: inline; font-size: 12px; }
.bottomMenu li a {
	border-right: thin solid #000;
	padding: 0 7px 0 3px;
.bottomMenu li a:hover { color:#ccc; text-decoration:underline;}
.bottomMenu li:last-child > a {border-right: none;} /* remove pipe from last item */

Create the Menu

  • Go to Appearance -> Menus and click the + to create a new menu
  • Name the menu e.g. “footer”
  • Add published pages such as contact, sitemap, privacy policy to the menu
  • Drag and drop menu items to order them
  • Save the menu
  • Set the Secondary Menu (you created this with the edit to the functions.php file) on the left side to use this newly created menu

Mobile Device Trick

Published August 4, 2016 by Anil Kumar Vishwakarma

Use media queries to hide content on screens with smaller resolutions, or show content on screens with a higher resolution. Easy way to hide pictures or unnecessary blocks of content for mobile devices. Good addition to put in your media queries to lay content out differently.

@media screen and (max-width: 480px){ }

@media screen and (max-width: 568px){ }

@media screen and (max-width: 667px){ }

@media screen and (max-width: 736px){ }

@media screen and (max-width: 600px){ }

@media screen and (max-width: 768px){ }


Note : You can test your website friendly on all devices from here : www.responsinator.com

Custom Post Type

Published May 3, 2016 by Anil Kumar Vishwakarma

Custom Post type creation by using existing theme Functions.php file

add_action( 'init', 'rv_invoice_cpt' );
function rv_invoice_cpt() {
 $labels = array(
 'name' => _x( 'Invoice', 'post type general name', 'engwp' ),
 'singular_name' => _x( 'Invoice', 'post type singular name', 'engwp' ),
 'menu_name' => _x( 'Invoices', 'admin menu', 'engwp' ),
 'name_admin_bar' => _x( 'Invoice', 'add new on admin bar', 'engwp' ),
 'add_new' => _x( 'Add New', 'Invoice', 'engwp' ),
 'add_new_item' => __( 'Add New Invoice', 'engwp' ),
 'new_item' => __( 'New Invoice', 'engwp' ),
 'edit_item' => __( 'Edit Invoice', 'engwp' ),
 'view_item' => __( 'View Invoice', 'engwp' ),
 'all_items' => __( 'All Invoices', 'engwp' ),
 'search_items' => __( 'Search Invoices', 'engwp' ),
 'parent_item_colon' => __( 'Parent Invoice:', 'engwp' ),
 'not_found' => __( 'No Invoices found.', 'engwp' ),
 'not_found_in_trash' => __( 'No Invoices found in Trash.', 'engwp' )
 $args = array(
 'description' => __( 'Invoice', 'engwp' ),
 'labels' => $labels,
 'supports' => array( 'title' ),
 'hierarchical' => false,
 'public' => true,
 'publicly_queryable' => true,
 'query_var' => true,
 'rewrite' => array( 'slug' => 'invoice' ),
 'show_ui' => true,
 'menu_icon' => 'dashicons-media-spreadsheet',
 'show_in_menu' => true,
 'show_in_nav_menus' => false,
 'show_in_admin_bar' => true,
 // 'menu_position' => 5,
 'can_export' => true,
 'has_archive' => false,
 'exclude_from_search' => true,
 'capability_type' => 'post',
 register_post_type( 'invoice', $args );