How to add AJAX in WordPress | WordPress | Beginners Tutorial

I’ve made a video for this tutorial. Because that’s the easiest way to show how WordPress AJAX works. And this is for the beginners. So please watch the video carefully and I am sure you will definitely clear about WordPress AJAX.

And if you like the video then subscribe my channel and share this with others who wants to learn WordPress.

How To Create Custom Post Type In WordPress | Tutorial for Beginners

To create your custom post type, please follow these two steps.

Step – 1 ( Open custom plugin’s any php file )

Open your plugin’s any php file which is related to your setting up data for the custom plugin.

Step – 2 ( Add code )

Add below code to that file.

<?php
/**
* Register a custom post type called "book".
*
* @see get_post_type_labels() for label keys.
*/
function wpdocs_codex_book_init() {
$labels = array(
'name' => _x( 'Books', 'Post type general name', 'textdomain' ),
'singular_name' => _x( 'Book', 'Post type singular name', 'textdomain' ),
'menu_name' => _x( 'Books', 'Admin Menu text', 'textdomain' ),
'name_admin_bar' => _x( 'Book', 'Add New on Toolbar', 'textdomain' ),
'add_new' => __( 'Add New', 'textdomain' ),
'add_new_item' => __( 'Add New Book', 'textdomain' ),
'new_item' => __( 'New Book', 'textdomain' ),
'edit_item' => __( 'Edit Book', 'textdomain' ),
'view_item' => __( 'View Book', 'textdomain' ),
'all_items' => __( 'All Books', 'textdomain' ),
'search_items' => __( 'Search Books', 'textdomain' ),
'parent_item_colon' => __( 'Parent Books:', 'textdomain' ),
'not_found' => __( 'No books found.', 'textdomain' ),
'not_found_in_trash' => __( 'No books found in Trash.', 'textdomain' ),
'featured_image' => _x( 'Book Cover Image', 'Overrides the ā€œFeatured Imageā€ phrase for this post type. Added in 4.3', 'textdomain' ),
'set_featured_image' => _x( 'Set cover image', 'Overrides the ā€œSet featured imageā€ phrase for this post type. Added in 4.3', 'textdomain' ),
'remove_featured_image' => _x( 'Remove cover image', 'Overrides the ā€œRemove featured imageā€ phrase for this post type. Added in 4.3', 'textdomain' ),
'use_featured_image' => _x( 'Use as cover image', 'Overrides the ā€œUse as featured imageā€ phrase for this post type. Added in 4.3', 'textdomain' ),
'archives' => _x( 'Book archives', 'The post type archive label used in nav menus. Default ā€œPost Archivesā€. Added in 4.4', 'textdomain' ),
'insert_into_item' => _x( 'Insert into book', 'Overrides the ā€œInsert into postā€/ā€Insert into pageā€ phrase (used when inserting media into a post). Added in 4.4', 'textdomain' ),
'uploaded_to_this_item' => _x( 'Uploaded to this book', 'Overrides the ā€œUploaded to this postā€/ā€Uploaded to this pageā€ phrase (used when viewing media attached to a post). Added in 4.4', 'textdomain' ),
'filter_items_list' => _x( 'Filter books list', 'Screen reader text for the filter links heading on the post type listing screen. Default ā€œFilter posts listā€/ā€Filter pages listā€. Added in 4.4', 'textdomain' ),
'items_list_navigation' => _x( 'Books list navigation', 'Screen reader text for the pagination heading on the post type listing screen. Default ā€œPosts list navigationā€/ā€Pages list navigationā€. Added in 4.4', 'textdomain' ),
'items_list' => _x( 'Books list', 'Screen reader text for the items list heading on the post type listing screen. Default ā€œPosts listā€/ā€Pages listā€. Added in 4.4', 'textdomain' ),
);
$args = array(
'labels' => $labels,
'public' => false,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'book' ),
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => null,
'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' ),
);
register_post_type( 'book', $args );
}
add_action( 'init', 'wpdocs_codex_book_init' );

view raw
custom_post_type.php
hosted with ❤ by GitHub

 

Video Explanation

How To Create Custom Widgets Area In WordPress | Tutorial for Beginners

To create your custom widget area, please follow these two steps.

Step – 1 ( Create a widget area in Backend )

Add below code to your theme’s functions.php or any other PHP file where you want to add code for your all custom widget area.

/**
* Create custom sidebars.
* Add this into your theme's php file where you want put all the custom 
* widget area code.
*/
function my_register_sidebars() {

    /* Register the 'primary' sidebar. */
    register_sidebar(
        array(
            'id' => 'after-page-content',
            'name' => __( 'After Single Page Content' ),
            'description' => __( 'This will shows widget after single page content.' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget' => '</div>',
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>',
        )
    );
}
add_action( 'widgets_init', 'my_register_sidebars' );

 

Step – 2 ( Display widgets from custom widget area on frontend )

 

Add below code to your template file where you want to display the widgets from new custom widget area.

/**
* Add this where you want to display your widget area on frontend.
*/
if ( is_active_sidebar( 'after-page-content' ) ) {
    dynamic_sidebar( 'after-page-content' );
}

 

Sample code:

<?php
/**
* Create custom sidebars.
* Add this into your theme's php file where you want put all the custom
* widget area code.
*/
function my_register_sidebars() {
/* Register the 'primary' sidebar. */
register_sidebar(
array(
'id' => 'after-page-content',
'name' => __( 'After Single Page Content' ),
'description' => __( 'This will shows widget after single page content.' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
)
);
/* Repeat register_sidebar() code for additional sidebars. */
}
add_action( 'widgets_init', 'my_register_sidebars' );
/************************** Display on frontend ********************************/
/**
* Add this where you want to display your widget area on frontend.
*/
if ( is_active_sidebar( 'after-page-content' ) ) {
dynamic_sidebar( 'after-page-content' );
}

view raw
sidebars.php
hosted with ❤ by GitHub

 

Video Explanation