Theme Development

WordPress Widgets Tutorial

Video Tuts by LearnWebCode - Oct 2, 2014

Basic Concept+

class My_Widget extends WP_Widget {
 
    public function __construct() {
        // actual widget processes
    }
 
    public function widget( $args, $instance ) {
        // outputs the content of the widget
    }
 
    public function form( $instance ) {
        // outputs the options form in the admin
    }
 
    public function update( $new_instance, $old_instance ) {
        // processes widget options to be saved
    }
 
}

add_action( 'widgets_init', function() { register_widget( 'My_Widget' ); } );

add_action( 'widgets_init', 'My_New_widgets' );
 
/**
 * Register the new widget.
 *
 * @see 'widgets_init'
 */
function My_New_widgets() {
    register_widget( 'My_Widget' );
}

// Register and load the widget
function kv_load_widget() {
    register_widget( 'kv_widget' );
}
add_action( 'widgets_init', 'kv_load_widget' );
 
// Creating the widget 
class kv_widget extends WP_Widget {
 
function __construct() {
	parent::__construct(

	// Base ID of your widget
	'wpb_widget', 

	// Widget name will appear in UI
	__('KV Custom Widget', 'kv_widget_domain'), 

	// Widget description
	array( 'description' => __( 'Sample widget for learning', 'kv_widget_domain' ), ) 
	);
}
 
// Creating widget front-end
 
public function widget( $args, $instance ) {
	$title = apply_filters( 'widget_title', $instance['title'] );

	// before and after widget arguments are defined by themes
	echo $args['before_widget'];
	if ( ! empty( $title ) )
	echo $args['before_title'] . $title . $args['after_title'];

	// This is where you run the code and display the output
	echo __( 'Hello, World!', 'wpb_widget_domain' );
	echo $args['after_widget'];
}
         
// Widget Backend 
public function form( $instance ) {
	if ( isset( $instance[ 'title' ] ) ) {
		$title = $instance[ 'title' ];
	}
	else {
		$title = __( 'New title', 'kv_widget_domain' );
	}
	// Widget admin form
	?>
	<p>
	<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
	<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" 
	name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
	</p>
	<?php 
}
     
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
	$instance = array();
	$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
	return $instance;
}
} // Class wpb_widget ends here

Advance Concept+

<div id="text-7" class="widget widget_text"> 
    <div class="widget-wrap">
        <h4 class="widgettitle">This is a text widget</h4> 
        <div class="textwidget"> 
                   I can put HTML in here.
           <a href="http://google.com">Search me!</a>
        </div>
    </div>
</div>

class My_Widget extends WP_Widget {
 
    function __construct() {
 
        parent::__construct(
            'my-text',  // Base ID
            'My Text'   // Name
        );
 
        add_action( 'widgets_init', function() {
            register_widget( 'My_Widget' );
        });
 
    }
 
    public $args = array(
        'before_title'  => '<h4 class="widgettitle">',
        'after_title'   => '</h4>',
        'before_widget' => '<div class="widget-wrap">',
        'after_widget'  => '</div></div>'
    );
 
    public function widget( $args, $instance ) {
 
        echo $args['before_widget'];
 
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
        }
 
        echo '<div class="textwidget">';
 
        echo esc_html__( $instance['text'], 'text_domain' );
 
        echo '</div>';
 
        echo $args['after_widget'];
 
    }
 
    public function form( $instance ) {
 
        $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( '', 'text_domain' );
        $text = ! empty( $instance['text'] ) ? $instance['text'] : esc_html__( '', 'text_domain' );
        ?>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_attr_e( 'Title:', 'text_domain' ); ?></label>
            <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
        <p>
            <textarea class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'text' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'text' ) ); ?>" type="text" cols="30" rows="10"><?php echo esc_attr( $text ); ?></textarea>
        </p>
        <?php
 
    }
 
    public function update( $new_instance, $old_instance ) {
 
        $instance = array();
 
        $instance['title'] = ( !empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
        $instance['text'] = ( !empty( $new_instance['text'] ) ) ? $new_instance['text'] : '';
 
        return $instance;
    }
 
}
$my_widget = new My_Widget();

/**
 * Adds Foo_Widget widget.
 */
class Foo_Widget extends WP_Widget {
 
    /**
     * Register widget with WordPress.
     */
    public function __construct() {
        parent::__construct(
            'foo_widget', // Base ID
            'Foo_Widget', // Name
            array( 'description' => __( 'A Foo Widget', 'text_domain' ), ) // Args
        );
    }
 
    /**
     * Front-end display of widget.
     *
     * @see WP_Widget::widget()
     *
     * @param array $args     Widget arguments.
     * @param array $instance Saved values from database.
     */
    public function widget( $args, $instance ) {
        extract( $args );
        $title = apply_filters( 'widget_title', $instance['title'] );
 
        echo $before_widget;
        if ( ! empty( $title ) ) {
            echo $before_title . $title . $after_title;
        }
        echo __( 'Hello, World!', 'text_domain' );
        echo $after_widget;
    }
 
    /**
     * Back-end widget form.
     *
     * @see WP_Widget::form()
     *
     * @param array $instance Previously saved values from database.
     */
    public function form( $instance ) {
        if ( isset( $instance[ 'title' ] ) ) {
            $title = $instance[ 'title' ];
        }
        else {
            $title = __( 'New title', 'text_domain' );
        }
        ?>
        <p>
        <label for="<?php echo $this->get_field_name( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
        </p>
        <?php
    }
 
    /**
     * Sanitize widget form values as they are saved.
     *
     * @see WP_Widget::update()
     *
     * @param array $new_instance Values just sent to be saved.
     * @param array $old_instance Previously saved values from database.
     *
     * @return array Updated safe values to be saved.
     */
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( !empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
 
        return $instance;
    }
 
} // class Foo_Widget

// Register Foo_Widget widget
add_action( 'widgets_init', function() { register_widget( 'Foo_Widget' ); } );

namespace a\b\c;
 
class My_Widget_Class extends \WP_Widget {
    function __construct() {
            parent::__construct( 'baseID', 'name' );
        }
        // ... rest of the functions
}

add_action( 'widgets_init', function() { register_widget( 'a\b\c\My_Widget_Class' ); } );

<h1><?php the_title(); ?></h1>
 
<div class="content">
    <?php the_content(); ?>
</div>
 
<div class="widget-section">
    <?php the_widget( 'My_Widget_Class' ); ?>
</div>

< aside id="%1$s" class="widget %2$s"> - Explained+

$num = 5;
$location = 'tree';

$format = 'There are %d monkeys in the %s';
echo sprintf($format, $num, $location);

There are 5 monkeys in the tree

$format = 'The %s contains %d monkeys';
echo sprintf($format, $num, $location);

$format = 'The %2$s contains %1$d monkeys';
echo sprintf($format, $num, $location);

$format = 'The %2$s contains %1$d monkeys.
           That\'s a nice %2$s full of %1$d monkeys.';
echo sprintf($format, $num, $location);

Dashboard Widgets API - Codex

The most common use for pagination in WordPress sites is to break up long lists of posts into separate pages. Whether you’re viewing a category, archive, or default index page for a blog or site, WordPress only shows 10 posts per page by default. Users can change the number of posts that appear on each page on the Reading screen: Admin > Settings > Reading.

Loop with Pagination

This simplified example shows where you can add pagination functions for the main loop. Add the functions just before or after the loop.

<?php if ( have_posts() ) : ?>
    <!-- Add the pagination functions here. -->
    <!-- Start of the main loop. -->
    <?php while ( have_posts() ) : the_post(); ?>
    <!-- the rest of your theme's main loop -->
    <?php endwhile; ?>
    <!-- End of the main loop -->
    <!-- Add the pagination functions here. -->
