ساخت صفحات دینامیک و پویا شخصی در وردپرس فارسی به همراه آموزش تصویری و قدم به قدم به همراه کدها و مثال های فارسی

ساخت صفحات دینامیک و پویا شخصی در وردپرس فارسی – بخش اول

صفحه دینامیک وردپرس یکی از عال ترین صفحات نمایش دهنده وب هستند. شما می توانید از آن ها کاربرد متفاوتی داشته باشید.

محدودیت صفحات غیر پویا یا استاتیک مانع شما است تا سایت ایده آل داشته باشید چون شما نمیتوانید آن ها را تغییر دهید و یا ویرایش نمایید. در این آموزش ما به شما نشان می دهیم که چگونه صفحات استایک را به پویا یا یک صفحه اختصاصی بسازید. من در این آموزش چگونه یک صفحه استاندارد با استفاده از پوسته کودک را آموزش می دهم . در نهایت ساخت صفحات پویا و حتی ساخت فیلدهای اختصاصی برای آن ها می پردازیم و مباحث پیشرفته مانند نحوه اختصاص صفحه قالب به انواع پست سفارشی را پوشش میدهیم.

آیا می خواهید با ما همراه شوید؟

برای همراهی با این مجموعه آموزش، شما یک سایت وردپرس با دسترسی مدیر نیاز دارند. تا کنون ساده ترین راه برای انجام این کار استفاده از یک محیط لوکال است. ویرایشگر متن اختصاصی نیز مفید است اما لازم نیست.

اگر شما در حال توسعه وردپرس از طریق یک سرور از راه دور باشید و سپس شما باید قادر به ویرایش فایل های تم از طریق مدیریت وردپرس، و یا ویرایش فایل های لوکال و استفاده از نرم افزار FTP به آنها انتقال به سرور شوید. به خاطر سادگی، من فرض کنیم که شما در حال کار با وردپرس به صورت لوکال در ادامه  این آموزش هستید.

برای پیاده سازی قالب صفحه ما، من از یک تم کودک برای قالب پدر Twenty Seventeen  استفاده می کنم، که (در زمان نوشتن این مقاله) از تم پیش فرض وردپرس است.

شما می توانید یک تم کودک بر اساس موضوعی که ترجیح می دهید استفاده کنید، اما شما نیاز به تغییر برخی از کد آن برای کار یکپارچه با موضوع خاص خود را دارید.

 صفحه قالب وردپرس

قبل از یادگیری چگونه قالب صفحه قابل انعطاف تر، اجازه دهید بیش از برخی از اطلاعات اولیه.

وردپرس با استفاده از یک سلسله مراتب از قالب  template hierarchy   که الگو کار صفحه را بنیان گزاری می کند. در اغلب موارد برای صفحات page.php استفاده شده است اما می تواند متفاوت باشد و در حالت مشاهده یک صفحه با یک ID یا پسوند خاص است. با این حال، اگر شما یک قالب صفحه برای یک صفحه خاص انتخاب کنید، این همیشه در اولویت استفاده قرار گیرد، که باعث می شود برای سفارشی هر صفحه با استفاده از یک قالب صفحه آسان شود.

در اینجا برخی از نمونه های معمولی استفاده شده در  قالب صفحه وردپرس عبارتند از:

• فرم تماس
• میزبانی وب
• پرسش و پاسخ های متداول
• سفارشی 404 صفحه
• سفارشی ورود به صفحه
• نقشه سایت
• عرض کامل صفحه
• پست های وبلاگ صفحه
• ابزارک صفحه
• و خیلی بیشتر…

من می توانم ، اما شما به ایده نیاز دارید. صفحه قالب باحال است! شما می توانید آنها را برای تقریبا هر چیزی استفاده کنید.اگر از وردپرس برای مدتی استفاده میکنید بسیار محتمل است شما در حال حاضر  یک یا بیشتر از نمونه های فوق را دیده باشید.

صفحه قالب  مفید است زیرا آنها برای کنترل کامل بر تمام صفحه هستند. می توانید رها کنید سربرگ، پاورقی، و / یا ستون های فرعی. این یکی از دلایلی است که چرا صفحه تمام عرض قالب اینقدر رایج است زیرا آن را بسیار آسان به دستکاری ستون های فرعی از طریق یک قالب صفحه می کند.

برای دیدن تمام قالب صفحه در دسترس ، به ویرایشگر وردپرس صفحه بروید و دسترسی به Template  از طریق جعبه متا کشویی Page Templates. به سادگی قالب صفحه را انتخاب کنید و پس از آن صفحه به روز شده است،دفعه بعد که صفحه مشاهده شده است قابل مشاهده خواهد بود.

اضافه کردن صفحه قالب از طریق یک تم کودک

همانطور که در بالا ذکر شده، ما باید  از یک تم کودک سفارشی وردپرس برای اجرای تمام صفحه قالب در سراسر این آموزش استفاده می کنیم. من  با یک قالب کودک و صفحه  پایه، و سپس پیچیدگی بیشتر به آن اضافه کنید که ما به همراه باشید.

کل فرآیند ساخت صفحات دینامیک و پویا شخصی در وردپرس فارسی گام به گام خواه بود، پس نگران نباشید اگر شما با استفاده از تم کودک و یا صفحه قالب آشنا نیستید. تا پایان آموزش باشید.

ایده اصلی از تم های کودک این است که آنها به شما اجازه سفارشی کردن ظاهر و از تم فعلی خود را (به نام موضوع پدر و مادر) میدهد بدون دستکاری ذر قالب پدر و مادر است.

اگر کد به طور مستقیم به موضوع پدر و مادر اضافه شده است پس از آن تمام سفارشی رونویسی خواهد شد و  در طول یک به روز رسانی تم برنامه ریزی شده از دست رفته. این نکته مهم است که هر موضوع به خوبی نگهداری خواهد شد به طور منظم به روز شود. برای اطلاعات بیشتر در مورد تم های کودک، من توصیه می گرفتن یک نگاهی به اسناد رسمی بندازید.

جالب است توجه داشته باشید که آن را از لحاظ فنی امکان استفاده از یک پلاگین وردپرس برای اضافه کردن قالب صفحه هست، که آن را بسیار ساده تر از استفاده یک قالب کودک می کند. اما من نمی خواهم به همه چیز پیچیده و بی ارزش با کد غیر اصولی وقت شما را بگیرم ، بنابراین من با تم های کودک برای پیاده سازی قالب صفحه ما  است.

بیاید شروع کنیم!

خوب، پس به اندازه کافی نظریه دادیم . اجازه دهیدیک قالب صفحه اولیه ایجاد کنیم !  پوسته کودک Twenty Seventeen  که به عنوان  قالب صفحه ما عمل می کنند قرار گرفته است، بنابراین ما نیاز به ایجاد قالب کودک برای آن هستیم.

باز کردن پوشه تم و ایجاد یک پوشه جدید برای قالب فرزند خود . با توجه به وردپرس بهترین شیوه، توصیه می شود که شما نام پوشه تم کودک همان نام پدر و مادر آن را بر اساساصلاح  ‘-Child باشد. به عنوان پوشه تم پدر و مادر ما به نام twentyseventeen، نام پوشه قالب فرزند twentyseventeen-child  شود. در داخل این پوشه جدید، ایجاد یک فایل به نام style.cssو خط زیر را در یالای آن اضافه نمایید.

