Using the_posts_pagination for custom page template WordPress

How to fix and create pagination with custom page template and keep main query with loop on WordPress blog?

If you look my sitemap, you’ll see the list of my post with pagination. That page was created under custom page template, the custom WP_Query of post’s list build under main loop of page, and function the_posts_pagination to display pagination.

Here the sample PHP code that you can accomplish if you need create custom page template with pagination. Just add after your main query loop.

// Define page_id
$page_ID = get_the_ID();

// Define paginated posts
$page    = get_query_var( 'page' );

// Define custom query parameters
$args    = array(
	'post_type'      => array( 'post', 'book', 'movie' ), // post types
	'posts_per_page' => 5,
	'paged'          => ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1
);

// If is_front_page "paged" parameters as $page number
if ( is_front_page() )
	$args['paged'] = $page;

// Instantiate custom query
$custom_query = new WP_Query( $args );

// Custom loop
if ( $custom_query->have_posts() ) :
    while ( $custom_query->have_posts() ) :
        $custom_query->the_post();
		
		/**
		 * Displaying content
		 *
		 * the_title(), the_permalink(), the_content() etc
		 * Or see Twentysixteen theme page.php
		 * get_template_part( 'template-parts/content', 'page' );
		 *
		 */
    endwhile;
	
		/**
		 * Pagination parameters of the_posts_pagination() since: 4.1.0
		 *
		 * @see the_posts_pagination
		 * https://codex.wordpress.org/Function_Reference/the_posts_pagination
		 * 
		 */
		$pagination_args = array(
			'prev_text'          => __( 'Previous page', 'theme-domain' ),
			'next_text'          => __( 'Next page', 'theme-domain' ),
			'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'theme-domain' ) . ' </span>'
		);
		
		/**
		 * Fix pagination link base
		 *
		 * If in paginated posts w/o multiple loop
		 *
		 */
		
		if ( ! is_front_page() && 0 < intval( $page ) )
			$pagination_args['base'] = user_trailingslashit(
				untrailingslashit( get_page_link( $page_ID ) ) . '/page/%#%'
			);
		/**
		 * Fix Pagination with $GLOBALS['wp_query'] = {custom_query}
		 *
		 * @see get_the_posts_pagination use $GLOBALS['wp_query']
		 * https://developer.wordpress.org/reference/functions/get_the_posts_pagination/#source-code
		 * 
		 */
		$GLOBALS['wp_query'] = $custom_query;
		the_posts_pagination( $pagination_args );
else :
	/**
	 * Empty Post
	 *
	 * Run your stuff here if posts empty
	 * Or see Twentysixteen theme page.php
	 * get_template_part( 'template-parts/content', 'none' );
	 */
endif;
wp_reset_query(); // Restore the $wp_query and global post data to the original main query.

We using get_page_link on paging arguments code instead of get_pagenum_link function, it just to making work with main loop if using post page ( wp_link_pages ~ <--nextpage--> ) for your content. I think there are better clean approach than this, but.. ah, let’s go ready to rumble.

UPDATE: April 08, 2016

  • Fix pagination if set in front page

 Share

Menampilkan editor TinyMCE di front-end tanpa wp_editor

Bagaimana jika kita ingin menampilkan editor dengan memanfaatkan langsung fitur TinyMCE yang digunakan oleh wp_editor.

Dengan function wp_editor Anda akan dengan mudah untuk menampilkan editor yang sama dengan editor postingan admin. Bagaimana jika kita ingin menampilkan hal yang sama dengan memanfaatkan langsung fitur TinyMCE yang digunakan oleh wp_editor?

Cara ini sudah saya terapkan di beberapa plugin private dan sudah saya share di WPSE.

Kode HTML sederhana textarea

Kode ini bisa Anda tempatkan di page situs Anda.

<textarea id="textarea_id_element"></textarea>

Kode PHP dan settingan TinyMCE

Dengan menggunakan function jv_editor_tinymce kita akan menempatkan kode js settingan tinyMCE di bagian footer theme. Pastikan Anda mengubah id name textrea dimana Anda akan menempatkan tinyMCE editor.