<div class="nav-previous alignleft"><?php next_posts_link( 'Older posts' ); ?></div>
<div class="nav-next alignright"><?php previous_posts_link( 'Newer posts' ); ?></div>
<?php else : ?>
<?php _e('Sorry, no posts matched your criteria.'); ?>
<?php endif; ?>

function your_themes_pagination(){
    global $wp_query; 
    echo paginate_links();
}

WordPress has numerous functions for displaying links to other pages in your loop. Some of these functions are only used in very specific contexts. You would use a different function on a single post page then you would on a archive page. The following section covers archive template pagination functions. The section after that cover single post pagination.

Simple Pagination

posts_nav_link();

One of the simplest methods is posts_nav_link(). Simply place the function in your template after your loop. This generates both links to the next page of posts and previous page of posts where applicable. This function is ideal for themes that have simple pagination requirements.

next_posts_link(); 
previous_posts_link();

When building a theme, use next_posts_link() and prev_posts_link(). to have control over where the previous and next posts page link appears.

If you need to pass the pagination links to a PHP variable, you can use get_next_posts_link() and get_previous_posts_link().

$next_posts = get_next_posts_link(); 
$prev_posts = get_previous_posts_link();

Numerical Pagination

When you have many pages of content it is a better experience to display a list of page numbers so the user can click on any one of the page links rather then having to repeatedly click next or previous posts. WordPress provides several functions for automatically displaying a numerical pagination list.

For WordPress 4.1+

If you want more robust pagination options, you can use the_posts_pagination() for WordPress 4.1 and higher. This will output a set of page numbers with links to previous and next pages of posts.

the_posts_pagination();

If you want your pagination to support older versions of WordPress, you must use paginate_links().

Pagination Between Single Posts

All of the previous functions should be used on index and archive pages. When you are viewing a single blog post, you must use prev_post_link and next_post_link. Place the following functions below the loop on your single.php.

previous_post_link();
next_post_link(); 

Pagination within a post

WordPress gives you a tag that can be placed in post content to enable pagination for that post.

<!--nextpage-->

If you use that tag in the content, you need to ensure that the wp_link_pages function is placed in your single.php template within the loop.

<?php if ( have_posts() ) : ?>
   
    <!-- Start of the main loop. -->
    <?php while ( have_posts() ) : the_post(); ?>
      
        <?php the_content(); ?>
          
        <?php wp_link_pages(); ?> 
       
    <?php endwhile; ?>
  
<?php endif; ?>

Definitive Guide to WordPress Post/Page Navigation

Posted by Jeff Starr • Updated on February 10th, 2017

In WordPress you can upload, store, and display a variety of media such as image, video and audio files. Media can be uploaded via the Media > Add New in the Administration Screen, or Add Media button on the Post/Page Editor.

If a media file is uploaded within the edit screen, it will be automatically attached to the current post being created or edited. If it is uploaded via the Media’s Add New Screen or the Media Library Screen, it will be unattached, but may become attached to a post when it is inserted into a post later on.

Retrieving attachment ID or image ID

To retrieve the attachment ID, use get_posts() or get_children() function. This example retrieves the all attachments of the current post and getting all metadata of attachment(wp_get_attachment_metadata()) by specifying the ID.

// Insert into the Loop
$args = array(
    'post_parent'    => get_the_ID(),
    'post_type'      => 'attachment', 
);
$attachments = get_posts( $args );


if ( $attachments ) {
    foreach ( $attachments as $attachment ) {
        $meta_data = wp_get_attachment_metadata( $attachment->ID, false );
    }
}

If you want to retrieve images from the post ID only, specify post_mime_type as image.

$args = array(
    'post_parent'    => get_the_ID(),
    'post_type'      => 'attachment', 
    'post_mime_type' => 'image',
);

When you cannot get your attached media by get_posts() or get_children()function, confirm your media is really attached to the post.
From the Administration Screen, Click Media > Library to open the Media Library and confirm the value in “Uploaded to” column of the media.

Audio

You can directly embed audio files and play them back using a simple shortcode [audio]. Supported file types are mp3, ogg, wma, m4a and wav.

Following shortcode displays audio player that loads music.mp3 file:

[audio src="music.mp3"]

To use the shortcode from template file, use do_shortcode function. When music.mp3 file was stored in (theme_directory)/sounds directory, insert following code into your template file:

$music_file = get_template_directory_uri() . "/sounds/music.mp3"; 
echo do_shortcode('[audio mp3=' . $music_file . ']');

The shortcode creates the audio player as shown in the screenshot below.

Loop

• “off” – Do not loop the media. Default.
• “on” – Media will loop to beginning when finished and automatically continue playing.

autoplay

• 0 – Do not automatically play the media. Default.
• 1 – Media will play as soon as it is ready.

The following example starts playing music immediately after the page load and loops.

echo do_shortcode('[audio mp3=' . $music_file . ' loop = "on" autoplay = 1]');

Styling

If you want to change the look & feel of audio player, you can do so by targeting the default class name of “wp-audio-shortcode”. If you insert following code into your style.css, half width of audio player will be displayed.

.wp-audio-shortcode {
  width: 50%;
}

Supported Audio Format - mp3, ogg, wma, m4a, wav

For more technical details such as the internal library that enables this function, refer to

• https://make.wordpress.org/core/2013/04/08/audio-video-support-in-core/.
• Audio Shortcode
• Function do_shortcode()

Images

This section describes the handling of images in the Media Library. If you want to display the image file located within your theme directory, just specify the location with the img tag, and style it with CSS.

<img src="<?php echo get_template_directory_uri() . '/images/logo.png'; ?>" />

To display the image in the Media Library, use  wp_get_attachment_image() function.

echo wp_get_attachment_image( $attachment->ID, 'thumbnail' );

You will get the following HTML output with the selected thumbnail size

<img width="150" height="150" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample-150x150.jpg" class="attachment-thumbnail size-thumbnail" ... />

You can specify other size such as ‘full’ for original image or ‘medium’ and ‘large’ for the sizes set at Settings > Media in the Administration Screen, or any pair of width and height as array. You’re also free to set custom size strings with add_image_size();

echo wp_get_attachment_image( $attachment->ID, Array(640, 480) );

Getting URL of image

If you want to get the URL of the image, use  wp_get_attachment_image_src(). It returns an array (URL, width, height, is_intermediate), or false, if no image is available.

$image_attributes = wp_get_attachment_image_src( $attachment->ID );
if ( $image_attributes ) : ?>
    <img src="<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>" />
<?php endif; ?>

Alignments

When adding the image in your site, you can specify the image alignment as right, left, center or none. WordPress core automatically adds CSS classes to align the image: alignright, alignleft, aligncenter, alignnone

<img class="aligncenter size-full wp-image-131" src= ... />

Caption

If a Caption was specified to image in the Media Library, HTML img element was enclosed by the shortcode [caption] and [/caption].

<div class="mceTemp">
<dl id="attachment_133" class="wp-caption aligncenter" style="width: 1210px">
	<dt class="wp-caption-dt">
		<img class="size-full wp-image-133" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample.jpg" alt="sun set" width="1200" height="400" />
	</dt>
		<dd class="wp-caption-dd">Sun set over the sea</dd>
</dl></div>

And, it will be rendered as in HTML as the figure tag:

<figure id="attachment_133" style="width: 1200px" class="wp-caption aligncenter">
    <img class="size-full wp-image-133" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample.jpg" alt="sun set" width="1200" height="400" srcset= ... />
     
<figcaption class="wp-caption-text">Sun set over the sea</figcaption>
 
</figure>

Similar to alignments, your theme must include following styles: wp-caption and wp-caption-text

References