/*
 Theme Name: Twenty Seventeen Child
 Description: Twenty Seventeen Child Theme
 Author: MarketFarsi
 Template: twentyseventeen
 Version: 0.1
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: twenty-seventeen-child
*/

خب الان لازم است تمامی استایل ها پوسته پدر ومادر را وارد پوسته کودک نماییم. که به آن امپورت سازی می گویند import@   در داخل فولد پوسته کودک فایل با این نام  functions.php و پسوند php می سازیم با استفاده از ادیتور. و در آن کد های زیر را درج می نماییم.

<?php
 
/**
 * Twenty Seventeen child theme class.
 *
 * DPT = D[ynamic] P[age] T[emplates].
 */
class DPT_Twenty_Seventeen_Child {
 
 /**
 * Register hooks.
 */
 public function init() {
 // ...
 }
}
 
$ts_child_theme = new DPT_Twenty_Seventeen_Child();
$ts_child_theme->init();

نکته : بستن php در اینجا ضرورت ندارد ملی شما می توانید آن را با علامت ببندید <? 

خب الان قلاب پوسته والدین را درج می کنیم همچنین آدرس استایل css را وارد سازی یا امپورت می کنیم با درج کد زیر

<?php
 
/**
 * Register hooks.
 */
public function init() {
 add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_parent_theme_styles' ) );
}
 
/* Enqueue parent theme styles. */
public function enqueue_parent_theme_styles() {
 wp_enqueue_style( 'twenty-seventeen-css', get_template_directory_uri() . '/style.css' );
}

تغییرات را دخیره نمایید و قالب کودک را از بخش قالب فعال نمایید. با فعال شدن آن برای تست فایل استایل درون پوسته کودک را ویرایش نمایید style.css  برای مثال کد زیر را قرار دهید. اگر فایل موجود نباشد از پوسته والدین آن را کپی نمایید یا جدید بسازید.

* { color: red !important; }

تصویر بالا مشاهده خواهد شد اگر کل نوشته ها قرمر رنگ شد یعنی فایل کودک با والدین ادغام است. البته برای ادامه کد بالای را پاک نمایید.

افزودن اولین قالب ما

شما می توانید هر جای دلخواهی در فولدر قالب صفحات قالب را دخیره نمایید در روت یا درون فولدر فرقی ندارد ولی سعی نمایید از کارکترهای ناشناس یا علایم مانند اعشار و … در نام گزاری فلودر استفاده ننمایید. وردپرس قادر به شناسایی آن نیست. ما در این آموزش فولدری با نام page-templates برای دخیره صفحات قالب استفاده خواهیم کرد.

الان شروع کنیمو اولین صفحه جدید قالب را می سازیم. راه استاندارد آن کپی page.php از فولدر پوسته پدر و مادر قالب است و قرار دادن آن  در پوسته کودک است. شما میتوانید هر نامی روی آن قرار دهید مانند page-item و page-template-book ولی ما برای سهولت نام test-page-template.php را قرار می دهیم.

پس از آنکه فایل page.php را کپی و آن را به test-page-template.php تغییر نام دادید. فولدر پوسته کودک شما بایستی به صورت زیر باشد.

فایل test-page-template.php را باز کنید و عبارت کامنت زیر را قرار دهید.

<?php
 
/**
 * Template Name: Test Page Template
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */

این بخش خیلی مهم است تا کامنت به وردپرس بگوید این فایل را به عنوان صفحه قالب بشناسد. تا آن را به لیست در ادیتور اضافه نمایید.

صفحه قالب تمام عرض full page template باید به صورت زیر باشد.

<?php
/**
 * Template Name: Test Page Template
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */
 
get_header(); ?>
 
<div class="wrap">
 <div id="primary" class="content-area">
 <main id="main" class="site-main" role="main">
 
 <?php
 while ( have_posts() ) : the_post();
 
 get_template_part( 'template-parts/page/content', 'page' );
 
 // If comments are open or we have at least one comment, load up the comment template.
 if ( comments_open() || get_comments_number() ) :
 comments_template();
 endif;
 
 endwhile; // End of the loop.
 ?>
 
 </main><!-- #main -->
 </div><!-- #primary -->
</div><!-- .wrap -->
 
<?php get_footer();

اجازه دهید صفحه قالب را تست نماییم به ویرایش یک صفحه بروید یا یک صفحه جدید از مدیریت وردپرس بسازید بایذ نوار لغزان نام صفحه شما باشد مانند تصویر زیر.

به دلیل اینکه ما فایل را کپی کردیم و تغییری ایجاد نشده الان برای ما این فایل اهمیت ندارند و ما نیاز به شخصی سازی آن داریم پس به داخل لوپ while و یا همان حلقه فایل می رویم و کل عبارت آن را پاک و عبارت شخصی سازی خود This is our custom page template! را درج می کنیم.

<?php
while ( have_posts() ) : the_post();
 echo "<p>This is our custom page template!</p>";
endwhile; // End of the loop.

آن را دخیره می کنیم و تغییرات را در زیر مشاهده می کنیم.

نکته: اگر شما عبارت شخصی سازی را مشاهده نکرید بایستی قالب که ساختی رو برای صفحه انتخاب نمایید و آن را با آن قالب ذخیره نمایید.

الان بیاید مطما شویم صفحه ما شخصی سازی بیشتری شود پس ادرس نقشه سایت زیر را به جای متن قبلی قرار میدهیم.

<?php
while ( have_posts() ) : the_post();
 echo "<h2>Sitemap</h2>";
 echo "<ul>" . wp_list_pages( array( 'title_li' => '' ) ) . "</ul>";
endwhile; // End of the loop.

نتیجه زیر حاصل خواهد شد.

این راحتترین راه است که ببینید چگونه صفحات سخصی سازی شده عمل می کنند.

این پایان آموزش در بخش اول می باشد.

<?php
add_action( 'load-post.php', array( $this, 'page_template_meta_box' ) );
add_action( 'load-post-new.php', array( $this, 'page_template_meta_box' ) );
add_action( 'save_post', array( $this, 'save_page_template_meta' ), 10, 2 );
}

/* Add meta box hook. */
public function page_template_meta_box() {
 add_action( 'add_meta_boxes', array( $this, 'add_page_template_meta_box' ) );
}

/* Register meta box. */
public function add_page_template_meta_box() {
 add_meta_box(
 'page-template-meta-box',
 esc_html__( 'Page Template Meta Box', 'twenty-seventeen-child' ),
 array( $this, 'display_page_template_meta_box' ),
 'page',
 'side',
 'default'
 );
}

/* Render meta box on the page editor. */
public function display_page_template_meta_box($object) { 
 wp_nonce_field( basename( __FILE__ ), 'page_template_meta_box_nonce' );
}

من نمی خواهیم اینجا به جزئیات بیش از حد در مورد جعبه های متا وردپرس برویم ، این کار یک آموزش کامل دارد، اما توجه داشته باشید نکات زیر را در مورد کدهایی که در بالا افزودیم مهم هستند:

