Cara Menambahkan Custom CSS dan Javascript pada Wordpress Block Theme

mrfdn author

Rafi

Pasang script function ini untuk menambahkan custom CSS dan JS pada wordpress block theme

mrfdn.com - Saya sedang membuat wordpress custom theme.

Theme dasarnya adalah Twenty Twenty Three. Yang mana pada theme ini merupakan implementasi dari fitur wordpress block.

Wordpress block theme ini model pengembangannya beda sekali dengan pengembangan theme wordpress secara classic yang mana semuanya dibuat menggunakan php.

Pada wordpress block theme kita menggunakan file .json untuk menulis konfigurasi sekaligus styling.

Nah, karena saya tidak familiar dengan penulisan ini, saya ingin menyematkan konfigurasi css dan js saya sendiri.

Jadi pada file function.php yang disematkannya saya hanya menambahkan baris ini :

// activate style style.css file
function mytheme_enqueue_scripts(){
  wp_enqueue_style(
    'mytheme-styles',
    get_template_directory_uri() . '/style.css',
    array(),
    wp_get_theme()->get( 'Version' )
  );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );

// activate stylesheet for editor
function mytheme_theme_setup() {
  add_editor_style('style.css');
}
add_action( 'after_setup_theme', 'mytheme_theme_setup');


// custom javascript code
function mytheme_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/script.js');
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_custom_js');

Kemudian saya bisa dengan gampang menuliskan custom css dan js secara terpisah pada file tersendiri (style.css dan script.js)

Sekian.

Semoga bermanfaat.

mrfdn author

Rafi

  • 15 year+ of Linux user.
  • 5 years+ blogger and web developer.

Jika artikel yang dibuatnya ternyata bermanfaat, support dengan cara

Baca juga