• wp_get_attachment_image()
• wp_get_attachment_image_src()
• Styling Images in Posts and Pages
• CSS (Codex)

Galleries

Image galleries are the best way to showcase your pictures on your WordPress sites. WordPress bundles the Create Gallery feature by default in the media uploader which allows you to create a simple gallery.

Before adding a gallery, you must have images in your media library. Otherwise, you need to upload the images into the library and can proceed on gallery creation.

The Gallery feature allows you to add one or more image galleries to your posts and pages using a simple Shortcode.

The basic form of gallery shortcode is:

[gallery]

If you need to add multiple images with ID’s, use the following sample shortcode

[gallery ids="10, 205, 552, 607"]
//Note: 10, 205, 552 and 607 are the IDs of respected image. 

NOTE: find the proper IDs of the images for the gallery. Go to Media library and click on the respected image and ID will appear on the URL.

To use the shortcode from the template file, use the do_shortcode() function. Insert the following code into your template file:

echo do_shortcode( [gallery] );

If you need to use the shortcode with IDs, insert the following code in your template file:

echo do_shortcode( [gallery ids="10, 205, 552, 607"] );

Usage

There are may options that may be specified using the below syntax:

[gallery option1="value1" option2="value2"]

If you want to print the gallery directly on the template file, use ` do_shortcode()` function like below:

<?php echo do_shortcode('[gallery option1="value1"]'); ?>

If you need to filter the shortcodes, the following example gives you some tips

// Note: 'the_content' filter is used to filter the content of the post after it is retrieved from the database and before it is printed to the screen
 <?php $gallery_shortcode = '[gallery id="' . intval( $post->post_parent ) . '"]';
    print apply_filters( 'the_content', $gallery_shortcode );
 ?>

Shortcode Options

Gallery Shortcodes supports the basic options which are listed below:

’orderby’ specifies the order the thumbnails show up. The default order is ‘menu_order’.

• menu_order: You can reorder the images in the Gallery tab of the Add Media popup
• title: Order by the title of the image in the Media Library
• post_date: Sort by date/time
• rand: Order randomly
• ID: Specify the post ID

order specify the sort order used to display thumbnail; ASC or DESC. For Example, to sort by ID and DESC:

[gallery order="DESC" orderby="ID"]

If you need to print it on template file, use the do_shortcode() function;

<?php echo do_shortcode(' [gallery order="DESC" orderby="ID"]'); ?>

The Columns options specify the number of columns in the gallery. The default value is 3.

[gallery columns="4"]

If you need to print it on your template file, use the do_shortcode() function;

<?php echo do_shortcode(' [gallery columns="4"] '); ?>

The IDs option on the gallery shortcode loads images with specific post IDs.

If you want to display the attached image with the specific post ID, follow the following code example.

// Note: remove each space between brackets and 'gallery' and brackets and `123"`.
//Here "123" stands for the post IDs. If you want to display more than one IDs, separate the IDs by `comma(,)`.
[ gallery id="123" ]

Use ‘do_shortcode’ function to print the gallery with IDs on template files like below:

// Note: remove each space between brackets and 'gallery' and brackets and `123"`.
<?php echo do_shortcode(' [ gallery id="123" ] '); ?>

Size determines the image size to use for the thumbnail display. Valid values include “thumbnail”, “medium”, “large”, “full” and any other additional image size that was registered with add_image_size(). The default value is “thumbnail”. The size of the images for “thumbnail”, “medium” and “large” can be configured in WordPress admin panel under Settings > Media.

[gallery size="medium"]

Some advanced options are also available on Gallery shortcodes.

• itemtag - The name of the HTML tag used to enclose each item in the gallery. The default is “dl” .
• icontag - The name of the HTMLtag used to enclose each thumbnail icon in the gallery. The default is “dt” .
• captiontag - The name of the HTML tag used to enclose each caption. The default is “dd” .

You are allowed to change the defaults.

[gallery itemtag="div" icontag="span" captiontag="p"]

Link: Specify where you want the image to link. The default value links to the attachment’s permalink. Options:

• file – Link directly to image file
• none – No link

[gallery link="file"] 

Include: Include allows you to insert an “array” of comma separated attachment IDs to show only the images from these attachments.

[gallery include="23,39,45"] 

Exclude: Exclude callows you to insert an “array” of comma separated attachment IDs to not show the images from these attachments.

[gallery exclude="21,32,43"] 

Please note that include and exclude cannot be used together.

References

• Gallery Shortcode
• Function do_shortcode()

Video

The WordPress video feature allows you to embed video files and play them back using a simple shortcode [video]. Supported file types are mp4, m4v, webm, ogv, wmv and flv.

[video src="pepper.mp4"]

To use the shortcode in the template file, use the do_shortcode() function. If the video file is stored in in your theme directory, get the file url directly using get_template_directory_uri() or get_stylesheet_uri()

$video_file = get_template_directory_uri() . "/videos/pepper.mp4";
echo do_shortcode('[video mp4=' . $video_file . ']');

The following video player will be loaded.

Loop and Autoplay

The following example starts playing the video immediately after the page load and loops.

echo do_shortcode('[video mp4=' . $video_file . ' loop = "on" autoplay = 1]');

Poster: Defines image to show as placeholder before the media plays. The following same code takes album_cover.jpg stored in (theme directory)/images folder as the initial image:

echo do_shortcode('[video mp4=' . $video_file . ' poster = ' . get_template_directory_uri() . '/images/album_cover.jpg]');

Height and Width:

The following example will load the audio player with 320 pixels width and 240 pixels height:

echo do_shortcode('[video mp4=' . $video_file . ' width = 320 height = 240]');

Value is automatically detected on file upload. When you omit this option, the media file width/height is used. The theme’s content_width sets the maximum width.

Styling: If you want to change look & feel of video player from stylesheet, you can target the class name of “wp-video-shortcode”. If you want to show the audio player like above in 320 x 240 size, insert following code into your stylesheet.

.wp-video-shortcode {
  width: 320px;
  height: 240px;
}

References

• https://make.wordpress.org/core/2013/04/08/audio-video-support-in-core/.
• Video Shortcode
• Function do_shortcode()

Featured images (also sometimes called Post Thumbnails) are images that represent an individual Post, Page, or Custom Post Type. When you create your Theme, you can output the featured image in a number of different ways, on your archive page, in your header, or above a post, for example.

Enabling Support for Featured Image

Themes must declare support for the Featured Image function before the Featured Image interface will appear on the Edit screen. Support is declared by putting the following in your theme’s functions.php file:

add_theme_support( 'post-thumbnails' );

Setting a Featured Image

Once you add support for Featured Images, the Featured Image meta box will be visible on the appropriate content item’s Edit screens. If a user is unable to see it, they can enable it in their screen options.

By default, the Featured Image meta box is displayed in the sidebar of the Edit Post and Edit Page screens.

Function Reference

add_image_size()– Register a new image size…
set_post_thumbnail_size() – Registers an image size for the post thumbnail…

has_post_thumbnail() – Check if post has an image attached…
the_post_thumbnail() – Display Post Thumbnail…

get_the_post_thumbnail() – Retrieve Post Thumbnail…
get_post_thumbnail_id() – Retrieve Post Thumbnail ID…

Image Sizes

The default image sizes of WordPress are “Thumbnail”, “Medium”, “Large” and “Full Size” (the original size of the image you uploaded). These image sizes can be configured in the WordPress Administration Media panel under >Settings > Media. You can also define your own image size by passing an array with your image dimensions:

the_post_thumbnail(); // Without parameter ->; Thumbnail
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'medium_large' ); // Medium-large resolution (default 768px x no height limit max)
the_post_thumbnail( 'large' ); // Large resolution (default 1024px x 1024px max)
the_post_thumbnail( 'full' ); // Original image resolution (unmodified)
the_post_thumbnail( array( 100, 100 ) ); // Other resolutions (height, width)