• ()page_template_meta_box و ()add_page_template_meta_box کلاس و هوک های ثبت نام متا باکس یا همان جعبه متا در وردپرس هستند.
• در ()add_page_template_meta_boxبا 'page'پارامتر مشخص میکند که این جعبه متا فقط در نوع ویرایشگر صفحه در مدیریت وردپرس نمایش داده شود.
• ()display_page_template_meta_box با روش کلاس ارائه متا باکس و مجموعه های  nonce به امن تر کردن کنترل های فرم کمک می کنند.

اگر همه چیز خوب پیش برود، شما هم اکنون باید یک جعبه متا نمایش داده شده در ویرایشگر صفحه خود مانند تصویر زیر نداشته باشید.

که الان خالی است که نیاز به اضافه کردن برخی کنترل و ابزار داریم.

اضافه کردن کنترل های سفارشی

اگر شما از بالا به یاد داشته باشید، ما قصد داریم  یک جعبه متن، متن، چک باکس، دکمه های رادیویی، جعبه کنترل به جعبه متا اضافه کنیم. شروع با اضافه کردن کد زیر به ()display_page_template_meta_boxروش زیر تابع nonce می پردازیم.

<?php
$text = get_post_meta( $object->ID, 'page_template_text', true );
$textarea = get_post_meta( $object->ID, 'page_template_textarea', true );
$checkbox = get_post_meta( $object->ID, 'page_template_chk', true );
$radio = get_post_meta( $object->ID, 'page_template_radio', true );
$select = get_post_meta( $object->ID, 'page_template_select', true );

?>
 <div>
 <p>
 <label for="page-template-text"><?php _e( "Text Control", 'twenty-seventeen-child' ); ?></label><br>
 <input class="widefat" type="text" name="page-template-text" id="page-template-text" value="<?php echo esc_attr( $text ); ?>" />
 </p>
 
 <p>
 <label for="page-template-textarea"><?php _e( "Textarea Control", 'twenty-seventeen-child' ); ?></label><br>
 <textarea rows="5" class="widefat" name="page-template-textarea" id="page-template-textarea"><?php echo esc_attr( $textarea ); ?></textarea>
 </p>
 
 <p>
 <input type="checkbox" name="page-template-chk" id="page-template-chk" value="1" <?php checked($checkbox, true); ?> />&nbsp;<label for="page-template-chk"><?php _e( "Checkbox Control", 'twenty-seventeen-child' ); ?></label><br>
 </p>
 
 <p>
 <label for="page-template-align"><?php _e( "Radio Button Control", 'twenty-seventeen-child' ); ?></label><br>
 <input type="radio" name="page-template-align" id="rdo-left" value="left" <?php checked( $radio, 'left' ); ?> ><label for="rdo-left"><?php _e( 'Left', 'twenty-seventeen-child' ); ?></label><br>
 <input type="radio" name="page-template-align" id="rdo-right" value="right" <?php checked( $radio, 'right' ); ?> ><label for="rdo-right"><?php _e( 'Right', 'twenty-seventeen-child' ); ?></label><br>
 <input type="radio" name="page-template-align" id="rdo-center" value="center" <?php checked( $radio, 'center' ); ?> ><label for="rdo-center"><?php _e( 'Center', 'twenty-seventeen-child' ); ?></label><br>
 </p>
 
 <p>
 <label for="page-template-select">Dropdown</label>
 <select name="page-template-select" class="widefat">
 <option value='one' <?php selected( 'one', $select ); ?>><?php _e( 'One', 'twenty-seventeen-child' ); ?></option>
 <option value='two' <?php selected( 'two', $select ); ?>><?php _e( 'Two', 'twenty-seventeen-child' ); ?></option>
 <option value='three' <?php selected( 'three', $select ); ?>><?php _e( 'Three', 'twenty-seventeen-child' ); ?></option>
 <option value='four' <?php selected( 'four', $select ); ?>><?php _e( 'Four', 'twenty-seventeen-child' ); ?></option>
 </select>
 </p>
</div><?php

<?php
/* Save meta box data. */
public function save_page_template_meta( $post_id, $post ) {
 
 if ( ! ( isset( $_POST[ 'page_template_meta_box_nonce' ] ) && wp_verify_nonce( $_POST[ 'page_template_meta_box_nonce' ], basename( __FILE__ ) ) ) ) {
 return $post_id;
 }
 
 if ( ! current_user_can( 'edit_post', $post_id ) ) {
 return $post_id;
 }
 
 if( 'page' != $post->post_type ) {
 return $post_id;
 }
 
 $page_template_text_value = isset( $_POST[ 'page-template-text' ] ) ? $_POST[ 'page-template-text' ] : '';
 update_post_meta( $post_id, 'page_template_text', $page_template_text_value );
 
 $page_template_textarea_value = isset( $_POST[ 'page-template-textarea' ] ) ? $_POST[ 'page-template-textarea' ] : '';
 update_post_meta( $post_id, 'page_template_textarea', $page_template_textarea_value );
 
 $page_template_chk_value = isset( $_POST[ 'page-template-chk' ] ) ? $_POST[ 'page-template-chk' ] : '';
 update_post_meta( $post_id, 'page_template_chk', $page_template_chk_value );
 
 $page_template_radio_value = isset( $_POST[ 'page-template-align' ] ) ? $_POST[ 'page-template-align' ] : '';
 update_post_meta( $post_id, 'page_template_radio', $page_template_radio_value );
 
 $page_template_select_value = isset( $_POST[ 'page-template-select' ]) ? $_POST[ 'page-template-select' ] : '';
 update_post_meta( $post_id, 'page_template_select', $page_template_select_value );
}

()save_page_template_meta روش طبقه دسته  در داده های کنترل جعبه متا است. این تنها موجب ذخیره در داده ها جعبه متا با nonce تایید شده است می باشد، کاربران فعلی می توانید پست ها را ویرایش، و ما از صفحه ویرایشگر مدیر هم همینطور.

اگر این شرایط راضی هستید،  ما به استخراج داده ها برای هر کنترلی که در متغییر گلوبال ذخیره شده POST_$ می پردازیم. این متغیر در هر زمان یک فرم ارسال می شود تنظیم می شود.

در نهایت داده های متاباکس در پایگاه داده وردپرس با عنوان meta data دخیره خواهد شد.

خب با اضافه نمودن کنترل ها به قالب اختصاصی ما تصویر به شکل زیر خواهد شد.

متنی برای text box و textarea  وارد کنید ،  گزینه چک باکس check box را انتخاب نمایید، برای دکمه های رادیویی و جعبه انتخاب هم یکی را انتخاب کنید. الان روی به روز رسانی تغییرات کلیک نمایید تا ذخیرهشوند، و هنگامی که صفحه ویرایشگر شما بارگذاری شود ، کنترل جعبه متا شما باید اطلاعات وارد شده قبلی را نشان دهد.

کدهای کامل برای درج در functions.php  پوسته کودک در زیر است.

<?php
 
/**
 * Twenty Seventeen child theme class.
 *
 * DPT = D[ynamic] P[age] T[emplates].
 */
class DPT_Twenty_Seventeen_Child {
 