add_action( 'wp_footer', 'jv_editor_tinymce' );
function jv_editor_tinymce()
{ ?>
<script type="text/javascript">
if ( undefined !== window.jQuery ) {
	jQuery( document ).ready( function( $ ) {
		tinymce.init( {
			mode : "exact",
			elements : 'textarea_id_element', //your id name textarea element
			theme: "modern",
			skin: "lightgray",
			menubar : false,
			statusbar : false,
			toolbar: [
				"bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | undo redo"
			],
			plugins : "paste",
			paste_auto_cleanup_on_paste : true,
			paste_postprocess : function( pl, o ) {
				o.node.innerHTML = o.node.innerHTML.replace( /&nbsp;+/ig, " " );
			}
		} );
	} );
}
</script>
	<?php
}

Kode JS TinyMCE WordPress

add_action( 'wp_enqueue_scripts', 'jv_enqueue_scripts' );
function jv_enqueue_scripts()
{
	wp_enqueue_script( 'tinymce_js', includes_url( 'js/tinymce/' ) . 'wp-tinymce.php', array( 'jquery' ), false, true );
}
Tampilan editor TinyMCE
Tampilan editor TinyMCE dengan menggunakan theme TwentySixteen.

Tutorial ini hanya sekedar dasar untuk menampilkan editor tinyMCE, untuk menggunakannya dalam hal mengirimkan data layaknya postingan, Anda membutuhkan form, tombol submit dan function untuk mengevaluasi data yang dikirim. Semoga bermanfaat.


 Share

Mendapatkan jumlah dan membatasi kata dalam postingan WordPress

Jika Anda menggunakan Shortcode dalam postingan, terkadang untuk medapatkan jumlah dan membatasi kata dalam postingan WordPress dengan tepat, kita agak kesulitan. Berikut ini adalah function yang bisa Anda tambahkan dalam file functions.php theme Anda, dalam kode sudah diberikan penjelasan dan cara penggunaan.

add_filter( 'wp_trim_words', 'jv_trim_words', 10, 4 );
/* Trims text to a certain number of words.
 * 
 * Kepp shortcode if exist in text.
 * Combination function of strip_shortcodes and wp_trim_words
 * Default $num_words = 55
 *
 ** USAGE
 ** Using directly
 ** jv_trim_words( $text, 56 )
 ** jv_trim_words( $text, 56, null, false, false, true ) - return array
 ** Shortcode hidden if $num_words is not set or if set with value = 55 with 4 arguments
 **
 ** Use wp_trim_words
 ** wp_trim_words( $text, $num_words = 56 )
 ** Fire wp_trim_words
 ** Shortcode hidden if $num_words is not set or $num_words = 55
 ** Position always in bottom
 ** add_filter( 'wp_trim_words', 'jv_trim_words', 10, 4 );
 *
 * @param  string  $text             Text to trim.
 * @param  int     $num_words        The number of words to trim the text to. Default 5.
 * @param  string  $more             An optional string to append to the end of the trimmed text, e.g. &hellip;.
 * @param  string  $original_content The text before it was trimmed.
 * @param  string  $pos              Shortcode Position. You can set 'top' value if using directly
 * @param  boolean $count            Get word count
 * @return string  The text after the filter witch $num_words
 * @return array   If using directly and parameter $count set to true
 */
