Create WordPress Theme x Bootstrap 5

by hyvercode

WordPress adalah sistem manajemen konten (CMS) open-source yang digunakan untuk membuat dan mengelola situs web dan blog. WordPress populer karena mudah digunakan, bahkan oleh pemula, dan tidak memerlukan pengetahuan dasar pemrograman.

Bootstrap adalah kerangka kerja front-end yang digunakan untuk membuat situs web dan aplikasi web.

Persiapan

Setup environment

  1. Download WordPress dan install wordpress di lokal https://wordpress.org/download/
  2. Download local server XAMPP , sesuaikan dengan System Operasi yang kita gunakan.
  3. Copy folder wordpress yang telah di download ke dalam folder xampp/htdocs.

Membuat file-file utama yang dibutuhkan untuk tema yang akan kita buat

  1. Masuk ke dalam folder wordpress/wp-content/themes
  2. Buat folder baru untuk temet yang akan kita buat , contoh bootstrap-tutorial-theme
  3. Buat file berikut pada folder yang telah kita buat
1. style.css (for theme metadata)
2. index.php (main template file)
3. functions.php (for theme functionality)
4. header.php (header template)
5. footer.php (footer template)
6. single.php (single post template)
7. page.php (page template)
8. front-page.php (landing page template)
9. archive.php (archive page template)
10. 404.php (404 error page)
11. screenshot.png (theme thumbnail)

Tambahkan Metadata pada file styles.css

Ini digunakan sebagai identitas pembuat tema

/*
Theme Name: Bootstrap Tutorial Theme
Theme URI: https://example.com/bootstrap-tutorial-theme
Author: Your Name
Author URI: https://example.com
Description: A modern WordPress theme built with Bootstrap 5 for a tutorial website.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bootstrap-tutorial-theme
*/

Enqueue Bootstrap 5

  1. Download Bootstrap versi compailled CSS dan JS getbootstrap.com.
  2. Extract file hasil download lalu pindahkan / copy file bootstrap.min.css dan bootstrap.bundle.min.js kedalam folder (contoh, assets/css and assets/js).
  3. Pada file functions.php, enqueue Bootstrap CSS and JS:
function bootstrap_tutorial_theme_enqueue_styles() {
    // Enqueue Bootstrap CSS
    wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/assets/css/bootstrap.min.css');
    // Enqueue custom styles
    wp_enqueue_style('custom-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'bootstrap_tutorial_theme_enqueue_styles');

function bootstrap_tutorial_theme_enqueue_scripts() {
    // Enqueue Bootstrap JS
    wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'bootstrap_tutorial_theme_enqueue_scripts');

1. Buat Halaman Header

Buat file header.php dan tambahkan code berikut:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header class="bg-primary text-white py-3">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="h4 mb-0"><?php bloginfo('name'); ?></h1>
                <?php
                wp_nav_menu(array(
                    'theme_location' => 'primary',
                    'menu_class'     => 'navbar-nav d-flex flex-row',
                    'container'      => false,
                ));
                ?>
            </div>
        </div>
    </header>

2. Buat Halaman Footer

Buat file footer.php dan tambahkan code berikut:

<footer class="bg-dark text-white py-4">
    <div class="container">
        <p class="mb-0 text-center">&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
    </div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Register menu dalam file functions.php

function bootstrap_tutorial_theme_register_menus() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'bootstrap-tutorial-theme'),
    ));
}
add_action('init', 'bootstrap_tutorial_theme_register_menus');

Buat Primary Menu pada wordpress kita.

3. Buat Halaman Landing Page

Buat landing halaman front-page.php

Jika kita ingin membuat halaman utama wordpress kita adalah landing page.

<?php get_header(); ?>

<main class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <h1 class="display-4">Welcome to Our Tutorial Website</h1>
                <p class="lead">Learn the latest technologies with our step-by-step tutorials.</p>
                <a href="<?php echo get_permalink(get_option('page_for_posts')); ?>" class="btn btn-primary btn-lg">Explore Tutorials</a>
            </div>
        </div>
    </div>
</main>

<?php get_footer(); ?>

4. Buat Page Index

Page ini digunakan untuk menampilkan semua Post yang telah kita buat index.php

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 */
get_header(); // Include the header
?>

<main class="container py-5">
    <div class="row">
        <div class="col-md-8">
            <?php
            if (have_posts()) :
                while (have_posts()) : the_post();
                    // Display post content
                    get_template_part('template-parts/content', get_post_type());
                endwhile;

                // Pagination
                the_posts_pagination(array(
                    'prev_text' => __('Previous', 'bootstrap-tutorial-theme'),
                    'next_text' => __('Next', 'bootstrap-tutorial-theme'),
                ));
            else :
                // If no posts are found
                get_template_part('template-parts/content', 'none');
            endif;
            ?>
        </div>
        <div class="col-md-4">
            <?php get_sidebar(); // Include the sidebar ?>
        </div>
    </div>