 /**
 * Register hooks.
 */
 public function init() {
 add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_parent_theme_styles' ) );
 add_action( 'load-post.php', array( $this, 'page_template_meta_box' ) );
 add_action( 'load-post-new.php', array( $this, 'page_template_meta_box' ) );
 add_action( 'save_post', array( $this, 'save_page_template_meta' ), 10, 2 );
 }
 
 /* Enqueue parent theme styles. */
 public function enqueue_parent_theme_styles() {
 wp_enqueue_style( 'twenty-seventeen-css', get_template_directory_uri() . '/style.css' );
 }
 
 /* Add meta box hook. */
 public function page_template_meta_box() {
 add_action( 'add_meta_boxes', array( $this, 'add_page_template_meta_box' ) );
 }
 
 /* Register meta box. */
 public function add_page_template_meta_box() {
 add_meta_box(
 'page-template-meta-box',
 esc_html__( 'Page Template Meta Box', 'twenty-seventeen-child' ),
 array( $this, 'display_page_template_meta_box' ),
 'page',
 'side',
 'default'
 );
 }
 
 /* Render meta box on the page editor. */
 public function display_page_template_meta_box( $object ) {
 
 wp_nonce_field( basename( __FILE__ ), 'page_template_meta_box_nonce' );
 
 $text = get_post_meta( $object->ID, 'page_template_text', true );
 $textarea = get_post_meta( $object->ID, 'page_template_textarea', true );
 $checkbox = get_post_meta( $object->ID, 'page_template_chk', true );
 $radio = get_post_meta( $object->ID, 'page_template_radio', true );
 $select = get_post_meta( $object->ID, 'page_template_select', true );
 ?>
 <div>
 <p>
 <label for="page-template-text"><?php _e( "Text Control", 'twenty-seventeen-child' ); ?></label><br>
 <input class="widefat" type="text" name="page-template-text" id="page-template-text" value="<?php echo esc_attr( $text ); ?>" />
 </p>
 
 <p>
 <label for="page-template-textarea"><?php _e( "Textarea Control", 'twenty-seventeen-child' ); ?></label><br>
 <textarea rows="5" class="widefat" name="page-template-textarea" id="page-template-textarea"><?php echo esc_attr( $textarea ); ?></textarea>
 </p>
 
 <p>
 <input type="checkbox" name="page-template-chk" id="page-template-chk" value="1" <?php checked($checkbox, true); ?> />&nbsp;<label for="page-template-chk"><?php _e( "Checkbox Control", 'twenty-seventeen-child' ); ?></label><br>
 </p>
 
 <p>
 <label for="page-template-align"><?php _e( "Radio Button Control", 'twenty-seventeen-child' ); ?></label><br>
 <input type="radio" name="page-template-align" id="rdo-left" value="left" <?php checked( $radio, 'left' ); ?> ><label for="rdo-left"><?php _e( 'Left', 'twenty-seventeen-child' ); ?></label><br>
 <input type="radio" name="page-template-align" id="rdo-right" value="right" <?php checked( $radio, 'right' ); ?> ><label for="rdo-right"><?php _e( 'Right', 'twenty-seventeen-child' ); ?></label><br>
 <input type="radio" name="page-template-align" id="rdo-center" value="center" <?php checked( $radio, 'center' ); ?> ><label for="rdo-center"><?php _e( 'Center', 'twenty-seventeen-child' ); ?></label><br>
 </p>
 
 <p>
 <label for="page-template-select">Dropdown</label>
 <select name="page-template-select" class="widefat">
 <option value='one' <?php selected( 'one', $select ); ?>><?php _e( 'One', 'twenty-seventeen-child' ); ?></option>
 <option value='two' <?php selected( 'two', $select ); ?>><?php _e( 'Two', 'twenty-seventeen-child' ); ?></option>
 <option value='three' <?php selected( 'three', $select ); ?>><?php _e( 'Three', 'twenty-seventeen-child' ); ?></option>
 <option value='four' <?php selected( 'four', $select ); ?>><?php _e( 'Four', 'twenty-seventeen-child' ); ?></option>
 </select>
 </p>
 </div><?php
 }
 
 /* Save meta box data. */
 public function save_page_template_meta( $post_id, $post ) {
 
 if ( ! ( isset( $_POST[ 'page_template_meta_box_nonce' ] ) && wp_verify_nonce( $_POST[ 'page_template_meta_box_nonce' ], basename( __FILE__ ) ) ) ) {
 return $post_id;
 }
 
 if ( ! current_user_can( 'edit_post', $post_id ) ) {
 return $post_id;
 }
 
 if( 'page' != $post->post_type ) {
 return $post_id;
 }
 
 $page_template_text_value = isset( $_POST[ 'page-template-text' ] ) ? $_POST[ 'page-template-text' ] : '';
 update_post_meta( $post_id, 'page_template_text', $page_template_text_value );
 
 $page_template_textarea_value = isset( $_POST[ 'page-template-textarea' ] ) ? $_POST[ 'page-template-textarea' ] : '';
 update_post_meta( $post_id, 'page_template_textarea', $page_template_textarea_value );
 
 $page_template_chk_value = isset( $_POST[ 'page-template-chk' ] ) ? $_POST[ 'page-template-chk' ] : '';
 update_post_meta( $post_id, 'page_template_chk', $page_template_chk_value );
 
 $page_template_radio_value = isset( $_POST[ 'page-template-align' ] ) ? $_POST[ 'page-template-align' ] : '';
 update_post_meta( $post_id, 'page_template_radio', $page_template_radio_value );
 
 $page_template_select_value = isset( $_POST[ 'page-template-select' ]) ? $_POST[ 'page-template-select' ] : '';
 update_post_meta( $post_id, 'page_template_select', $page_template_select_value );
 }
}
 
$ts_child_theme = new DPT_Twenty_Seventeen_Child();
$ts_child_theme->init();

آخرین قطعه پازل نمایش اطلاعات متاباکس ها در نمایه سایت برای مشاهده توسط بازدیدکنندگان سایت است. بازکردن فایل قالب test-page-template.php که در آموزش اول است و قرار دادن کد زیر به جای متن آن. پس کد های آن را با کدهای زیر به رورسانی می کنیم.

<?php
/**
 * Template Name: Test Page Template
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */
 
get_header(); ?>
 
<div class="wrap">
 <div id="primary" class="content-area">
 <main id="main" class="site-main" role="main">
 
 <?php
 while ( have_posts() ) : the_post();
 
 $text = get_post_meta( get_the_ID(), 'page_template_text', true );
 $textarea = get_post_meta( get_the_ID(), 'page_template_textarea', true );
 $checkbox = get_post_meta( get_the_ID(), 'page_template_chk', true );
 $radio = get_post_meta( get_the_ID(), 'page_template_radio', true );
 $select = get_post_meta( get_the_ID(), 'page_template_select', true );
 
 echo "<p>Text Box: " . $text . "</p>";
 echo "<p>Text Area: " . $textarea . "</p>";
 echo "<p>Checkbox: " . $checkbox . "</p>";
 echo "<p>Radio Buttons: " . $radio . "</p>";
 echo "<p>Dropdown: " . $select . "</p>";
 
 echo "<h2>Sitemap</h2>";
 echo "<ul>" . wp_list_pages( array( 'title_li' => '' ) ) . "</ul>";
 
 endwhile; // End of the loop.
 ?>
 
 </main><!-- #main -->
 </div><!-- #primary -->