function jv_trim_words( $text, $num_words = 55, $more = null, $original_content = false, $pos = false, $count = false )
{
	if ( null === $more)
		$more = ' ' . '[&hellip;]';
	
	$shortcode = $strip_shortcode = true;
	
	if ( ! $original_content )
		$original_content = $text;
	
	$text = $original_content;
	
	/* Check existing shortcode
	 *
	 */
	if ( false === strpos( $text, '[' ) )
		$strip_shortcode = false;
	
	global $shortcode_tags;
	
	if ( empty( $shortcode_tags ) || ! is_array( $shortcode_tags ) )
		$strip_shortcode = false;
	
	/* Strip content from shortcode
	 *
	 */
	if ( $strip_shortcode )
	{
		preg_match_all( '@\[([^<>&/\[\]\x00-\x20=]++)@', $text, $matches );
		$tagnames = array_intersect( array_keys( $shortcode_tags ), $matches[1] );
		
		if ( ! empty( $tagnames ) )
		{
			$text = do_shortcodes_in_html_tags( $text, true, $tagnames );
			$pattern = get_shortcode_regex( $tagnames );
			preg_match_all( "/$pattern/", $text, $match );
			if ( ! empty( $match[0] ) && is_array( $match[0] ) )
			{
				$shortcode = '';
				$length    = count( $match[0] );
				for ( $i = 0 ; $i < $length; $i++ )
					$shortcode .= do_shortcode( $match[0][ $i ] ); //match shortcode
			}
			
			$text = preg_replace_callback( "/$pattern/", 'strip_shortcode_tag', $text );
			$text = unescape_invalid_shortcodes( $text );
		}
	}
	
	/* Hide shortcode
	 * Base on count function arguments
	 *
	 */
	if ( func_num_args() == 1 || ( func_num_args() == 4 && 55 == $num_words ) )
		 $shortcode = '';
	 
	/* Split content into array words
	 *
	 */
	$text = wp_strip_all_tags( $text );
	
	/*
	 * translators: If your word count is based on single characters (e.g. East Asian characters),
	 * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
	 * Do not translate into your own language.
	 */
	if ( strpos( _x( 'words', 'Word count type. Do not translate!' ), 'characters' ) === 0 && preg_match( '/^utf\-?8$/i', get_option( 'blog_charset' ) ) )
	{
		$text = trim( preg_replace( "/[\n\r\t ]+/", ' ', $text ), ' ' );
		preg_match_all( '/./u', $text, $words_array );
		$limit_words_array = array_slice( $words_array[0], 0, $num_words + 1 );
		$full_words_array  = $words_array[0];
		$sep = '';
	}
	else
	{
		$limit_words_array = preg_split( "/[\n\r\t ]+/", $text, $num_words + 1, PREG_SPLIT_NO_EMPTY );
		$full_words_array  = explode( ' ', preg_replace( "/[\n\r\t ]+/", ' ', $text ) );
		$sep = ' ';
	}
	
	/* Check word count base on $num_words
	 *
	 */
	$word_count = count( $full_words_array );
	if ( $word_count >= $num_words )
	{
		array_pop( $limit_words_array );
		$text  = implode( $sep, $limit_words_array );
		$text .= $more;
		
		/* keep shortcode if exists and set position ( top or bottom text )
		 *
		 */
		switch( $pos )
		{
			case 'top' :
				$text = $shortcode . $text;
				break;
			
			default :
				$text .= $shortcode;
				break;
		}
	}
	else
	{
		$text = apply_filters( 'the_content', $original_content );
	}
	
	if ( $count )
		return array(
			'text'  => $text,
			'count' => $word_count
		);
	
	return $text; //output
}

Cara kerja function ini sama dengan function the_excerpt atau get_the_excerpt, hanya saja kita tetap menampilkan shortcode ketika postingan melebihi batas kata yang kita tentukan. Kode shortcode dan kode html tidak dihitung.

Kode ini juga di sini Trim content and limit with certain count word.


 Share

Modifikasi Kolom Komentar WordPress Menjadi WYSIWYG Editor

Cara merubah kolom komentar blog WordPress menjadi bentuk WYSIWYG Editor tanpa menggunakan plugin.

Tanpa harus menggunakan plugin, Anda bisa memodifikasi sendiri kolom pesan atau komentar untuk blog WordPress Anda menjadi bentuk WYSIWYG Editor.

Modifikasi ini memanfaatkan function wp_editor dan menggunakan filter comment_form_defaults untuk menimpa kolom komentar yang lama. Berikut kode PHP yang harus Anda tambahkan di file functions.php theme Anda.

add_filter( 'comment_form_defaults','jv_comment_form');
function jv_comment_form( $args )
{
	$editor_id = "comment"; // element id of textarea comment field
	
	$settings  = array(
		'editor_height'    => 50, //column height
		'media_buttons'    => false,
		'textarea_name'    => $editor_id,
		'teeny'            => true,
		'tinymce'          => array(
			'resize'                => true,
			'wordpress_adv_hidden'  => true,
			'add_unload_trigger'    => true,
			'statusbar'             => true,
			'autoresize_min_height' => 50,
			'wp_autoresize_on'      => true,
			'toolbar1'              => 'bold,italic,bullist,numlist'
		),
		'quicktags' => array( 'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close' )
	);
	
	if ( function_exists( 'wp_editor' ) )
	{
		ob_start();
		
		wp_editor( '', $editor_id, $settings );
		
		$args['comment_field'] = ob_get_clean();
		
		return $args;
	}
}