Add Custom Featured Image Sizes

Here is an example of how to create custom Featured Image sizes in your theme’s functions.php file.

if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 150, 150, true ); // default Featured Image dimensions (cropped)
 
    // additional image sizes
    // delete the next line if you do not need additional image sizes
    add_image_size( 'category-thumb', 300, 9999 ); // 300 pixels wide (and unlimited height)
 }

Set the Featured Image Output Size

To be used in the current Theme’s functions.php file. You can use set_post_thumbnail_size() to set the default Featured Image size by resizing the image proportionally (that is, without distorting it):

set_post_thumbnail_size( 50, 50 ); // 50 pixels wide by 50 pixels tall, resize mode

Set the default Featured Image size by cropping the image (either from the sides, or from the top and bottom):

set_post_thumbnail_size( 50, 50, true ); // 50 pixels wide by 50 pixels tall, crop mode

Styling Featured Images

Featured Images are given a class “wp-post-image”. They also get a class depending on the size of the thumbnail being displayed. You can style the output with these CSS selectors:

img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

You can also give Featured Images their own classes by using the attribute parameter in the_post_thumbnail().
Display the Featured Image with a class “alignleft”:

the_post_thumbnail( 'thumbnail', array( 'class' => 'alignleft' ) );

Default Usages

// check if the post or page has a Featured Image assigned to it.
if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}

// check for a Featured Image and then assign it to a PHP variable for later use
if ( has_post_thumbnail() ) {
    $featured_image = get_the_post_thumbnail();
}

Linking to Post Permalink or Larger Image

Example 1. To link Post Thumbnails to the Post Permalink in a specific loop, use the following within your Theme’s template files:

<?php if ( has_post_thumbnail()) : ?>
   <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
   <?php the_post_thumbnail(); ?>
   </a>
 <?php endif; ?>

Example 2. To link all Post Thumbnails on your website to the Post Permalink, put this in the current Theme’s functions.php file:

add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );
 
function my_post_image_html( $html, $post_id, $post_image_id ) {
 
  $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
  return $html;
 
}

This example links to the “large” Post Thumbnail image size and must be used within The Loop.

<?php
 if ( has_post_thumbnail()) {
    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
    echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
    the_post_thumbnail('thumbnail');
    echo '</a>';
 }
 ?>

References

• Everything you need to know about WordPress 2.9’s post image feature
• The Ultimative Guide For the_post_thumbnail In WordPress 2.9
• New in WordPress 2.9: Post Thumbnail Images

Internationalization

Internationalization is the process of developing your theme, so it can easily be translated into other languages. Internationalization is often abbreviated as i18n (because there are 18 letters between the letters i and n).

How to internationalize your theme?

For the text in the theme to be able to be translated easily the text should not be hardcoded in the theme but be passed as an argument through one of the localization functions in WordPress.

The following example could not be translated unless the translator modified the source code which is not very efficient.

<h1>Settings Page</h1>

By passing the string through a localization function it can be easily parsed to be translated.

<h1><?php __( 'Settings Page' ); ?></h1>

WordPress uses gettext libraries to be able to add the translations in PHP. In WordPress you should use the WordPress localization functions instead of the native PHP gettext-compliant translation functions.

Text Domain

The text domain is the second argument that is used in the internationalization functions. The text domain is a unique identifier, allowing WordPress to distinguish between all of the loaded translations. The text domain is only needed to be defined for themes and plugins.

Themes that are hosted on WordPress.org the text domain must match the slug of your theme URL (wordpress.org/themes/<slug>). This is needed so that the translations from translate.wordpress.org work correctly.

The text domain name must use dashes and not underscores and be lowercase. For example, if the theme’s name My Theme is defined in the style.css or it is contained in a folder called my-theme the text domain should be my-theme .

The text domain is used in three different places:

1. In the style.css theme header
2. As an argument in the localization functions
3. As an argument when loading the translations using load_theme_textdomain() or  load_child_theme_textdomain()

style.css theme header

The text domain is added to the style.css header so that the theme meta-data like the description can be translated even when the theme is not enabled. The text domain should be same as the one used when loading the text domain.

Example:

/*
* Theme Name: My Theme
* Author: Theme Author
* Text Domain: my-theme
*/

Domain Path

The domain path is needed when the translations are saved in a directory other than languages . This is so that WordPress knows where to find the translation when the theme is not activated. For example, if .mo files are located in the languages folder then Domain Path will be /languages and must be written with the first slash. Defaults to the languages folder in the theme.

Example:

/*
* Theme Name: My Theme
* Author: Theme Author
* Text Domain: my-theme
* Domain Path: /languages
*/

Add text domain to strings

The text domain should be added as an argument to all of the localization functions for the translations to work correctly.

Examples:

__( 'Post' )
should become
__( 'Post', 'my-theme' )

__( 'Post', 'my-theme' )
should become
_e( 'Post', 'my-theme' )

_n( 'One post', '%s posts', $count )
should become
_n( 'One post', '%s posts', $count, 'my-theme' )

__( 'Translate me.' , $text_domain );

Loading Translations

The translations in WordPress are saved in .po and .mo files which need to be loaded. They can be loaded by using the functionsload_theme_textdomain() or load_child_theme_textdomain(). This loads {locale}.mo from your theme’s base directory or {text-domain}-{locale}.mo from the WordPress theme language folder in /wp-content/languages/themes/.

To find out more about the different language and country codes, see the list of languages.

Basic Functions - follow handbook from here

Localization

Data Sanitization/Escaping

Sanitization: Securing Input

Sanitization is the process of cleaning or filtering your input data. Whether the data is from a user or an API or web service, you use sanitizing when you don’t know what to expect or you don’t want to be strict with data validation.

The easiest way to sanitize data is with built-in WordPress functions.

The sanitize_*() series of helper functions provide an effective way to ensure you’re ending up with safe data, and they require minimal effort on your part:

• sanitize_email()
• sanitize_file_name()
• sanitize_html_class()
• sanitize_key()
• sanitize_meta()
• sanitize_mime_type()
• sanitize_option()
• sanitize_sql_orderby()
• sanitize_text_field()
• sanitize_title()
• sanitize_title_for_query()
• sanitize_title_with_dashes()
• sanitize_user()
• esc_url_raw()
• wp_filter_post_kses()
• wp_filter_nohtml_kses()

Let’s say we have an input field named title.

<input id="title" type="text" name="title">

You can sanitize the input data with the sanitize_text_field() function:

$title = sanitize_text_field( $_POST['title'] );
update_post_meta( $post->ID, 'title', $title );

Behind the scenes, sanitize_text_field() does the following:

• Checks for invalid UTF-8
• Converts single less-than characters (<) to entity
• Strips all tags
• Removes line breaks, tabs and extra white space
• Strips octets

Escaping: Securing Output

Whenever you’re outputting data make sure to properly escape it.

Escaping is the process of securing output by stripping out unwanted data, like malformed HTML or script tags, preventing this data from being seen as code.

Escaping helps secure your data prior to rendering it for the end user and prevents XSS (Cross-site scripting) attacks.

WordPress has a few helper functions you can use for most common scenarios.

• esc_html() – Use this function anytime an HTML element encloses a section of data being displayed.

<?php echo esc_html( $title ); ?>

• esc_url() – Use this function on all URLs, including those in the src and href attributes of an HTML element.

<img src="<?php echo esc_url( $great_user_picture_url ); ?>" />

• esc_js() – Use this function for inline Javascript.

<a href="#" onclick="<?php echo esc_js( $custom_js ); ?>">Click me</a>

• esc_attr() – Use this function on everything else that’s printed into an HTML element’s attribute.

