November 8, 2024
Tutorial Membuat Desain Tema WordPress Terbaik

Tutorial Membuat Desain Tema WordPress Terbaik

Phpbbstyles Tutorial Membuat Desain Tema WordPress Terbaik Ini akan menjadi tutorial yang menarik di mana kita akan mempelajari cara membuat tema WordPress kita sendiri dari awal. Faktanya, kita akan mulai dengan file nol dan baris kode nol. Satu-satunya cara untuk memahami cara kerja tema WordPress adalah dengan benar-benar turun ke level rendah dan melakukan semuanya sendiri.

Tutorial Membuat Desain Tema WordPress Terbaik

Tutorial Membuat Desain Tema WordPress Terbaik

Ya, Anda ingin menghindari ini karena Anda dapat membiarkan WordPress melakukan segalanya untuk Anda tanpa mengetahui kode yang mendukungnya. Ini bisa berupa PHP, JavaScript, CSS atau bahkan HTML dasar. Di akhir tutorial tema WordPress langkah demi langkah, Anda akan mempelajari bagaimana semuanya cocok dan cara mudah membengkokkan WordPress sesuai keinginan Anda.

Saat Anda menjalankan situs WordPress, ada terlalu banyak tema gratis yang tersedia. Selain tema gratis, Anda juga dapat memilih untuk membayar premium untuk tema WordPress profesional yang dibuat dengan indah dan memiliki fitur luar biasa. Jadi, mengapa Anda harus belajar cara membuat tema Anda sendiri dari awal? Jawabannya adalah tidak peduli tema apa yang Anda gunakan, terkadang Anda ingin membuat perubahan sederhana pada situs web Anda.

Beberapa dari perubahan ini dapat diadaptasi melalui plugin atau widget sederhana. Namun seringkali, lebih masuk akal untuk memahami apa yang ingin Anda ubah, cara membuat perubahan, dan menghindari mengubah situs WordPress Anda menjadi sekumpulan plugin dan add-on yang tidak berguna. Dengan pengetahuan dasar, Anda akan memiliki kepercayaan diri untuk memodifikasi tema, atau hanya membangun tema Anda sendiri dari awal. Anda akan mengetahui file mana yang akan diedit dan kode mana yang harus ditambahkan atau dimodifikasi untuk membuat hasil yang diinginkan.

Langkah pertama : Buat folder pertama untuk menyimpan File Tema andaBuat folder pertama untuk menyimpan File Tema anda

Jika Anda ingin membangun sebuah tema, Anda perlu mengetahui lokasi file yang menyusun tema WordPress tersebut di instalasi WordPress Anda. Mudah. Kita tahu bahwa instalasi WordPress biasanya memiliki direktori root yang disebut wordpress. Seperti inilah tampilan direktori root kami di PHP Storm.

Direktori Berisi File dan Folder Berikut:

Files

-composer.json
– index.php
– license.txt
– readme.html
– wp-activate.php
– wp-blog-header.php
– wp-comments-post.php
– wp-config.php
– wp-config-sample.php
– wp-cron.php
– wp-links-opml.php
– wp-load.php
– wp-login.php
-wp-mail.php
-wp-settings.php
-wp-signup.php
-wp-trackback.php
-xmlrpc.php

Folders
– wp-admin
– wp-content
– wp-includes

Saat ini, folder yang paling kami minati adalah folder wp-content. Di folder wp-content, ada folder bernama themes. Tahukah Anda untuk apa folder ini? Ya ya! Ini adalah folder yang berisi satu atau lebih tema yang ingin Anda gunakan dengan situs WordPress Anda. Dalam folder tema ini, kami menemukan tiga folder lainnya yaitu dua puluh lima belas, dua puluh empat dan dua puluh satu. Folder ini berisi tiga tema yang disertakan dengan WordPress secara default. Harap dicatat bahwa ada juga folder bernama customtheme di bawah ini. Silakan buat folder itu di instalasi Anda, di sinilah kita akan membuat tema WordPress dari awal.

Langkah kedua: Buat style.css dan index.php di folder tema kustom Anda

Buat style.css dan index.php di folder tema kustom Anda
phpbbstyles

