0

so im building a custom theme and ive got stuck on the navigation

if i use wp_head(); it loads bootstrap and my custom style sheet but not the navigation if i use get_header(); it loads the navigation but not bootstrap or my custom style sheet

here is my functions.php

function register_navwalker(){
    require_once get_template_directory() . '/inc/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );

function wpbootstrap_enqueue_styles() {
    wp_enqueue_style( 'bootstrap', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' );
    wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', array('jquery'), NULL, true);
}
add_action('wp_enqueue_scripts', 'wpbootstrap_enqueue_styles');

register_nav_menus(
    array(
        'main_menu'=>'Main Menu',
    )
);

here is my navigation code in header.php

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
        <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Navbar</a>
            <?php
            wp_nav_menu( array(
                'theme_location'    => 'main_menu',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
                'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                'walker'            => new WP_Bootstrap_Navwalker(),
            ) );
            ?>
    </div>
Improve this question
2
  • there's no wp_header function in WordPress, are you sure you're calling wp_head() in your header.php? There are a handful of things that are not optional that all PHP themes must do, such as wp_head in the header, wp_footer in the footer, etc, you should check the theme handbook to confirm you're doing these things
    – Tom J Nowell ♦
    Commented May 25, 2022 at 10:13
  • sorry that was a typo i meant wp_head();
    – crad98
    Commented May 25, 2022 at 10:42

1 Answer 1

Reset to default
0

You have to call both wp_head and get_header.

In your header.php, place a call to wp_head(); inside the <head> tag, then use get_header() inside your templates.

Improve this answer
4
  • thankyou for your help worked a treat
    – crad98
    Commented May 25, 2022 at 11:17
  • so its showing up in inspect element that the style sheets and scripts are linked to the page but its not actually using any bootstrap styling from the classes any advice for this
    – crad98
    Commented May 25, 2022 at 13:00
  • none, I'm not a bootstrap user, if you've confirmed that the bootstrap CSS is loading but none of the styles are being applied to your HTML then you need bootstrap help not WP help
    – Tom J Nowell ♦
    Commented May 25, 2022 at 13:20
  • ok mate thank you for your help
    – crad98
    Commented May 25, 2022 at 13:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.