</main>

<?php
get_footer(); // Include the footer
?>

5. Buat Post Page

Page ini digunakan untuk halaman post yang kita buat, buat file single.php

<?php get_header(); ?>

<main class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                    <article>
                        <h1 class="display-4"><?php the_title(); ?></h1>
                        <div class="my-4"><?php the_content(); ?></div>
                    </article>
                <?php endwhile; endif; ?>
            </div>
        </div>
    </div>
</main>

<?php get_footer(); ?>

6. Buat Part Page Content

Page ini digunakan sebagai dynamic content:

  1. Membuat folder baru dengan nama template-parts
  2. Buat file dengan nama content.php
<article id="post-<?php the_ID(); ?>" <?php post_class('mb-5'); ?>>
    <header class="entry-header">
        <?php
        if (is_singular()) :
            the_title('<h1 class="entry-title">', '</h1>');
        else :
            the_title('<h2 class="entry-title"><a href="' . esc_url(get_permalink()) . '" rel="bookmark">', '</a></h2>');
        endif;
        ?>
        <div class="entry-meta">
            <?php
            bootstrap_tutorial_theme_posted_on();
            bootstrap_tutorial_theme_posted_by();
            ?>
        </div>
    </header>

    <div class="entry-content">
        <?php
        the_content(sprintf(
            wp_kses(
                __('Continue reading<span class="screen-reader-text"> "%s"</span>', 'bootstrap-tutorial-theme'),
                array('span' => array('class' => array()))
            ),
            get_the_title()
        ));

        wp_link_pages(array(
            'before' => '<div class="page-links">' . esc_html__('Pages:', 'bootstrap-tutorial-theme'),
            'after'  => '</div>',
        ));
        ?>
    </div>

    <footer class="entry-footer">
        <?php bootstrap_tutorial_theme_entry_footer(); ?>
    </footer>
</article>

Tambahkan code berikut pada file functions.php

function bootstrap_tutorial_theme_posted_on() {
    $time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';
    if (get_the_time('U') !== get_the_modified_time('U')) {
        $time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
    }

    $time_string = sprintf(
        $time_string,
        esc_attr(get_the_date(DATE_W3C)),
        esc_html(get_the_date()),
        esc_attr(get_the_modified_date(DATE_W3C)),
        esc_html(get_the_modified_date())
    );

    echo '<span class="posted-on">' . $time_string . '</span>';
}

function bootstrap_tutorial_theme_posted_by() {
    echo '<span class="byline"> by ' . esc_html(get_the_author()) . '</span>';
}

function bootstrap_tutorial_theme_entry_footer() {
    if ('post' === get_post_type()) {
        $categories_list = get_the_category_list(esc_html__(', ', 'bootstrap-tutorial-theme'));
        if ($categories_list) {
            echo '<span class="cat-links">' . $categories_list . '</span>';
        }

        $tags_list = get_the_tag_list('', esc_html__(', ', 'bootstrap-tutorial-theme'));
        if ($tags_list) {
            echo '<span class="tags-links">' . $tags_list . '</span>';
        }
    }
}

7. Membuat Sidebar

  1. Buat file sidebar.php dalam folder tema
  2. Tambahkan code php berikut
<aside id="secondary" class="widget-area">
    <?php dynamic_sidebar('sidebar-1'); ?>
</aside>

Selanjutnya buat function dynamic sidebar pada file functions.php

function bootstrap_tutorial_theme_widgets_init() {
    register_sidebar(array(
        'name'          => __('Sidebar', 'bootstrap-tutorial-theme'),
        'id'            => 'sidebar-1',
        'description'   => __('Add widgets here to appear in your sidebar.', 'bootstrap-tutorial-theme'),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));
}
add_action('widgets_init', 'bootstrap_tutorial_theme_widgets_init');

8. Akses Index Page

  1. Akses wordpress local http://localhost/wordpress (sesuaikan dengan url local). dan masuk ke halaman Admin http://localhost/wordpress/wp-admin.
  2. Masuk keemun Settings->Reading
  3. Pastikan templare action index.php

File-file yang telah kita buat adalah file utama dari sebuah tema WordPress agar bisa digunakan atau di install di wordpress. Kita bisa mengembangkan lebih langue sesuai dengan kebutuhan atau tema Wordrpress yang akan kita buat. selain Bootstrap kita juga bisa menggunakan CSS Framework / Library dan Utilities lainnya seperti Tailwind dll. Selain Framework CSS kita juka bisa menggunakan Framework / Library JS lainnya seperti JQuery, React JS dll.

Berikut contoh file-file yang dibutuhkan :

Kode sumber bisa di download di github pada link berikut hyvercode-boots

hyvercode

Leave a Reply

Your email address will not be published. Required fields are marked *

by hyvercode