Sekarang kita tahu lokasi file tema WordPress di sistem file. Kami juga membuat folder baru bernama customtheme di folder tema. Sekarang, kita akan membuat dua file kosong di direktori ini. Satu disebut index.php dan yang lainnya disebut style.css.

Mari kita sekarang mengisi file-file ini dengan minimum yang kita butuhkan untuk mendapatkan tema baru di WordPress.

style.css

WordPress sebenarnya akan membaca komentar yang Anda masukkan ke file style.css. Di sini Anda dapat menentukan informasi spesifik tentang tema yang sedang dibangun.

Style.css adalah file stylesheet (CSS) yang diperlukan untuk setiap tema WordPress. Ini mengontrol presentasi (desain visual dan tata letak) dari halaman situs web.

Dalam potongan kami di sini kami hanya menetapkan Nama Tema, Penulis, Penulis URI, dan nomor Versi tema kami.

1. /*
2. Theme Name: customtheme
3. Author: Vegibit
4. Author URI: https://vegibit.com
5. Version: 1.0
6. */

index.php

Dalam file ini, kami hanya ingin menampilkan sesuatu ke layar untuk membuktikan bahwa tema khusus kami berfungsi.

<h1>Custom Theme!</h1>

Sudah selesai dilakukan dengan baik! Percaya atau tidak, Anda telah membuat tema WordPress pertama Anda.

Langkah Ketiga: Aktifkan Tema Anda Dari Dashboard WordPress

Pada titik ini, kita dapat mengunjungi dashboard WordPress dan menavigasi ke Appearance-> Themes, dan melihat tema baru yang kita buat.

Kita dapat mengklik “Detail Tema” untuk menelusuri tema kustom kita dan menemukan bahwa informasi yang kita masukkan ke file style.css telah berfungsi. Kita dapat melihat mereka memiliki nama tema khusus, dengan Versi 1.0, oleh penulis Vegibit, dan tautan ke URI yang telah kami sediakan. Sangat keren.

Dan sekarang untuk langkah selanjutnya adalah! Silakan klik “Activate” pada tema kustom baru, dan kemudian kunjungi situs webnya. Itu tidak akan memenangkan penghargaan Webby apa pun, tetapi kami memulai dengan awal yang baik untuk tema khusus baru!

Langkah Keempat: Tambahkan Kode Untuk Menampilkan Judul Posting dan Teks Posting

Kita akan mengisi beberapa contoh posting di database sehingga datanya dapat digunakan dalam tutorial ini. Saat ini, tema kami baru saja merilis tema khusus! Tidak peduli berapa banyak posting yang ada di database, kita akan diarahkan ke halaman ini saat mengunjungi website kita. Sekarang, mari lanjutkan untuk mendapatkan beberapa data dari database dan menampilkannya ke halaman. Secara khusus, kami ingin mendapatkan judul postingan dan konten postingan dari semua postingan dan melihatnya di beranda. Ayo coba sekarang. Pertama mari kita lihat konten postingan di dashboard WordPress.

Manfaatkan Loop WordPressLoop WordPress

Sekarang kita akan membahas sedikit tentang Loop WordPress. Loop WordPress benar-benar mesin yang membuat WordPress berjalan. Melalui loop ini, pengembang tema memeriksa posting dan menampilkannya di halaman sesuai kebutuhan. Jika mengikuti format sebagai berikut. Jika database memiliki postingan, mari kita putar saat masih ada postingan, jika tidak, kami akan memberi tahu pengguna bahwa tidak ada postingan. Ini terlihat seperti ini dalam kode PHP.

<?php

if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>

<?php endwhile;

else :
echo ‘<p>There are no posts!</p>’;

endif;

?>

Perhatikan bahwa The Loop menggunakan dua bentuk fungsi yang paling dasar. Ini adalah have_posts () dan the_post (). Fungsi has_posts () hanya dapat melakukan satu hal. Ini akan memberi tahu Anda jika ada posting duplikat di database. Fungsi ini akan mengembalikan true atau false, tidak lebih. Jika mengembalikan nilai true, ada posting yang dapat diulang. Jika hasilnya salah, tidak perlu mengulang tulisan. Fungsi lainnya the_post () tidak mengembalikan apa-apa.