Hasilnya seperti gambar berikut:

WP Editor Kolom Komentar
WP Editor Kolom Komentar

 Share

Extended Related Posts Plugin WordPress

Extended Related Posts adalah plugin untuk blog WordPress yang fungsinya menampilkan pos terkait yang relevan dan lebih baik.

Extended Related Posts (EXTRP) adalah plugin untuk blog WordPress yang fungsinya menampilkan pos terkait yang relevan dan lebih baik. Support dengan plugin Relevanssi untuk menampilkan related post sesuai algoritma plugin Relevanssi.

Fitur Plugin

  • Otomatis, tersedia pengaturan untuk tampilan di bawah postingan secara otomatis.
  • Excerpt, bentuk post excerpt/deskripsi tersedia dalam dua pilihan, default dan snippet.
  • Thumbnail, jika fitur ini diaktifkan, maka gambar diambil otomatis berdasarkan feature image, gambar dari pos, gambar pertama, dan jika tidak gambar dalam pos, maka akan tampil gambar default. Anda dapat menggunakan gambar default Anda sendiri, selain yang telah disediakan oleh plugin ini. Tersedia juga pilihan jika ingin mengambil gambar dengan url eksternal yang dalam pos, jika pos tersebut tidak memiliki gambar selain gambar eksternal. Ukuran thumbnail akan berubah secara otomatis sesuai dengan pengaturan ukuran thumbnail Anda dan Anda juga dapat menambahkan dengan ukuran yang baru.
  • Style, tersedia 7 jenis model tampilan related post.
  • Highlight keyword, memberikan sorotan pada kata kunci yang terdapat dalam deskripsi pos, tersedia 7 pilihan.
  • Widgets, tersedia pengaturan dalam widget untuk ditampilkan di sidebar situs Anda.
  • Shortcode Generator, Anda tidak perlu mengetikkan satu persatu parameter yang akan ditambahkan dalam shortcode related post. Dengan Shortcode Generator, Anda hanya memilih parameter dan nilainya untuk membuat shortcode sekaligus Kode PHP untuk dipasang di post area, widget atau di theme.
  • Kode PHP related post, jika theme Anda tidak memungkinkan untuk menampilkan related post secara otomatis, tersedia kode PHP yang dihasilkan dengan menggunakan Shortcode Generator.
  • Algoritma, plugin ini mencari pos yang berkaitan berdasarkan judul atau konten postingan, jika tidak ada, maka secara otomatis akan mencari berdasarkan kategori, tag, dan tiap kata dalam judul pos. Plugin Extended Related Posts dapat didukung oleh plugin Relevanssi untuk menampilkan pos terkait sesuai algoritma plugin Relevanssi.
  • Stopwords Filter, filter kata kunci yang tidak diinginkan untuk menampilkan pos terkait yang lebih relevan.
  • Caching, fitur ini untuk memberikan page load dan performa situs yang lebih baik dalam menampilkan pos terkait. Mekanisme cache sifatnya transient, dan tersimpan di database. Tersedia penjadwalan dan tombol untuk menghapus cache.
  • Multi-language, saat ini masih tersedia 2 bahasa, yaitu bahasa Inggris dan Indonesia.
  • Automatic update, update plugin dilakukan via GitHub. Sekarang tersedia di repositori plugin WordPress.

Screenshot plugin

General Settings
General Settings

Thumbnail Settings
Thumbnail Settings
Additional Settings
Additional Settings
Shortcode Generator
Shortcode Generator
Widget Settings
Widget Settings

Filter Hooks

Plugin EXTRP ( Extended Related Posts ) menyediakan beberapa fungsi filter hook untuk memodifikasi plugin ini.

