Oke tutorial lanjutan ini akan membahas bagaimana cara Memasukkan CSS di Panel Administrasi. Tampilannya seperti pada file psd yang pertama anda download, disana terdapat slide wajah, nama, sama deskripsi, nah kita akan memasukan itu untuk di pasang di panel admin untuk review. Tapi hari ini kita hanya akan mencoba memasukkan nama dan deskripsinya saja ke panel tersebut, untuk foto kita buat di tutorial selanjutnya.

Langsung saja ke tutorialnya, pertama anda buka kembali project kemarin, dan buka juga file function-admin.php, lalu tambahkan register_settings di bawah register_setting( 'sunda-settings-group', 'last_name'); dan masukkan script berikut:

 register_setting( 'sunda-settings-group', 'user_description');

Tambahkan field baru juga tepat di bawah field Full Name, copy script berikut:

 add_settings_field ( 'sidebar-name', 'Description', 'sunda_sidebar_description', 'gidhancrx_sunda', 'sunda-sidebar-options');

dan tambahkan juga function baru tepat di bawah function sunda_sidebar_name, copy script berikut:


function sunda_sidebar_description(){
  $description = esc_attr(get_option('user_description'));
  echo '<input type="text" name="user_description", value="'.$description.'" placeholder="Description" />';
}

Setelah itu simpan file, dan buat file baru di folder inc dengan judul "enqueue.php" (ex: /inc/enqueue.php) dan file baru di folder css dengan "judul sunda.admin.php" (ex: /css/sunda.admin.css), lalu buka file function, tambahkan require baru dengan script berikut:

require get_template_directory() . '/inc/enqueue.php';

lalu buka file enqueue.php dan pastekan script berikut:





<?php
 
/*
 
@package sundatheme
 
===========================
  ADMIN ENQUEUE FUNCTIONS
===========================
 
 */
 
 function sunda_load_admin_scripts( $hook ) {
 
   wp_register_style( 'sunda_admin', get_template_directory_uri() . ('/css/sunda.admin.css'), array(), '1.0.0', 'all' );
   wp_enqueue_style( 'sunda_admin' );
 }
add_action( 'admin_enqueue_scripts', 'sunda_load_admin_scripts' );
 
?>

 


simpan file tersebut dan buka kembali file sunda.admin.css nya lalu pastekan juga script css berikut:


/*
  @package sunda
*/
.sunda-general-form,
.sunda-sidebar-preview { display: inline-blog; float: left; }
 
.sunda-sidebar-preview { width: 280px; background-color: #1f1f1f; padding: 20px; text-align: center; margin-right: 20px; }
.sunda-sidebar { display: block; text-align: center; }
h1.sunda-username,
h2.sunda-description { font-weight: 100; color: #fff; }
h1.sunda-username { font-size: 24px; margin: 0 0 10px; }
h2.sunda-description { font-size: 13px; margin: 0 0 20px; }

Simpan file dan buka file sunda-admin.php, dan replace script yang ada di file tersebut dengan script berikut:

<h1>Sunda Sidebar Options</h1>
<?php settings_errors(); ?>
<?php
    $firstName = esc_attr ( get_option( 'first_name' ) );
    $lastName = esc_attr ( get_option( 'last_name' ) );
    $fullName = $firstName . ' ' . $lastName;
    $description = esc_attr (get_option('user_description'));
 
?>
<div class="sunda-sidebar-preview">
  <div class="sunda-sidebar">
      <h1 class="sunda-username"><?php print $fullName; ?></h1>
      <h2 class="sunda-description"><?php print $description ?></h2>
      <div class="icon-wrapper">
 
      </div>
  </div>
</div>
<form method="post" action="options.php" class="sunda-general-form">
  <?php settings_fields( 'sunda-settings-group' ); ?>
  <?php do_settings_sections( 'gidhancrx_sunda' ); ?>
  <?php submit_button(); ?>
</form>

simpan file dan silahkan coba refresh Wordpress anda, kalau berhasil maka tampilannya akan seperti berikut:

Munkin sekian untuk tutorial Memasukkan CSS di Panel Administrasi, jika ada yang ditanyakan jangan sungkan untuk bertanya di komentar ya. Untuk tutorial selanjutnya kita akan melanjutkan tutorial ini dengan judul Menambahkan Media Uploader WordPress, jadi jangan kelewatan ya. See you next lesson.