Tugasnya adalah mempersiapkan WordPress untuk menampilkan postingan. Secara khusus, ini akan mendapatkan posting berikutnya, mengatur posting, dan mengatur atribut in_the_loop ke true. Selama ini halaman kita masih belum menampilkan informasi apapun tentang postingan blog tersebut, tapi sekarang kita bisa mengupdatenya di file index.php.

<?php

if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>

<h2><?php the_title() ?></h2>
<?php the_content() ?>

<?php endwhile;

else :
echo ‘<p>There are no posts!</p>’;

endif;

?>

Bagus, Tidak Buruk. Sekarang, kami menggunakan dua fungsi WordPress tambahan the_title () dan the_content (). Fungsi-fungsi ini biasanya digunakan dalam satu loop, dan perannya adalah untuk mendapatkan judul dan konten setiap artikel dalam loop yang mengulangi setiap artikel dalam database. Oleh karena itu, ketika loop berjalan, artikel pertama akan ditemukan. Saat itu, fungsi the_title () mengembalikan judul postingan ke halaman, dan the_content () menampilkan badan postingan ke halaman. Di loop berikutnya, fungsi-fungsi ini akan mengambil judul dan konten berikutnya dan menampilkannya ke halaman. Jadi dengan ini, sekarang kita akan melihat beberapa informasi tentang posting di layar. Ayolah, coba dulu! Kami mengunjungi http://wordpresstutorial.dev dan melihatnya berhasil!

Langkah Kelima: Tambahkan Tautan Ke Setiap Posting

Tambahkan Tautan Ke Setiap Posting
phpbbstyles.com

Bagaimana dengan menautkan ke setiap postingan sehingga kami dapat melihat postingan itu sendiri, bukan hanya sebagai bagian dari beranda. Kita dapat melakukannya dengan cukup mudah, lagi-lagi dengan fungsi khusus yang disediakan WordPress. Untuk tugas ini, kita bisa menggunakan fungsi the_permalink (). Kami dapat memperbarui kode kami seperti ini:

<?php

if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>

<h2><a href=”<?php the_permalink() ?>”><?php the_title() ?></a></h2>
<?php the_content() ?>

<?php endwhile;

else :
echo ‘<p>There are no posts!</p>’;

endif;

?>

Sekarang, kita dapat mengklik setiap judul posting, dan menavigasi ke halaman yang hanya memiliki satu posting itu. kerja bagus!

Langkah Keenam: Tambahkan Header dan Footer ke Tema KustomTambahkan Header dan Footer ke Tema Kustom

Judul dan konten postingan sangat penting untuk membuat topik yang baik. Bagian header dan footer tematik hampir sama pentingnya. Bagian ini akan berisi konten yang selalu terlihat di semua halaman situs web. Bagian ini terletak di atas dan di bawah konten postingan. Anda bisa menebaknya, untuk ini, kami akan menggunakan fitur khusus yang disediakan oleh WordPress untuk mendapatkan header dan footer. Apakah Anda melihat polanya mulai berkembang? Dengan fitur khusus ini, Anda hampir dapat melakukan semua hal yang dapat Anda lakukan sebagai pengembang tema di WordPress. Oleh karena itu, Anda akan merasa berguna untuk mengingat fitur-fitur umum ini dalam pengembangan tema WordPress. Mari lanjutkan dan tambahkan fungsi get_header () dan get_footer () ke file tema saat ini.

<?php

get_header();

if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>

<h2><a href=”<?php the_permalink() ?>”><?php the_title() ?></a></h2>
<?php the_content() ?>

<?php endwhile;

else :
echo ‘<p>There are no posts!</p>’;

endif;

get_footer();

?>

Nah, Kita dapat melihat bahwa tema khusus kita sekarang memiliki area header dan area footer. Di header adalah nama situs dan slogan, di footer adalah teks yang sudah dikenal, tutorial WordPress dengan bangga diberdayakan oleh WordPress. Ini adalah opsi header dan footer default saat menggunakan fitur ini. Bagaimana jika kita ingin memiliki custom header dan footer? segera akan datang!

Dari 2 File Tema menjadi 4

Sejauh ini dalam tutorial ini, kami memiliki dua file yang tinggal di folder customtheme kami (yang sendiri ada di folder tema). File tersebut adalah style.css dan index.php. Pada titik ini, kita perlu menambahkan lebih banyak file untuk melanjutkan. Lanjutkan dan buat dua file baru di folder customtheme. File-file ini akan dengan mudah dinamai header.php dan footer.php.