extrp_capability_filter( $option )
extrp_limit_count_id( $limit )
extrp_wp_query( $args )
extrp_get_the_post_thumbnail( $get_attachment_link, $post_id, $size , $crop , $img_class )
extrp_default_settings( $args )

Update 24 Oktober 2015
Download Extended Related Posts
https://wordpress.org/plugins/extended-related-posts/
Please update your plugin via WordPress.


 Share

Cara mudah redirect header PHP query WordPress

Cara mudah redirect halaman blog WordPress bisa diterapkan di htaccess atau dengan function header PHP berikut.

Cara mudah melakukan redirect halaman blog WordPress bisa diterapkan di htaccess atau dengan menggunakan function redirect header PHP berikut. Pasang di file functions.php theme Anda, and save it:

// change global search rules search page, paged and feed
add_action( 'init', 'jv_change_search_base_wp' );
function jv_change_search_base_wp()
{
    global $wp_rewrite;
	
	$search_base = 'topic'; // search_base
	
	if ( $wp_rewrite->search_base != $search_base )
	{
		$wp_rewrite->search_base      = $search_base;
		$wp_rewrite->search_structure = $wp_rewrite->search_base . '/%search%';
	}
	
    return $wp_rewrite;
}

// adding a new rule for empty search query
add_filter( 'search_rewrite_rules', 'jv_additional_search_rewrite_rules', 10, 1 );
function jv_additional_search_rewrite_rules( $rules )
{
	global $wp_rewrite;
	
	$new_rules = array(
        user_trailingslashit( $wp_rewrite->search_base ) . '?$' => 'index.php?s=' . $wp_rewrite->preg_index(1),
    );
	
    $rules = $rules + $new_rules;
	
    return $rules;
}

// flush_rules() if our rules are not yet included
add_action( 'wp_loaded', 'jv_flush_rules' );
function jv_flush_rules()
{
	global $wp_rewrite;
	
	$rules       = get_option( 'rewrite_rules' );
	$search_base = 'topic';  // search_base
	if ( ! isset( $rules[ $search_base . '/(.+)/?$'] ) )
	   	$wp_rewrite->flush_rules();
}

// redirect ?s= to search base
add_action( 'template_redirect', 'jv_template_redirect' );
function jv_template_redirect()
{
	global $wp_rewrite;
	
	if ( is_search() && isset ( $_GET['s'] )  )
	{
		$s         = sanitize_text_field( $_GET['s'] ); // or get_query_var( 's' )
		$location  = '/';
		$location .= trailingslashit( $wp_rewrite->search_base );
		$location .= ( ! empty ( $s ) ) ? user_trailingslashit( urlencode( $s ) ) : '';
		$location  = home_url( $location );
		wp_safe_redirect( $location, 301 );
		exit;
	}
}

Kode ini hanya untuk me-redirect url search default, dan khusus function wp_redirect bisa Anda terapkan pada berbagai parameter query atau redirect halaman tertentu. Semoga bermanfaat.

Update 30-03-2016
Fix flush rules
Tidak direkomendasikan untuk mengutak-atik core file WordPress


 Share

Exclude admin di recent comments widget WordPress

Cara menghilangkan komentar administrator (exclude admin) di recent comments widget blog WordPress tanpa menggunakan plugin.

Bagaimana cara supaya administrator atau owner yang komentar di blognya sendiri tidak muncul (exclude) di recent comments widget blog WordPress?. Tanpa harus menggunakan plugin tambahan, Anda bisa memasang function berikut di file functions.php theme WordPress Anda.

add_filter('widget_comments_args', '_jv_filter_recent_comments_widget');

function _jv_filter_recent_comments_widget(){
	// get data from database table wp_options with option_name 'widget_recent-comments'
	$instance = array_shift(get_option('widget_recent-comments'));
	$number = absint($instance['number']);
	$args = array(
		'number' => $number,
		'status'  => 'approve',
		'post_status' => 'publish',
		'author__not_in' => 1, // '1' is user id of administrator/owner
        );
	return $args;
}

Save pekerjaan Anda and see the result.

Jadi, kecuali owner blog, para pengunjung lain yang komentar di blog Anda tetap ada di recent comments (komentar terbaru) widget.


 Share