</div><!-- .wrap -->
 
<?php get_footer();

اطمینات کنید Test Page Template انتخاب شده باشد و به عنوان صفحه در نمایه انتخاب شده باشد.

همانطور که می بینید، قالب صفحه در حال حاضر شامل مقادیر  برای کنترل جعبه متا در ویرایشگر صفحه تنظیم شده است. این  آموزش به عنوان مثال پایه در ساخت و ایجاد نمونه های مختلف از کار قالب صفحه پویا است که شما می توانید در پروژه های وردپرس خود را آن ها را استفاده است. برای مثال می توانید لینک دانلود یا لینک خرید را به جای متن متاباکس ها قرار دهید و با تغییر در مشخصصات متاباکس میتوانید توضیحات بیشتری از محصول یا پروژه خود قرار دهید

نتیجه

در این آموزش، ما چگونگی  ساخت یک قالب صفحه پویا را تحت پوشش قرار دادیم. در حال حاضر، حتی قالب پایه ما خیلی مفید است.

این پایان آموزش در بخش دوم می باشد.

در صورت نیاز به راهنمایی بیشتر درباره این آموزش و یا درخواست ، دیدگاه ، نظر میتوانید در قسمت درج دیدگاه در زیر متن خود را قرار دهید تا در اسرع وقت توسط گروه مارکت فارسی پاسخ داده شود.

Dynamic Page Templates in WordPress, Part 1

WordPress page templates are a great way to completely alter how particular web pages are displayed. You can use them to add a vast range of functionality to your site.

They do, however, have one limitation in that they are ‘static’ templates. You cannot customize them or affect their behavior in any way. You can only choose whether to enable a page template or not. By default, a page template will simply carry out a fixed function, e.g. display a sitemap, or remove the sidebar to display a full-width page.

In this tutorial series, I’ll be looking at how you can extend page templates to be more flexible, improving their functionality greatly. I’ll start by introducing how to create a standard page template via a child theme, before moving on to a more flexible approach where I’ll create a general-purpose dynamic page template.

Finally, I’ll show you three real-world examples of fully working dynamic page templates. I’ll also cover advanced topics such as how to assign page templates to custom post types.

Want to Follow Along?

To follow along with this tutorial series, you’ll need a WordPress site with admin access. By far the easiest way to do this is to use a local development environment. A dedicated text editor is also useful but not essential.

If you happen to be developing with WordPress via a remote server then you’ll need to be able to edit theme files via the WordPress admin, or edit files locally and use FTP software to transfer them back to the server. For the sake of simplicity, I’ll assume that you’re working with WordPress locally throughout the rest of this tutorial.

To implement our page templates, I’ll be using a child theme based on the Twenty Seventeen parent theme, which (at the time of writing) is the latest default WordPress theme. So if you are following along then it’s a good idea to have this installed before moving on.

You can use a child theme based on another parent theme if you prefer, but you’ll need to modify some of the code to make it work seamlessly with your particular theme. The basic method, though, is pretty much the same for any child theme.

WordPress Page Templates

Before learning how to make page templates more flexible, let’s go over some basic details.

WordPress uses a template hierarchy to decide which template renders the current page. The template used in most scenarios for pages is page.php but can be different if you’re viewing a page with a particular ID or slug. However, if you select a page template for a particular page, this will always be used in preference, which makes it very easy to customize any page using a page template.

Here are some typical examples of commonly used WordPress page templates:

• Contact Form
• Portfolios
• Frequently Asked Questions
• Custom 404 Page
• Custom Login Page
• Sitemap
• Full Width Page
• Blog Posts Page
• Widgetized Page
• And many more…

I could go on, but you get the idea. Page templates are cool! You can use them for almost anything.

If you’ve used WordPress for any length of time then it’s highly likely you’ve already come across one or more of the examples above. Most themes include page templates to complement theme functionality, and you can easily add your own via a child theme. I’ll be covering how to do this shortly.

Page templates are so useful because they give you complete control over the whole page. You can leave out the header, footer, and/or sidebars if you wish. This is one of the reasons why full-width page templates are so common because it’s very easy to manipulate the sidebars via a page template.

To see all currently available page templates, go to the WordPress page editor and access the Template drop down via the Page Templates meta box. Simply select the page template you want and, once the page has been updated, it will be visible the next time the page is viewed.

Adding Page Templates via a Child Theme

As mentioned above, we’ll be using a custom WordPress child theme to implement all page templates throughout this tutorial. I’ll start off with a basic child theme and page template, and then add more complexity to it as we go along.

The whole process will be covered step by step, so don’t worry if you’re not familiar with child themes and/or page templates. You will be by the end of the tutorial!

The basic idea behind child themes is that they allow you to customize the look and feel of your current theme (called a parent theme) in a way that won’t be affected when the parent theme is updated.

If code is added directly to the parent theme then all customizations will be overwritten and lost during a scheduled theme update. This is an important point as any well-maintained theme will be regularly updated. To find out more about child themes, I’d recommend taking a look at the official documentation.

It’s interesting to note that it’s technically possible to use a WordPress plugin to add page templates, but it’s much simpler to use a child theme. I don’t want to complicate things unnecessarily with extraneous code, so I’ll be sticking with child themes for our page template implementation.

Let’s Get Started!

Ok, so enough theory—let’s create our initial page template! It will be located in a custom Twenty Seventeen child theme which will act as our page template container, so we need to create the child theme first.

Open up your theme folder and create a new folder for your child theme. According to WordPress best practices, it’s recommended that you name the child theme folder the same as the parent theme it’s based on, amended with ‘-child’. As our parent theme folder is named twentyseventeen, name your child theme folder twentyseventeen-child. Inside this new folder, create a single file named style.css and add the following comment block at the top.

/*
 Theme Name:   Twenty Seventeen Child
 Description:  Twenty Seventeen Child Theme
 Author:       David Gwyer
 Template:     twentyseventeen
 Version:      0.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twenty-seventeen-child
*/

Inside the child theme root folder, create a functions.php file and add the following code to set up an empty class container. We’ll use this class for all our setup code.

<?php
 
/**
 * Twenty Seventeen child theme class.
 *
 * DPT = D[ynamic] P[age] T[emplates].
 */
class DPT_Twenty_Seventeen_Child {
 
    /**
     * Register hooks.
     */
    public function init() {
        // ...
    }
}
 
$ts_child_theme = new DPT_Twenty_Seventeen_Child();
$ts_child_theme->init();

Note: The closing PHP statement is not necessary, but you can add it if you prefer.

Now add a hook and callback to enqueue the Twenty Seventeen parent theme styles, rather than importing them directly inside the style.css file. Do this by adding two new class methods.

<?php
 
/**
 * Register hooks.
 */
public function init() {
    add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_parent_theme_styles' ) );
}
 
/* Enqueue parent theme styles. */
public function enqueue_parent_theme_styles() {
    wp_enqueue_style( 'twenty-seventeen-css', get_template_directory_uri() . '/style.css' );
}