<ul class="<?php echo esc_attr( $stored_class ); ?>"> </ul>

• esc_textarea() – encodes text for use inside a textarea element.

<textarea><?php echo esc_textarea( $text ); ?></textarea>

Output escaping should occur as late as possible.

Escaping with Localization

Rather than using echo to output data, it’s common to use the WordPress localization functions, such as _e() or __().

These functions simply wrap a localization function inside an escaping function:

esc_html_e( 'Hello World', 'text_domain' );
// same as
echo esc_html( __( 'Hello World', 'text_domain' ) );

These helper functions combine localization and escaping:

• esc_html__()
• esc_html_e()
• esc_html_x()
• esc_attr__()
• esc_attr_e()
• esc_attr_x()



Custom Escaping

In the case that you need to escape your output in a specific way, the function wp_kses() (pronounced “kisses”) will come in handy. For example, there are instances when your want HTML elements or attributes to display in your output.

This function makes sure that only the specified HTML elements, attributes, and attribute values will occur in your output, and normalizes HTML entities.

$allowed_html = [
    'a'      => [
        'href'  => [],
        'title' => [],
    ],
    'br'     => [],
    'em'     => [],
    'strong' => [],
];
echo wp_kses( $custom_content, $allowed_html );

wp_kses_post() is a wrapper function for wp_kses where $allowed_html is a set of rules used by post content.

echo wp_kses_post( $post_content );

Database Escaping

All data in SQL queries must be SQL-escaped before the SQL query is executed to prevent against SQL injection attacks. WordPress provides helper classes to assist with escaping SQL queries $wpdb.

Selecting Data

The escaped SQL query ($sql in this example) can then be used with one of the methods:

• $wpdb->get_row($sql)
• $wpdb->get_var($sql)
• $wpdb->get_results($sql)
• $wpdb->get_col($sql)
• $wpdb->query($sql)



Inserting and Updating Data

• $wpdb->update()
• $wpdb->insert()

Like Statements

• $wpdb->prepare



---

Data Validation

Data validation is the process of analyzing the data against a predefined pattern (or patterns) with a definitive result: valid or invalid.

Usually this applies to data coming from external sources such as user input and calls to web services via API.

Simple examples of data validation:

• Check that required fields have not been left blank
• Check that an entered phone number only contains numbers and punctuation
• Check that an entered postal code is a valid postal code
• Check that a quantity field is greater than 0



Data validation should be performed as early as possible. That means validating the data before performing any actions.

Note:
Validation can be performed by using JavaScript on the front end and by using PHP on the back end.

Built-in PHP functions

Basic validation is doable using many built-in PHP functions, including these:

• isset() and empty() for checking whether a variable exists and isn’t blank
• mb_strlen() or strlen() for checking that a string has the expected number of characters
• preg_match(), strpos() for checking for occurrences of certain strings in other strings
• count() for checking how many items are in an array
• in_array() for checking whether something exists in an array



Core WordPress functions

WordPress provides many useful functions that help validate different kinds of data. Here are several examples:

• is_email() will validate whether an email address is valid.
• term_exists() checks whether a tag, category, or other taxonomy term exists.
• username_exists() checks if username exists.
• validate_file() will validate that an entered file path is a real path (but not whether the file exists).



Check the the list of conditional tags for more functions like these.
Search for functions with names like these: *_exists(), *_validate(), and is_*(). Not all of these are validation functions, but many are helpful.

Custom PHP and JavaScript functions

You can write your own PHP and JavaScript functions and include them in your plugin. When writing a validation function, you’ll want to name it like a question (examples: is_phone, is_available, is_us_zipcode).

The function should return a boolean, either true or false, depending on whether the data is valid or not. This will allow using the function as a condition.

Example 1

Let’s say you have an U.S. zip code input field that a user submits.

<input id="wporg_zip_code" type="text" maxlength="10" name="wporg_zip_code">

The text field allows up to 10 characters of input with no limitations on the types of characters that can be used. Users could enter something valid like 1234567890 or something invalid (and evil) like eval().

The maxlength attribute on our input field is only enforced by the browser, so you still need to validate the length of the input on the server. If you don’t, an attacker could alter the maxlength value.

By using validation we can ensure we’re accepting only valid zip codes.

First you need to write a function to validate a U.S. zip codes:

<?php function is_us_zip_code($zip_code) { // scenario 1: empty if (empty($zip_code)) { return false; } // scenario 2: more than 10 characters if (strlen(trim($zip_code)) > 10) {
        return false;
    }
 
    // scenario 3: incorrect format
    if (!preg_match('/^\d{5}(\-?\d{4})?$/', $zip_code)) {
        return false;
    }
 
    // passed successfully
    return true;
}

When processing the form, your code should check the wporg_zip_code field and perform the action based on the result:

if ( isset( $_POST['wporg_zip_code'] ) && is_us_zip_code( $_POST['wporg_zip_code'] ) ) {
    // your action
}

Example 2

Say you’re going to query the database for some posts, and you want to give the user the ability to sort the query results.

This example code checks an incoming sort key (stored in the “orderby” input parameter) for validity by comparing it against an array of allowed sort keys using the built-in PHP function in_array. This prevents the user from passing in malicious data and potentially compromising the website.

Before checking the incoming sort key against the array, the key is passed into the built-in WordPress function sanitize_key. This function ensures, among other things, that the key is in lowercase (in_array performs a case-sensitive search).

Passing “true” into the third parameter of in_array enables strict type checking, which tells the function to not only compare values but value types as well. This allows the code to be certain that the incoming sort key is a string and not some other data type.

<?php
$allowed_keys = ['author', 'post_author', 'date', 'post_date'];
 
$orderby = sanitize_key( $_POST['orderby'] );
 
if ( in_array( $orderby, $allowed_keys, true ) ) {
    // modify the query to sort by the orderby key
}

---

Using Nonces

WordPress nonces are one-time use security tokens generated by WordPress to help protect URLs and forms from misuse.

If your theme allows users to submit data; be it in the Admin or the front-end; nonces can be used to verify a user intends to perform an action, and is instrumental in protecting against Cross-Site Request Forgery(CSRF).

An example is a WordPress site in which authorized users are allowed to upload videos. As an authorized user uploading videos is an intentional action and permitted. However, in a CSRF, a hacker can hijack (forge) the use of an authorized user and perform a fraudulent submission.

The one-time use hash generated by a nonce, prevents this type of forged attacks from being successful by validating the upload request is done by the current logged in user. Nonces are unique only to the current user’s session, so if an attempt is made to log in or out any nonces on the page become invalid.

Creating a Nonce

• wp_nonce_url() – Adding a nonce to an URL.
• wp_nonce_field() – Adding a nonce to a form.
• wp_create_nonce() – Using a nonce in a custom way; useful for processing AJAX requests.



Verifying a Nonce

• check_admin_referer() – To verify a nonce that was passed in a URL or a form in an admin screen.
• check_ajax_referer() – Checks the nonce (but not the referrer), and if the check fails then by default it terminates script execution.
• wp_verify_nonce() – To verify a nonce passed in some other context.



Example

In this example, we have a basic submission form.

Create the Nonce

To secure your form with a nonce, create a hidden nonce field using wp_nonce_field()function:

<form method="post">
   <!-- some inputs here ... -->
   <?php wp_nonce_field( 'name_of_my_action', 'name_of_nonce_field' ); ?>
</form>

Verify the Nonce

In our example we first check if the nonce field is set since we do not want to run anything if the form has not been submitted. If the form has been submitted we use the nonce field value function. If nonce verification is successful the form will process.

if ( 
    ! isset( $_POST['name_of_nonce_field'] ) 
    || ! wp_verify_nonce( $_POST['name_of_nonce_field'], 'name_of_my_action' ) 
) {
 
   print 'Sorry, your nonce did not verify.';
   exit;
 
} else {
 
   // process form data
}