Sekarang, apa yang akan dilakukan file-file ini adalah mengganti tata letak header dan footer default yang disediakan secara default saat fungsi get_header () atau get_footer () dipanggil. Nyatanya, jika kita me-refresh website kita, sepertinya header dan footernya hilang. Ini karena kami belum menambahkan tag apa pun ke file. Hanya menyeringai, buat file seperti ini untuk mengujinya.

header.php

<h2>The Header!</h2>
<hr>

footer.php

<hr>
<h2>The Footer!</h2>

Bekerja dengan header.php

Seperti contoh di atas berfungsi dengan baik, dan menunjukkan kepada kami bagaimana file ini bekerja pada tingkat paling dasar. Namun, file header.php sebenarnya cukup penting, jadi jangan terlalu cepat mengabaikan detailnya! Di sinilah Anda memasukkan kode yang perlu diakses oleh semua halaman di situs Anda dengan satu atau lain cara. Untuk memulainya, semua halaman HTML akan memiliki doctype. Anda akan menentukannya di file ini. Selain itu, semua halaman akan memiliki tag html pembuka, bagian kepala, dan tag badan pembuka. Semua ini bisa masuk ke file header.php. Mari dengan cepat menambahkan beberapa hal berikut yang akan digunakan oleh semua halaman web. Kami juga akan menggunakan beberapa fungsi WordPress baru di sini. Itu akan menjadi language_attributes (), bloginfo () dan body_class ().

Header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<title><?php bloginfo( ‘name’ ); ?></title>
</head>

<body <?php body_class(); ?>>

<header class=”site-header”>
<h1><?php bloginfo( ‘name’ ); ?></h1>
<h4><?php bloginfo( ‘description’ ); ?></h4>
</header>

Jika kita memuat ulang halaman dan kemudian melihat sumber halaman di browser kita, kita bisa mendapatkan gambaran tentang fungsi-fungsi ini. Kami menyorot garis yang memiliki keluaran yang berasal dari fungsi-fungsi di bawah ini:

<!DOCTYPE html>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>WordPress Tutorial</title>
</head>

<h1>WordPress Tutorial</h1>
<h4>WordPress Tutorial Site</h4>
</header>
<h2><a href=”http://wordpresstutorial.dev/2017/06/12/php-tutorial-blog-post/”>PHP Tutorial Blog Post</a></h2>
<p>PHP is the language that most of WordPress is built with. It is a scripting language that has humble roots, but has evolved to become a very powerful and modern language with full support for namespaces, object oriented programming, class reflection, closures, and much more. This in fact, is just an example post so we can test our custom wordpress theme. So glad you could read this example WordPress Post.</p>
<h2><a href=”http://wordpresstutorial.dev/2017/06/12/wordpress-tutorial-blog-post/”>WordPress Tutorial Blog Post</a></h2>
<p>Hello World! We will write a short tutorial here about WordPress. Of course this is just dummy text for this post so that we can have something to read. Maybe you like swimming during the summer. Eating hamburgers at the cook out is fun for all. On Monday, you can go back to WordPress Website Development. There are many things to do.</p>
<ul>
<li>Commute to office</li>
<li>Update WordPress Theme</li>
<li>Finish Statistics Reports</li>
</ul>
<p>This is the end of this dummy post.</p>
</body>
</html>

Sekali lagi, kita dapat melihat penggunaan fungsi WordPress yang sangat liberal saat mengembangkan tema Anda sendiri di WordPress. Faktanya, kami belum menulis kode kustom sama sekali. Kami hanya mempelajari apa yang dapat ditawarkan oleh berbagai fungsi WordPress kepada kami, dan kemudian menerapkannya di tema khusus kami.

Termasuk wp_head()