* { color: red !important; }

Don’t forget to delete the test CSS before moving on. Now that the child theme is active, we can begin to implement our first page template.

Adding Our First Page Template

One thing is worth mentioning about where you store page templates inside your child theme. You can store the page templates either directly inside the root child theme folder or in a top-level folder. It doesn’t matter which one you choose; either location is fine.

However, if you have multiple page templates, you may decide to store them in a folder for organizational purposes. The folder name is unimportant, but it must be located directly inside the root child theme folder, otherwise WordPress won’t recognize your page templates. For this tutorial, I’ll be using a folder called page-templates.

Let’s now add a new page template to the child theme. The standard way to do this is to make a copy of the parent theme page.php theme template file and add it to your child theme. You can name the file anything you like, but I’d recommend including something that makes it recognizable as a page template. I’ll go with test-page-template.php.

Once you’ve copied the page.php file (and renamed it) to the page-templates folder, your child theme structure should now look like this:

Open up test-page-template.php and replace the comment block at the top of the file with the following.

<?php
 
/**
 * Template Name: Test Page Template
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */

This step is very important as the comment block tells WordPress to recognize the file as a page template and will add it to the list of available page templates on the page editor screen.

The full page template code should now look like this.

<?php
/**
 * Template Name: Test Page Template
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */
 
get_header(); ?>
 
<div class="wrap">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
 
            <?php
            while ( have_posts() ) : the_post();
 
                get_template_part( 'template-parts/page/content', 'page' );
 
                // If comments are open or we have at least one comment, load up the comment template.
                if ( comments_open() || get_comments_number() ) :
                    comments_template();
                endif;
 
            endwhile; // End of the loop.
            ?>
 
        </main><!-- #main -->
    </div><!-- #primary -->
</div><!-- .wrap -->
 
<?php get_footer();

Let’s test our page template. Go to the WordPress admin and edit any existing page, or create a new one. On the page editor screen, select the Template drop-down from the Page Attributes meta box to assign our page template to the current page.

Because we simply copied the parent theme page.php template file, our custom page template is doing nothing more than outputting the current page, which is not very useful. Also, we won’t be needing to output the editor content or comments, so remove these from the page template while loop, and add a custom message. Change the contents of the while loop to the following.

<?php
while ( have_posts() ) : the_post();
    echo "<p>This is our custom page template!</p>";
endwhile; // End of the loop.

Save this and view the page on the front end.

Note: If you can’t see the custom message then make sure you have selected the custom page template on the page editor and saved it to update settings.

Let’s now make our custom page template a little more useful. Replace the message we added above with the following code to output a sitemap of all published pages.

<?php
while ( have_posts() ) : the_post();
    echo "<h2>Sitemap</h2>";
    echo "<ul>" . wp_list_pages( array( 'title_li' => '' ) ) . "</ul>";
endwhile; // End of the loop.

This will result in the following output.

It’s easy to see just how useful page templates can be. But we can do even better!

Conclusion

So far, we’ve created a child theme and used it to implement our standard page template. In the next tutorial, I’ll show you step by step how to extend this, demonstrating how page templates can be made more flexible.

Dynamic Page Templates in WordPress, Part 2

In part 1 of this tutorial series I introduced the basic concept of dynamic page templates and created a standard page template as a foundation for future work. A WordPress child theme based on the Twenty Seventeen parent theme was used to implement the page template.

In this tutorial, you’ll learn more specific details about dynamic page templates and how you can use them in your own WordPress projects.

I’ll also show you step by step how to extend the page template from the first tutorial and turn it into your very first working dynamic page template!

Dynamic Page Templates: A More Flexible Approach

So how can we make page templates more flexible, and why would this be useful anyway?

Let’s say that you have a portfolio page template that outputs a gallery of individual portfolio items. Each item would be a fixed size, and only so many could fit onto each row.

We could, of course, add another page template to display portfolios at different sizes. But what if we wanted to show small, medium, or large portfolios? For this, we would need three separate page templates, with each one having different sizes for the portfolio items.

This could instantly be made more flexible by adding a drop-down control to select the portfolio size (i.e. Small, Medium, or Large). This is more convenient to the user as the page template box is less cluttered with unnecessary choices.

It makes more sense for the developer too, who only has one page template to maintain rather than three! This follows the Don’t Repeat Yourself (DRY) software development principle.

Should All Page Templates Be Dynamic?

It’s worth noting that not every page template would necessarily benefit from being dynamic. If you have a page template that does one thing, and one thing only, then that’s fine. It wouldn’t make sense to add custom controls, and extra logic, to a page template in this case.

But, as you’ll see by the end of this tutorial, many page templates would benefit greatly from being more flexible.

Another useful example for a dynamic page template would be a contact form. There are many custom controls that could be added to make this page template highly flexible.

For example, rather than output a fixed set of form fields, page template controls could be added to allow you to omit certain fields. Or maybe a Captcha field could be optionally displayed to prevent spam form submissions? There are so just many ways you could customize a contact form.

I’ll be creating a dynamic form page template in part 3 of this tutorial series. But first let’s get started with creating a general purpose dynamic page template.

Our First Dynamic Page Template

To begin with, we’ll be creating a basic dynamic page template to demonstrate how all the component parts fit together. Custom controls will be added to the page editor which will be used later on to control page template output.

The custom page template controls we’ll be adding shortly are:

• Text box
• Textarea
• Check box
• Radio buttons
• Drop-down select box

Ideally, the controls should be added directly below the page template drop-down box to make it obvious they’re related to a page template.

However, WordPress doesn’t provide any hooks for this, so you’ll have to make do (for now) with adding custom page template controls to a separate custom meta box. In part three of this tutorial series, I’ll show you how to get round this problem.

Hooks are fundamental to WordPress development. They allow developers to extend the code base without having to resort to editing core files, which is generally considered a bad idea. This is because any custom code would be wiped out whenever a WordPress update is performed (which can happen quite regularly).

To display our meta box on the page editor screen, add the load-post.php and load-post-new.php hooks to the child theme init() method we created in part 1.

<?php
add_action( 'load-post.php', array( $this, 'page_template_meta_box' ) );
add_action( 'load-post-new.php', array( $this, 'page_template_meta_box' ) );
add_action( 'save_post', 'save_page_template_meta', 10, 2 );
}

We use two WordPress hooks to ensure the meta box displays on the page editor, whether you’re creating a new page or editing an existing one. There is also a save_post hook that handles saving of post meta data, which I’ll cover a bit later on.

Add the following four class methods to create, display, and save data for the meta box.

/* Add meta box hook. */
public function page_template_meta_box() {
  add_action( 'add_meta_boxes', array( $this, 'add_page_template_meta_box' ) );
}

/* Register meta box. */
public function add_page_template_meta_box() {
  add_meta_box(
    'page-template-meta-box',
    esc_html__( 'Page Template Meta Box', 'twenty-seventeen-child' ),
    array( $this, 'display_page_template_meta_box' ),
    'page',
    'side',
    'default'
  );
}

/* Render meta box on the page editor. */
public function display_page_template_meta_box($object) { 
  wp_nonce_field( basename( __FILE__ ), 'page_template_meta_box_nonce' );
}