In this example the basic nonce process:

1. Generates a nonce with the wp_nonce_field() function.
2. The nonce is submitted with the form submission.
3. The nonce is verified for validity using the wp_verify_nonce() function. If not verified the request exits with an error message.

---

Common Vulnerabilities

Security is an ever-changing landscape, and vulnerabilities evolve over time. The following is a discussion of common vulnerabilities you should protect against, and the techniques for protecting your theme from exploitation.




Types of Vulnerabilities:




SQL Injection

SQL injection happens when values being inputted are not properly sanitized allowing for any SQL commands in the inputted data to potentially be executed. To prevent this, the WordPress API is extensive, offering functions like add_post_meta(); instead of you needing to adding the post meta manually via SQL (INSERT INTO wp_postmeta…).

But sometimes you need to do complex queries, that have not been accounted for in the API. If this is the case, always use the $wpdb functions. These were built specifically to protect your database.

All data in SQL queries must be SQL-escaped before the SQL query is executed to prevent against SQL injection attacks. The best function to use for SQL-escaping is $wpdb->prepare() which supports both a sprintf()-like and vsprintf()-like syntax.

$wpdb->get_var( $wpdb->prepare(
  "SELECT something FROM table WHERE foo = %s and status = %d",
  $name, // an unescaped string (function will do the sanitization for you)
  $status // an untrusted integer (function will do the sanitization for you)
) );

Cross Site Scripting (XSS)

Cross Site Scripting (XSS) happens when a nefarious party injects JavaScript into a web page.

Avoid XSS vulnerabilities by escaping output, stripping out unwanted data. As a theme’s primary responsibility is outputting content, a theme should escape dynamic content with the proper function depending on the type of the content.

An example of one of the escaping functions is escaping URL from a user profile.

<img src="<?php echo esc_url( $great_user_picture_url ); ?>" />

Content that has HTML entities within can be sanitized to allow only specified HTML elements.

$allowed_html = array(
    'a' => array(
        'href' => array(),
        'title' => array()
    ),
    'br' => array(),
    'em' => array(),
    'strong' => array(),
);
  
echo wp_kses( $custom_content, $allowed_html );

Cross-site Request Forgery (CSRF)

Cross-site request forgery or CSRF (pronounced sea-surf) is when a nefarious party tricks a user into performing an unwanted action within a web application they are authenticated in. For example, a phishing email might contain a link to a page that would delete a user’s account in the WordPress admin.

If your theme includes any HTML or HTTP-based form submissions, use a nonce to guarantee a user intends to perform an action.

<form method="post">
   <-- some inputs here ... -->
   <?php wp_nonce_field( 'name_of_my_action', 'name_of_nonce_field' ); ?>
</form>

Staying Current

It is important to stay current on potential security holes. The following resources provide a good starting point:

• WordPress Security Whitepaper
• WordPress Security Release
• Open Web Application Security Project (OWASP) Top 10

Child Theme

A child theme allows you to change small aspects of your site’s appearance yet still preserve your theme’s look and functionality. To understand how child themes work it is first important to understand the relationship between parent and child themes.

What is a Parent Theme?

A parent theme is a complete theme which includes all of the required WordPress template files and assets for the theme to work. All themes – excluding child themes – are considered parent themes.

How to Create a Child Theme

1. Create a child theme folder

First, create a new folder in your themes directory, located at wp-content/themes.

The directory needs a name. It’s best practice to give a child theme the same name as the parent, but with -child appended to the end. For example, if you were making a child theme of twentyfifteen, then the directory would be named twentyfifteen-child.

2. Create a stylesheet: style.css

Next, you’ll need to create a stylesheet file named style.css, which will contain all of the CSS rules and declarations that control the look of your theme. Your stylesheet must contain the below required header comment at the very top of the file. This tells WordPress basic info about the theme, including the fact that it is a child theme with a particular parent.

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

The following information is required:

• Theme Name – needs to be unique to your theme
• Template – the name of the parent theme directory. The parent theme in our example is the Twenty Fifteen theme, so the Template will be twentyfifteen. You may be working with a different theme, so adjust accordingly.

Add remaining information as applicable. The only required child theme file is style.css, but functions.php is necessary to enqueue styles correctly (below).

3. Enqueue stylesheet

The final step is to enqueue the parent and child theme stylesheets.

The recommended way of enqueuing the parent theme stylesheet currently is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php.

You will therefore need to create a functions.php in your child theme directory. The first line of your child theme’s functions.php will be an opening PHP tag (<?php), after which you can enqueue your parent and child theme stylesheets. The following example function will only work if your Parent Theme uses only one main style.cssto hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 
}
?>

If your child theme style.css contains actual CSS code (as it normally does), you will need to enqueue it as well. Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it. Including the child theme version number ensures that you can bust cache also for the child theme. The complete (recommended) example becomes:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
?>

Activate child theme - wp handbook

JavaScript Best Practices

get_template_directory vs get_template_directory_uri – Explained

get_template_directory() is a function which returns the absolute template path directory of the theme. It generates the hosting directory of the template. Please check the example below.

/Applications/XAMPP/xamppfiles/htdocs/wp/wp-content/themes/test 

It is almost the same, but it retrieves the full URI of the template directory. You can use it to print the URL of the template directory. It retrieves the full URI including the http://. You can use it outside of the Include function. Generally, we use get_template_directory_uri() function to print the style.css or javascript source. You can also use it to print for any other reasons. Get_template_directory_uri() prints like that.

http://localhost/wp/wp-content/themes/test

Usage

<link rel="stylesheet" type="text/css" href="<?php echo esc_url(get_template_directory_uri()); ?>/style.css"/>

<img src="<?php echo get_template_directory_uri(); ?>/assets/img/flexslider/flex-1.jpg" />

get_theme_file_uri( string $file = '' )

Retrieves the URL of a file in the theme.

Searches in the stylesheet directory before the template directory so themes which inherit from a parent theme can just override one file.

<img src="<?php echo get_theme_file_uri( 'images/photo.jpg' ); ?>">

bloginfo()

bloginfo( string $show = '' )

Displays information about the current site.

• ‘name’ – Site title (set in Settings > General)
• ‘description’ – Site tagline (set in Settings > General)
• ‘wpurl’ – The WordPress address (URL) (set in Settings > General)
• ‘url’ – The Site address (URL) (set in Settings > General)
• ‘admin_email’ – Admin email (set in Settings > General)
• ‘charset’ – The "Encoding for pages and feeds" (set in Settings > Reading)
• ‘version’ – The current WordPress version
• ‘html_type’ – The content-type (default: "text/html"). Themes and plugins can override the default value using the ‘pre_option_html_type’ filter
• ‘text_direction’ – The text direction determined by the site’s language. is_rtl() should be used instead
• ‘language’ – Language code for the current site
• ‘stylesheet_url’ – URL to the stylesheet for the active theme. An active child theme will take precedence over this value
• ‘stylesheet_directory’ – Directory path for the active theme. An active child theme will take precedence over this value
• ‘template_url’ / ‘template_directory’ – URL of the active theme’s directory. An active child theme will NOT take precedence over this value
• ‘pingback_url’ – The pingback XML-RPC file URL (xmlrpc.php)
• ‘atom_url’ – The Atom feed URL (/feed/atom)
• ‘rdf_url’ – The RDF/RSS 1.0 feed URL (/feed/rdf)
• ‘rss_url’ – The RSS 0.92 feed URL (/feed/rss)
• ‘rss2_url’ – The RSS 2.0 feed URL (/feed)
• ‘comments_atom_url’ – The comments Atom feed URL (/comments/feed)
• ‘comments_rss2_url’ – The comments RSS 2.0 feed URL (/comments/feed)

