Cara Menambahkan Class Pada (<li>) Tag WP Nav Menu

Haloo gaes, pada tutorial kali ini kita akan menambahkan class list tag (<li>) pada WP Nav Menu.

Oke aku beri penjelasan supaya jangan asal copy saja tanpa dipahami kebutuhan coding kalian.

Untuk memodifikasi class pada list tag kita akan menggunakan filter nav_menu_css_class. Class modifikasi akan kita push ke array $classes menggunakan metode square bracket ( $classes[] )

Berbeda class pada lokasi menu yang berbeda

Pada baris 7 aku memberikan kondisional jika lokasi menu “menu-footer” maka menggunakan class “list-inline-item”. Selain itu menggunakan class “nav-item”

Jadi sesuaikan dengan kebutuhan kalian. Jika hanya menggunakan 1 menu saja, hilang kondisional if tersebut.

Class pada menu yang aktif

Nah ini pada baris 14 adalah kondisional jika ada class “current-menu-item” artinya menu yang dibuka sedang aktif. Nah biasanya pada menu yang aktif kita akan tambahkan class “active” sesuai dengan styling css yang kita buat.

Menambahkan Class pada Link Tag <a>

Nah kalau ini untuk menambahkan class pada tag link <a href=”#”> pada menu.

function tambah_class_pada_link($classes, $item) {

    // Tambah class
    $classes['class'] = 'nav-link';

    // Tambah class 'active' jika page sedang aktif
    if (in_array('current_page_item', $item->classes)) {
        $classes['class'] = 'nav-link active';
    }

    return $classes;
}
add_filter('nav_menu_link_attributes', 'tambah_class_pada_link', 10, 2);

Nah sekian tutorialnya, jika kalian ada pertanyaan atau masukan tulis pada kolom komentar. terima kasih. selamat mencoba. 🙂