I won’t go into too much detail here about WordPress meta boxes, as that could be a whole tutorial on its own, but note the following points about the code I added above:

• The page_template_meta_box() and add_page_template_meta_box() class methods register the meta box with WordPress.
• In add_page_template_meta_box(), the 'page' parameter specifies that this meta box will only be displayed on the ‘page’ post type editor in the WordPress admin.
• The display_page_template_meta_box() class method renders the meta box and sets up a nonce to make the form controls more secure.

If all is well, you should now have a meta box displayed on the page editor, as shown below.

It’s a bit empty at the moment, though, so let’s add some controls.

Adding Custom Controls

If you’ll recall from above, we’re going to add a text box, text area, checkbox, radio button, and select box controls to the meta box. Start by adding the following code to the display_page_template_meta_box()method underneath the nonce function.

<?php

$text = get_post_meta( $object->ID, 'page_template_text', true );

$textarea = get_post_meta( $object->ID, 'page_template_textarea', true );

$checkbox = get_post_meta( $object->ID, 'page_template_chk', true );

$radio = get_post_meta( $object->ID, 'page_template_radio', true );

$select = get_post_meta( $object->ID, 'page_template_select', true );

?>

This retrieves the current values of our meta box controls and stores them in local variables. Now add the following HTML directly after, to render the meta box controls.

 ?>
  <div>
    <p>
        <label for="page-template-text"><?php _e( "Text Control", 'twenty-seventeen-child' ); ?></label><br>
        <input class="widefat" type="text" name="page-template-text" id="page-template-text" value="<?php echo esc_attr( $text ); ?>" />
    </p>
 
    <p>
        <label for="page-template-textarea"><?php _e( "Textarea Control", 'twenty-seventeen-child' ); ?></label><br>
        <textarea rows="5" class="widefat" name="page-template-textarea" id="page-template-textarea"><?php echo esc_attr( $textarea ); ?></textarea>
    </p>
 
    <p>
        <input type="checkbox" name="page-template-chk" id="page-template-chk" value="1" <?php checked($checkbox, true); ?> />&nbsp;<label for="page-template-chk"><?php _e( "Checkbox Control", 'twenty-seventeen-child' ); ?></label><br>
    </p>
 
    <p>
        <label for="page-template-align"><?php _e( "Radio Button Control", 'twenty-seventeen-child' ); ?></label><br>
        <input type="radio" name="page-template-align" id="rdo-left" value="left" <?php checked( $radio, 'left' ); ?> ><label for="rdo-left"><?php _e( 'Left', 'twenty-seventeen-child' ); ?></label><br>
        <input type="radio" name="page-template-align" id="rdo-right" value="right" <?php checked( $radio, 'right' ); ?> ><label for="rdo-right"><?php _e( 'Right', 'twenty-seventeen-child' ); ?></label><br>
        <input type="radio" name="page-template-align" id="rdo-center" value="center" <?php checked( $radio, 'center' ); ?> ><label for="rdo-center"><?php _e( 'Center', 'twenty-seventeen-child' ); ?></label><br>
    </p>
 
    <p>
        <label for="page-template-select">Dropdown</label>
        <select name="page-template-select" class="widefat">
            <option  value='one' <?php selected( 'one', $select ); ?>><?php _e( 'One', 'twenty-seventeen-child' ); ?></option>
            <option  value='two' <?php selected( 'two', $select ); ?>><?php _e( 'Two', 'twenty-seventeen-child' ); ?></option>
            <option  value='three' <?php selected( 'three', $select ); ?>><?php _e( 'Three', 'twenty-seventeen-child' ); ?></option>
            <option  value='four' <?php selected( 'four', $select ); ?>><?php _e( 'Four', 'twenty-seventeen-child' ); ?></option>
        </select>
    </p>
</div><?php

Each control is contained inside a paragraph tag, and its current value is updated via the local variable we created earlier. This ensures that the meta box controls always display the correct settings.

However, this won’t happen unless we save the current meta box control data to the WordPress database.

A little earlier, I registered a hook to execute a class method every time the page editor was updated. Let’s add that method to our child theme class now.

<?php
/* Save meta box data. */
public function save_page_template_meta( $post_id, $post ) {
 
    if ( ! ( isset( $_POST[ 'page_template_meta_box_nonce' ] ) && wp_verify_nonce( $_POST[ 'page_template_meta_box_nonce' ], basename( __FILE__ ) ) ) ) {
        return $post_id;
    }
 
    if ( ! current_user_can( 'edit_post', $post_id ) ) {
        return $post_id;
    }
 
    if( 'page' != $post->post_type ) {
        return $post_id;
    }
 
    $page_template_text_value = isset( $_POST[ 'page-template-text' ] ) ? $_POST[ 'page-template-text' ] : '';
    update_post_meta( $post_id, 'page_template_text', $page_template_text_value );
 
    $page_template_textarea_value = isset( $_POST[ 'page-template-textarea' ] ) ? $_POST[ 'page-template-textarea' ] : '';
    update_post_meta( $post_id, 'page_template_textarea', $page_template_textarea_value );
 
    $page_template_chk_value = isset( $_POST[ 'page-template-chk' ] ) ? $_POST[ 'page-template-chk' ] : '';
    update_post_meta( $post_id, 'page_template_chk', $page_template_chk_value );
 
    $page_template_radio_value = isset( $_POST[ 'page-template-align' ] ) ? $_POST[ 'page-template-align' ] : '';
    update_post_meta( $post_id, 'page_template_radio', $page_template_radio_value );
 
    $page_template_select_value = isset( $_POST[ 'page-template-select' ]) ? $_POST[ 'page-template-select' ] : '';
    update_post_meta( $post_id, 'page_template_select', $page_template_select_value );
}

The save_page_template_meta() class method handles saving the meta box control data. It only saves the meta box data if the nonce is verified, the current users can edit posts, and we are on the page editor admin screen.

If those conditions are satisfied, then we extract the data for each control which is stored in the global $_POST variable. This variable is set every time a form is submitted.

Finally, the meta box control data is saved to the WordPress database as meta data for the current page.

With the custom page template controls added, our meta box should look like this.

Enter some text for the text box and textarea, and make selections for the check box, radio button, and select box. Hit update to save your changes, and when the page editor reloads, your meta box controls should show the data you just entered.

The full source code for the child theme functions.php file is shown below.

<?php
 
/**
 * Twenty Seventeen child theme class.
 *
 * DPT = D[ynamic] P[age] T[emplates].
 */
class DPT_Twenty_Seventeen_Child {
 
    /**
     * Register hooks.
     */
    public function init() {
        add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_parent_theme_styles' ) );
        add_action( 'load-post.php', array( $this, 'page_template_meta_box' ) );
        add_action( 'load-post-new.php', array( $this, 'page_template_meta_box' ) );
        add_action( 'save_post', array( $this, 'save_page_template_meta' ), 10, 2 );
    }
 
    /* Enqueue parent theme styles. */
    public function enqueue_parent_theme_styles() {
        wp_enqueue_style( 'twenty-seventeen-css', get_template_directory_uri() . '/style.css' );
    }
 