wp_head() adalah jenis fungsi khusus saat Anda bekerja dengan Tema WordPress. Ini tidak sesederhana yang telah kita bahas sejauh ini. Tujuan dari fungsi ini adalah untuk menyelesaikan keluaran di bagian <head> dari file header.php Anda. Sebenarnya ini dimaksudkan untuk pergi tepat sebelum tag </head> penutup. Ini menjadi penting ketika Anda mulai menambahkan berbagai plugin ke situs Anda. Ini mencetak skrip atau data di tag kepala di ujung depan. Merupakan praktik yang baik untuk selalu menyertakan wp_head () di tema Anda karena banyak plugin lain mungkin mengandalkan pengait ini untuk menambahkan gaya, skrip, atau elemen meta ke dalam area <head> situs. Kami akan menambahkannya seperti itu di sini:

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<title><?php bloginfo( ‘name’ ); ?></title>
<?php wp_head() ?>
</head>

<body <?php body_class(); ?>>

<header class=”site-header”>
<h1><?php bloginfo( ‘name’ ); ?></h1>
<h4><?php bloginfo( ‘description’ ); ?></h4>
</header>

Menyelesaikan footer.phpMenyelesaikan footer.php

Kami telah menambahkan pengetahuan dasar yang diperlukan di file header.php. Sekarang, mari kita lanjutkan mengoperasikan file footer.php. Kami perlu melakukan beberapa hal. Ingat, di file header.php kami, kami telah membuka tag html dan body. Ini perlu ditutup di beberapa titik. File footer.php adalah tempat yang baik untuk melakukan ini. Oleh karena itu, selain memanggil fungsi wp_footer (), kami juga akan menambahkan tag </html> dan </body> penutup.

footer.php

<footer class=”site-footer”>
<p><?php bloginfo( ‘name’ ) ?></p>
</footer>

<?php wp_footer() ?>
</body>
</html>

Mengubah Informasi Situs Di Dashboard WordPress

Dashboard WordPress
phpbbstyles.com

Anda mungkin bertanya-tanya mengapa kami harus menggunakan semua fungsi mewah ini untuk membangun tema kami. Misalnya, ketika kami ingin mencantumkan nama dan tagline situs kami, kami menggunakan fungsi bloginfo() yang meneruskan parameter nama dan deskripsi. Alasannya adalah karena umumnya, Anda tidak ingin memasukkan kode keras nilai-nilai ini ke situs Anda. Ini adalah informasi yang mungkin berubah. Selain itu, jika Anda membuat tema Anda tersedia untuk umum, mereka akan memiliki nama dan tagline mereka sendiri untuk situs web mereka. Mereka seharusnya dapat mengunjungi dasbor admin di WordPress dan memperbarui Pengaturan Umum mereka untuk melihat data ini terisi secara otomatis.

Membuat Tautan Judul Situs Ke BerandaMembuat Tautan Judul Situs Ke Beranda

Sebagian besar tema menyediakan kemampuan untuk mengklik teks judul situs web dan membawa pengguna ke halaman beranda situs web. Dengan cara ini, di mana pun pengguna berada di situs web, mereka dapat mengeklik teks judul kapan saja dan kembali langsung ke beranda situs web. Sekarang mari kita tambahkan link di header.php.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<title><?php bloginfo( ‘name’ ); ?></title>
<?php wp_head() ?>
</head>

<body <?php body_class(); ?>>
<header class=”site-header”>
<h1><a href=”<?php echo home_url(); ?>”><?php bloginfo( ‘name’ ); ?></a></h1>
<h4><?php bloginfo( ‘description’ ); ?></h4>
</header>

Langkah Ketujuh: Tambahkan file functions.php ke tema Anda

Pada titik ini, kami memiliki empat file dalam tema khusus kami. Yaitu index.php, style.css, header.php, dan footer.php. Mungkin file terpenting berikutnya yang perlu kita miliki adalah file functions.php.

File functions.php di WordPress melakukan banyak hal untuk tema Anda. Ini adalah file tempat Anda menempatkan kode untuk mengubah perilaku default WordPress. Anda hampir dapat menganggap functions.php sebagai bentuk plugin untuk WordPress dengan beberapa poin penting yang perlu diingat:

– Tidak membutuhkan teks Header yang unik
– Disimpan di folder yang menyimpan file tema Anda
– Hanya dijalankan jika dalam direktori tema yang saat ini diaktifkan
– Berlaku hanya untuk tema saat ini
– Dapat memanggil fungsi PHP, fungsi WordPress, atau fungsi kustom

Satu hal yang benar-benar kami butuhkan dalam tema adalah gaya yang lebih baik! Mari buat fungsi di file functions.php untuk menyertakan file style.css di tema kita. Inilah cara kami mencapai tujuan ini.