wp_title()

wp_title( string $sep = '»', bool $display = true, string $seplocation = '' )

Display or retrieve page title for all areas of blog.

<title><?php wp_title(''); echo ' | ';  bloginfo( 'name' ); ?></title>

<?php wp_title('|',true,'right'); ?> <?php bloginfo('name'); ?>

To solve the Homepage empty title tag - this code below, on header.php template:

<title>
    <?php if(is_front_page() || is_home()){
        echo get_bloginfo('name');
    } else{
        echo wp_title('');
    }?>
</title>

Starting with 4.1 and Twenty Fifteen, the recommended way for themes to display titles is by adding theme support like this:

function theme_slug_setup() {
   add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'theme_slug_setup' );

Support should be added on the after_setup_theme or init action, but no later than that. It does not accept any further arguments.

get_the_category()

post_class()

the_ID()

get_the_id()

wp_kses_post()

get_permalink()

wp_link_pages()

if you want to enable revisions in WordPress, you can do so manually by editing the wp-config.php file in your site’s root directory.

define('WP_POST_REVISIONS', false);

Change the false value to true.

If there is no line like this, add the following above where it says “ABSPATH” and “/* That's all, stop editing! Happy publishing. */”:

define('WP_POST_REVISIONS', true); 

You can then enter a command to run on your WordPress database. In the command box, enter the following:

DELETE FROM wp_posts WHERE post_type=”revision”; 

To manually set a limit on the revisions you allow in WordPress, you can edit the code in your wp-config.php file.

 define('WP_POST_REVISIONS', 3); 

We’ve used 3 as an example value above, but you can change this number to reflect however many revisions you want your database to store per page or post.

developer.wordpress.org/plugins/post-types/registering-custom-post-types/

developer.wordpress.org/reference/functions/get_post_type_labels/

developer.wordpress.org/reference/functions/add_meta_box/

How To Create A WordPress Custom Post Type Without A Plugin

Video Tuts by WPLearningLab - Feb 12, 2018

wpbeginner.com/wp-tutorials/how-to-create-custom-post-types-in-wordpress/

kinsta.com/blog/wordpress-custom-post-types

cloudways.com/blog/how-to-create-custom-post-types-in-wordpress/

wordpress.stackexchange.com/questions/364645/singular-name-label-in-custom-post-type

mugo.ca/Blog/Adding-complex-fields-to-WordPress-custom-post-types

WordPress Custom Fields for Custom Post Type

Video Tuts by RALEIGH -

github.com/ruvictor/wp-events-post-type

Add the following code to the function.php file

/* Custom Post Type Start */

function create_posttype() {
register_post_type( 'news',
// CPT Options

array(
  'labels' => array(
   'name' => __( 'news' ),
   'singular_name' => __( 'News' )
  ),
  'public' => true,
  'has_archive' => false,
  'rewrite' => array('slug' => 'news'),
 )
);
}
// Hooking up our function to theme setup
add_action( 'init', 'create_posttype' );

/* Custom Post Type End */

/*Custom Post type start*/
function cw_post_type_news() {
    $supports = array(
    'title', // post title
    'editor', // post content
    'author', // post author
    'thumbnail', // featured images
    'excerpt', // post excerpt
    'custom-fields', // custom fields
    'comments', // post comments
    'revisions', // post revisions
    'post-formats', // post formats
    );
    $labels = array(
    'name' => _x('news', 'plural'),
    'singular_name' => _x('news', 'singular'),
    'menu_name' => _x('news', 'admin menu'),
    'name_admin_bar' => _x('news', 'admin bar'),
    'add_new' => _x('Add New', 'add new'),
    'add_new_item' => __('Add New news'),
    'new_item' => __('New news'),
    'edit_item' => __('Edit news'),
    'view_item' => __('View news'),
    'all_items' => __('All news'),
    'search_items' => __('Search news'),
    'not_found' => __('No news found.'),
    );
    $args = array(
    'supports' => $supports,
    'labels' => $labels,
    'public' => true,
    'query_var' => true,
    'rewrite' => array('slug' => 'news'),
    'has_archive' => true,
    'hierarchical' => false,
    );
    register_post_type('news', $args);
}

add_action('init', 'cw_post_type_news');
/*Custom Post type end*/

Creating a template and fetching a list requires creating a new file named template-news.php

<?php
/*Template Name: News*/
get_header();
query_posts(array(
   'post_type' => 'news'
)); ?>
<?php
while (have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?></p>
<?php endwhile;
get_footer();
?>

/**
 * Setup query to show the ‘services’ post type with ‘8’ posts.
 * Output the title with an excerpt.
 */
    $args = array(  
        'post_type' => 'services',
        'post_status' => 'publish',
        'posts_per_page' => 8, 
        'orderby’ => 'title', 
        'order’ => 'ASC', 
    );

    $loop = new WP_Query( $args ); 
        
    while ( $loop->have_posts() ) : $loop->the_post(); 
        the_title(); 
        the_excerpt(); 
    endwhile;

    wp_reset_postdata(); 

/**
 * Setup query to show the ‘services’ post type with ‘8’ posts.
 * Output the title with an excerpt.
 */
    $args = array(  
        'post_type' => 'services',
        'post_status' => 'publish',
        'posts_per_page' => 8, 
        'orderby’ => 'title', 
        'order’ => 'ASC', 
    );

    $loop = new WP_Query( $args ); 
        
    while ( $loop->have_posts() ) : $loop->the_post(); 
        print the_title(); 
        the_excerpt(); 
    endwhile;

    wp_reset_postdata(); 

/**
 * Setup query to show the ‘services’ post type with all posts filtered by 'home' category.
 * Output is linked title with featured image and excerpt.
 */
   
    $args = array(  
        'post_type' => 'services',
        'post_status' => 'publish',
        'posts_per_page' => -1, 
        'orderby' => 'title', 
        'order' => 'ASC',
        'cat' => 'home',
    );

    $loop = new WP_Query( $args ); 
        
    while ( $loop->have_posts() ) : $loop->the_post(); 
        $featured_img = wp_get_attachment_image_src( $post->ID );
        print the_title();
        if ( $feature_img ) {
           < img src="print $featured_img['url']" width=”print $featured_img['width']" height="print $featured_img['height']" />
        }
        the_excerpt(); 
    endwhile;

    wp_reset_postdata(); 

Labels

The labels parameter lets you customize all the labels used throughout the WordPress backend. It’s usually as simple as find/replacing the plural and singular forms of the post type, but you may want to tweak some of the other labels more extensively.

Supports

The supports parameter lets you specify which WordPress features should be enabled for this post type. Options:

• ‘title’
• ‘editor’ (content)
• ‘author’
• ‘thumbnail’ (featured image, current theme must also support post-thumbnails)
• ‘excerpt’
• ‘trackbacks’
• ‘custom-fields’
• ‘comments’ (also will see comment count balloon on edit screen)
• ‘revisions’ (will store revisions)
• ‘page-attributes’ (menu order, hierarchical must be true to show Parent option)
• ‘post-formats’ add post formats, see Post Formats

Show in REST

eveloper.wordpress.org/reference/functions/add_meta_box/

https://www.sitepoint.com/adding-custom-meta-boxes-to-wordpress/

wordpress.org/support/article/custom-fields/

css-tricks.com/use-custom-fields-in-wordpress/

wpbeginner.com/wp-tutorials/wordpress-custom-fields-101-tips-tricks-and-hacks/

WP Query - WP codex

 <?php
// the query
$the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) : ?>

	<!-- pagination here -->

	<!-- the loop -->
	<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
		<h2><?php the_title(); ?></h2>
	<?php endwhile; ?>
	<!-- end of the loop -->

	<!-- pagination here -->

	<?php wp_reset_postdata(); ?>