    /* Add meta box hook. */
    public function page_template_meta_box() {
      add_action( 'add_meta_boxes', array( $this, 'add_page_template_meta_box' ) );
    }
 
    /* Register meta box. */
    public function add_page_template_meta_box() {
      add_meta_box(
        'page-template-meta-box',
        esc_html__( 'Page Template Meta Box', 'twenty-seventeen-child' ),
        array( $this, 'display_page_template_meta_box' ),
        'page',
        'side',
        'default'
      );
    }
 
    /* Render meta box on the page editor. */
    public function display_page_template_meta_box( $object ) {
 
      wp_nonce_field( basename( __FILE__ ), 'page_template_meta_box_nonce' );
 
      $text = get_post_meta( $object->ID, 'page_template_text', true );
      $textarea = get_post_meta( $object->ID, 'page_template_textarea', true );
      $checkbox = get_post_meta( $object->ID, 'page_template_chk', true );
      $radio = get_post_meta( $object->ID, 'page_template_radio', true );
      $select = get_post_meta( $object->ID, 'page_template_select', true );
      ?>
      <div>
        <p>
            <label for="page-template-text"><?php _e( "Text Control", 'twenty-seventeen-child' ); ?></label><br>
            <input class="widefat" type="text" name="page-template-text" id="page-template-text" value="<?php echo esc_attr( $text ); ?>" />
        </p>
 
        <p>
            <label for="page-template-textarea"><?php _e( "Textarea Control", 'twenty-seventeen-child' ); ?></label><br>
            <textarea rows="5" class="widefat" name="page-template-textarea" id="page-template-textarea"><?php echo esc_attr( $textarea ); ?></textarea>
        </p>
 
        <p>
            <input type="checkbox" name="page-template-chk" id="page-template-chk" value="1" <?php checked($checkbox, true); ?> />&nbsp;<label for="page-template-chk"><?php _e( "Checkbox Control", 'twenty-seventeen-child' ); ?></label><br>
        </p>
 
        <p>
            <label for="page-template-align"><?php _e( "Radio Button Control", 'twenty-seventeen-child' ); ?></label><br>
            <input type="radio" name="page-template-align" id="rdo-left" value="left" <?php checked( $radio, 'left' ); ?> ><label for="rdo-left"><?php _e( 'Left', 'twenty-seventeen-child' ); ?></label><br>
            <input type="radio" name="page-template-align" id="rdo-right" value="right" <?php checked( $radio, 'right' ); ?> ><label for="rdo-right"><?php _e( 'Right', 'twenty-seventeen-child' ); ?></label><br>
            <input type="radio" name="page-template-align" id="rdo-center" value="center" <?php checked( $radio, 'center' ); ?> ><label for="rdo-center"><?php _e( 'Center', 'twenty-seventeen-child' ); ?></label><br>
        </p>
 
        <p>
            <label for="page-template-select">Dropdown</label>
            <select name="page-template-select" class="widefat">
                <option  value='one' <?php selected( 'one', $select ); ?>><?php _e( 'One', 'twenty-seventeen-child' ); ?></option>
                <option  value='two' <?php selected( 'two', $select ); ?>><?php _e( 'Two', 'twenty-seventeen-child' ); ?></option>
                <option  value='three' <?php selected( 'three', $select ); ?>><?php _e( 'Three', 'twenty-seventeen-child' ); ?></option>
                <option  value='four' <?php selected( 'four', $select ); ?>><?php _e( 'Four', 'twenty-seventeen-child' ); ?></option>
            </select>
        </p>
      </div><?php
    }
 
    /* Save meta box data. */
    public function save_page_template_meta( $post_id, $post ) {
 
      if ( ! ( isset( $_POST[ 'page_template_meta_box_nonce' ] ) && wp_verify_nonce( $_POST[ 'page_template_meta_box_nonce' ], basename( __FILE__ ) ) ) ) {
        return $post_id;
      }
 
      if ( ! current_user_can( 'edit_post', $post_id ) ) {
        return $post_id;
      }
 
      if( 'page' != $post->post_type ) {
        return $post_id;
      }
 
      $page_template_text_value = isset( $_POST[ 'page-template-text' ] ) ? $_POST[ 'page-template-text' ] : '';
      update_post_meta( $post_id, 'page_template_text', $page_template_text_value );
 
      $page_template_textarea_value = isset( $_POST[ 'page-template-textarea' ] ) ? $_POST[ 'page-template-textarea' ] : '';
      update_post_meta( $post_id, 'page_template_textarea', $page_template_textarea_value );
 
      $page_template_chk_value = isset( $_POST[ 'page-template-chk' ] ) ? $_POST[ 'page-template-chk' ] : '';
      update_post_meta( $post_id, 'page_template_chk', $page_template_chk_value );
 
      $page_template_radio_value = isset( $_POST[ 'page-template-align' ] ) ? $_POST[ 'page-template-align' ] : '';
      update_post_meta( $post_id, 'page_template_radio', $page_template_radio_value );
 
      $page_template_select_value = isset( $_POST[ 'page-template-select' ]) ? $_POST[ 'page-template-select' ] : '';
      update_post_meta( $post_id, 'page_template_select', $page_template_select_value );
    }
}
 
$ts_child_theme = new DPT_Twenty_Seventeen_Child();
$ts_child_theme->init();

The final piece of the puzzle is to use the meta box control data in our page template on the front end. Open up the test-page-template.php file we created in part 1 and replace the contents with this updated code.

<?php
/**
 * Template Name: Test Page Template
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */
 
get_header(); ?>
 
<div class="wrap">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
 
            <?php
            while ( have_posts() ) : the_post();
 
                $text = get_post_meta( get_the_ID(), 'page_template_text', true );
                $textarea = get_post_meta( get_the_ID(), 'page_template_textarea', true );
                $checkbox = get_post_meta( get_the_ID(), 'page_template_chk', true );
                $radio = get_post_meta( get_the_ID(), 'page_template_radio', true );
                $select = get_post_meta( get_the_ID(), 'page_template_select', true );
 
                echo "<p>Text Box: " . $text . "</p>";
                echo "<p>Text Area: " . $textarea . "</p>";
                echo "<p>Checkbox: " . $checkbox . "</p>";
                echo "<p>Radio Buttons: " . $radio . "</p>";
                echo "<p>Dropdown: " . $select . "</p>";
 
                echo "<h2>Sitemap</h2>";
                echo "<ul>" . wp_list_pages( array( 'title_li' => '' ) ) . "</ul>";
 
            endwhile; // End of the loop.
            ?>
 
        </main><!-- #main -->
    </div><!-- #primary -->
</div><!-- .wrap -->
 
<?php get_footer();

Make sure the ‘Test Page Template’ is the currently selected page template and view the page on the front end.

As you can see, the page template now includes the values just set for the meta box controls on the page editor. This is core to the rest of the tutorial as we’ll build on this basic example and create various examples of fully working dynamic page templates that you can use in your own WordPress projects.

Conclusion

In this tutorial, we covered how to build a functioning dynamic page template. At the moment, even though it’s functional, our basic page template isn’t terribly useful.

In the third and final part of this tutorial series, I’ll show you how to build various dynamic page templates, from start to finish, that you can use (and expand upon) in your own WordPress projects.

Part1  Part2