<?php

function custom_theme_assets() {
wp_enqueue_style( ‘style’, get_stylesheet_uri() );
}

add_action( ‘wp_enqueue_scripts’, ‘custom_theme_assets’ );

Potongan kode ini akan menyertakan, atau mengaktifkan, stylesheet tema khusus kita. Sekarang Anda mungkin bertanya-tanya mengapa kita menggunakan fungsi kustom, padahal sepertinya kita bisa dengan mudah menautkan sendiri ke stylesheet secara manual di file header.php. Nah, ini bermuara pada melakukan sedikit lebih banyak pekerjaan di depan untuk keuntungan yang lebih besar atas usaha Anda nanti. Saat tema menjadi lebih kompleks dan lebih banyak aset ditambahkan, Anda akan senang memiliki fungsi yang satu ini yang dapat menangani semua pekerjaan berat untuk Anda.

Sekarang saatnya membuat segala sesuatunya terlihat lebih indah. Pertama, tambahkan pembungkus <div> dengan kelas kontainer. Awal <div> akan ditempatkan di header.php, dan akhir <div> akan ditempatkan di footer.php. Kami juga akan menggunakan tag <article> dengan kelas posting untuk membungkus output posting di index.php. Ini akan memberi kita kelas target di file class.css, jadi kita bisa mengatur lebar halaman. Pada langkah ini, kami juga akan menambahkan beberapa gaya yang lebih baik ke style.css.

Langkah kedelapan: Tambahkan Beberapa Gaya ke Tema Anda

header.php

Menambahkan <div> pembuka ke file header.php.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<title><?php bloginfo( ‘name’ ); ?></title>
<?php wp_head() ?>
</head>

<body <?php body_class(); ?>>
<div class=”container”>
<header class=”site-header”>
<h1><a href=”<?php echo home_url(); ?>”><?php bloginfo( ‘name’ ); ?></a></h1>
<h4><?php bloginfo( ‘description’ ); ?></h4>
</header>

footer.php

Menambahkan penutup </div> ke file footer.php.

<footer class=”site-footer”>
<p><?php bloginfo( ‘name’ ) ?></p>
</footer>
</div> <!– closes <div class=container”> –>

<?php wp_footer() ?>
</body>
</html>

index.php

Membungkus keluaran postingan dengan tag <article>

<?php

get_header();

if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>

<article class=”post”>
<h2><a href=”<?php the_permalink() ?>”><?php the_title() ?></a></h2>
<?php the_content() ?>
</article>

<?php endwhile;

else :
echo ‘<p>There are no posts!</p>’;

endif;

get_footer();

?>

footer.php

Menambahkan penutup </div> ke file footer.php.

<footer class=”site-footer”>
<p><?php bloginfo( ‘name’ ) ?></p>
</footer>
</div> <!– closes <div class=container”> –>

<?php wp_footer() ?>
</body>
</html>

index.php

Membungkus keluaran postingan dengan <article> tag

<?php

get_header();

if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>

<article class=”post”>
<h2><a href=”<?php the_permalink() ?>”><?php the_title() ?></a></h2>
<?php the_content() ?>
</article>

<?php endwhile;

else :
echo ‘<p>There are no posts!</p>’;

endif;

get_footer();

?>

style.css

Terakhir, kami menambahkan beberapa peningkatan gaya CSS untuk membuat tema terlihat sedikit lebih bagus.

/*
Theme Name: customtheme
Author: Vegibit
Author URI: https://vegibit.com
Version: 1.0
*/

body {font-family: Arial, sans-serif;
font-size: 16px;
color: #545454;}

a:link, a:visited {color: #4285f4;}

p {line-height: 1.7em;}

div.container {max-width: 960px;
margin: 0 auto;}

article.post {border-bottom: 4px dashed #ecf0f1;}

article.post:last-of-type {border-bottom: none;}

.site-header {border-bottom: 3px solid #ecf0f1;}

.site-footer {border-top: 3px solid #ecf0f1;}

Sekarang, ketika kita menggunakan browser untuk mengunjungi situs pengujian, kita dapat melihat bahwa tema WordPress yang kita kembangkan selangkah demi selangkah dalam tutorial ini terlihat sangat bagus!