<?php else : ?>
	<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

themeisle.com/blog/re-order-wordpress-blog-posts/

wpbeginner.com/plugins/reorder-wordpress-posts-using-drag-drop/

wpmudev.com/blog/arrange-wordpress-posts-any-order/

developer.wordpress.org/reference/functions/get_search_form/

codex.wordpress.org/Creating_a_Search_Page

WordPress provides a method get_search_form() to display search form on the website. This method looks for searchform.php file in your active theme’s directory for displaying search form. If this file does not exist then WordPress displays default search form which is included in its core.

Create searchform.php file in your active theme’s directory. In this file add your markup of search form. For instance, in our case search form HTML is as follows.

<form id="searchform" method="get" action="<?php echo home_url('/'); ?>">
    <input type="text" class="search-field" name="s" placeholder="Search" value="<?php the_search_query(); ?>">
    <input type="submit" value="Search">
</form>

Customize Search Result

Sometimes your website has more resources like books, magazines, ebooks, PDFs, etc. And You need to cover content from all these resources in the search result.

Assuming you have custom post types for all these resources, you need to add a hidden field for each post type in the search form.

Let’s say you have created custom post types for above resources like book, magazine, ebook, pdf. Then, your hidden fields will be as follows.

<form id="searchform" method="get" action="<?php echo home_url('/'); ?>">
    <input type="text" class="search-field" name="s" placeholder="Search" value="<?php the_search_query(); ?>">
    <input type="hidden" name="post_type[]" value="book" />
    <input type="hidden" name="post_type[]" value="magazine" />
    <input type="hidden" name="post_type[]" value="ebook" />
    <input type="hidden" name="post_type[]" value="pdf" />
    <input type="submit" value="Search">
</form>

Now when someone enters a keyword in the search field, WordPress searches in all above post types for matching the result.

developer.wordpress.org/reference/functions/the_search_query/

developer.wordpress.org/reference/functions/get_template_part/

WordPress get_template_part Tutorial

Video Tuts by LearnWebCode - June 9, 2014

get_template_part( 'nav' );           // Navigation bar (nav.php)
get_template_part( 'nav', '2' );      // Navigation bar #2 (nav-2.php)
get_template_part( 'nav', 'single' ); // Navigation bar to use in single pages (nav-single.php)
 
 // if you have a folder called “partials” in your theme directory and a 
 // template part called “content-page.php” in that sub-folder. 
 // get_template_part() has the ability to search one directory deep.
get_template_part( 'partials/content', 'page' );

// will include layout.php from template-parts subdirectory placed in the root of your theme folder.
get_template_part('template-parts/layout');

wordpress.org/reference/functions/wp_link_pages/

WordPress Functions wp_link_pages function Part-5

Video Tuts by Imran Sayed - Nov 19, 2017

WordPress Theme Development Tutorial - Underscores Starter Theme

How to Display Blog Post Meta Data in Your WordPress Themes

Tips, Tricks and Best Plugins for Customizing WordPress Menus

How to Prevent WordPress from Generating Image Sizes

Hide Header & Footer on Certain Page(s) +

.page-id-XX .site-header, .page-id-XX .site-footer { display: none; }

.post-id-XX .site-header, .page-id-XX .site-footer { display: none; }

Common WordPress template files

Below is a list of some basic theme templates and files recognized by WordPress.

index.php

The main template file. It is required in all themes.

style.css

The main stylesheet. It is required in all themes and contains the information header for your theme.

rtl.css

The right-to-left stylesheet is included automatically if the website language’s text direction is right-to-left.

comments.php

The comments template.

front-page.php

The front page template is always used as the site front page if it exists, regardless of what settings on Admin > Settings > Reading.

home.php

The home page template is the front page by default. If you do not set WordPress to use a static front page, this template is used to show latest posts.

header.php

The header template file usually contains your site’s document type, meta information, links to stylesheets and scripts, and other data.

singular.php

The singular template is used for posts when single.php is not found, or for pages when page.php are not found. If singular.php is not found, index.php is used.

single.php

The single post template is used when a visitor requests a single post.

single-{post-type}.php

The single post template used when a visitor requests a single post from a custom post type. For example, single-book.php would be used for displaying single posts from a custom post type named book. The index.php is used if a specific query template for the custom post type is not present.

archive-{post-type}.php

The archive post type template is used when visitors request a custom post type archive. For example, archive-books.php would be used for displaying an archive of posts from the custom post type named books. The archive.php template file is used if the archive-{post-type}.php is not present.

page.php

The page template is used when visitors request individual pages, which are a built-in template.

page-{slug}.php

The page slug template is used when visitors request a specific page, for example one with the “about” slug (page-about.php).

category.php

The category template is used when visitors request posts by category.

tag.php

The tag template is used when visitors request posts by tag.

taxonomy.php

The taxonomy term template is used when a visitor requests a term in a custom taxonomy.

author.php

The author page template is used whenever a visitor loads an author page.

date.php

The date/time template is used when posts are requested by date or time. For example, the pages generated with these slugs:
http://example.com/blog/2014/
http://example.com/blog/2014/05/
http://example.com/blog/2014/05/26/

archive.php

The archive template is used when visitors request posts by category, author, or date. Note: this template will be overridden if more specific templates are present like category.php, author.php, and date.php.

search.php

The search results template is used to display a visitor’s search results.

attachment.php

The attachment template is used when viewing a single attachment like an image, pdf, or other media file.

image.php

The image attachment template is a more specific version of attachment.php and is used when viewing a single image attachment. If not present, WordPress will use attachment.php instead.

404.php

The 404 template is used when WordPress cannot find a post, page, or other content that matches the visitor’s request.

Excerpts vs. Full Posts #

You can choose whether to display full posts or just excerpts. By displaying excerpts, you shorten the length of your archive page.

Open your file and find the loop. Look for:

the_content()

And replace it with:

the_excerpt()

And if your theme is displaying excerpts but you want to display the full content, replace the_excerpt with the_content.

Home Page display

By default, WordPress sets your site’s home page to display your latest blog posts. This page is called the blog posts index. You can also set your blog posts to display on a separate static page. The template file home.php is used to render the blog posts index, whether it is being used as the front page or on separate static page. If home.php does not exist, WordPress will use index.php.

1. home.php
2. index.php

The front-page.php template file is used to render your site’s front page, whether the front page displays the blog posts index (mentioned above) or a static page. The front page template takes precedence over the blog posts index (home.php) template. If the front-page.php file does not exist, WordPress will either use the home.php or page.php files depending on the setup in Settings → Reading. If neither of those files exist, it will use the index.php file.

1. front-page.php – Used for both “your latest posts” or “a static page” as set in the front page displays section of Settings → Reading.
2. home.php – If WordPress cannot find front-page.php and “your latest posts” is set in the front page displays section, it will look for home.php. Additionally, WordPress will look for this file when the posts page is set in the front page displays section.
3. page.php – When “front page” is set in the front page displays section.
4. index.php – When “your latest posts” is set in the front page displays section but home.php does not exist or when front page is set but page.php does not exist.

What is a Template Tag?

A template tag is simply a piece of code that tells WordPress to get something from the database. It is broken up into three components:

• A PHP code tag
• A WordPress function
• Optional parameters

• the_title() – tells WordPress to get the title of the page or post from the database and include it.
• bloginfo( 'name' ) – tells WordPress to get the blog title out of the database and include it in the template file.
• get_header() tells WordPress to get the header.php file and include it in the current theme file. 
•  get_footer() tells WordPress to get the footer.php file.

WordPress Child Theme Template

An article by phppot.com - February 1st, 2017 by Vincy.