Pengenalan

Tema WordPress merupakan seperangkat file yang menyusun layout website Anda. Sebuah tema memiliki HTML, PHP, dan CSS, dan terkadang juga menggunakan JavaScript/jQuery.
(referensi dari www.Hostinger.co.id)
Pertama kita akan membahas tema yang sudah ada.
Ok, kita sebut saja nama tema kita sebagai tema anak.
Langkah-langkahnya sebagai berikut :
ü  Login di Wordpress yang anda ingin buat tema di dalamnya, bisa di localhost ataupun yang di online termasuk di wordpress.com atau 000webhost.com.
ü  Kali ini kita login di localhost saja.
ü   Jika di localhost tempatnya di windows explorer, pilih htdocs-pilih nama wordpress yang ingin kita buat temanya- pilih wp-content lalu pilih themes setelah itu buat folder baru nama folder-nya sesuai dengan nama tema yang akan kita buat.
ü  Setelah itu buka foldernya lalu buat file baru, caranya dengan meng-klik kanan lalu pilih New-Text Document.
ü  Tambahkan satu per-satu file dengan judul
·         Style.css
·         Index.php
·         Header.php
 memuat HTML apa pun yang ada di atas halaman Anda, mulai dari <!DOCTYPE html>b

·         Pege.php
digunakan untuk menampilkan satu Page dari blog Anda

·         Sidebar.php
·         commens.php –  untuk membuat menu komentar.
untuk menampikan komentar dan text box komentar

·         Single.php
digunakan untuk menampilkan satu Post dari blog Anda
·         Footer.php
memuat HTML apa pun yang ada di bawah halaman Anda, termasuk </html>

·         Functions.php.)

Yang paling utama dalam pembuatan tema yaitu dengan membuat microtik di style.css.
Bisa kita ubah gambar, logo di style.css
Maka dari itu bagi yang masih pemula kita akan membuat tema dengan gaya/ style yang kita inginkan.

ü  Pertama kita mengisi di style.css. yang digunakan untuk menampilkan satu Post dari blog di wordpress Anda
Contoh :

/*
Theme Name: shams child
Theme URI: https://arlinanasta.blogspot.com
Author: Shams Child
Author URI: https://arlinanasta.wordpress.com
Description: Ini thema untuk belajar di AP 20 RGI Sawangan, Depok.
Version: 5.1.3
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shams-child
Tags:  Biasa saja, fokus, niat belajar.
Template: Shams-Solar
*/
@import url("../Shams-Solar/style.css");

Nb :  Disertai dengan tema induk
Dengan cara kita meng- install tema induk nya terlebih dahulu. Saat ini saya memakai
Shams-solar, sebagai tema induk yang saya pakai.

ü  Setelah itu kita tambahkan lagi site header/ file header.php
Contoh :

 /* Scroll down arrow */
.site-header .menu-scroll-down {
                display: none;
}
/*----------- Header ----------------*/
#masthead {
    background: #1f1e1e;
}
.logo h1{
                margin: 0;
                font-weight: 600;
                color: Green;
}
.logo h1 a{
                color: #fff;
                text-transform: uppercase;
}
.logo p{
                color: #fff;
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu > li > a::before,
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu > li > a::before,
.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu > li > a::before
a:focus {

 text-decoration: underline;
}
  font-family: "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
  font-weight: normal;
  content: "– " counters(submenu, "– ", none);
  counter-increment: submenu;
}

ü  Lalu tambahkan Body
Contoh :

body {
                margin: 0;
                font-family: 'Work Sans', sans-serif;
    background-color: #215590;
}
body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
                max-height: 200px;
                max-width: 100%;
}
:placeholder {
    color: #333;
    opacity: 1;
}
.blogger h3 a {
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    padding: 10px 20px;
    background: #71be24;
}


ü  Tambahkan lagi di file page.php

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
       <header>
         <h2><?php the_title(); ?></h2>
         By: <?php the_author(); ?>
       </header>
       <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no page was found!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

ü  Kita tambah kan lagi di file index.php

Contoh :

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-loop">
        <header>
          <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
          By: <?php the_author(); ?>
        </header>
        <?php the_excerpt(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no posts were found!</p>
      </article>
<?php endif; ?>
   </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

ü  Tambahkan lagi di flie page sidebar.php
Contoh :

<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
  <aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar' ); ?>
  </aside>
<?php endif; ?>


ü  Tambahkan di file single.php

Contoh :

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-full-width">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-full">
        <header>
          <h2><?php the_title(); ?></h2>
          By: <?php the_author(); ?>
        </header>
       <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
       <p>Sorry, no post was found!</p>
      </article>
<?php endif; ?>
  </section>
</main>
<?php get_footer(); ?>

ü  Selanjutnya tambahkan lagi di file footer.php
Contoh :
<footer>
     <p>Copyright &copy; 2019</p>
    </footer>
    <?php wp_footer(); ?>
  </body>
</html>

ü  Selanjutnya tambahkan di file functions
Contoh :

<?php
// This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we
// use an online version of the css file.
function add_normalize_CSS() {
   wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
}

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

// Register a new sidebar simply named 'sidebar'
function add_widget_Support() {
                register_sidebar( array(
                                'name'         => 'Sidebar',
                                'id'           => 'sidebar',
                                'after_widget' => '<div>',
                                'before_title' => '<h2>',
                                'after_title'  => '</h2>',
                ) );
}
// Hook the widget initation and run our function
add_action( 'widgets_init', 'add_Widget_Support' );

// Register a new navigation menu
function add_Main_Nav() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
// Hook to the init action hook, run our navigation menu function
add_action( 'init', 'add_Main_Nav' );
?>
Itu adalah cara membuat tema anak dengan style yang berbeda dari tema induk.