0

I've been working on my own theme and for some reason wordpress doesn't seem to be implementing my code. My navigation bar doesn't load right if I'm logged in but loads find if I'm logged out, however any bootstrap coding I put in the body loads right if I'm logged in but doesn't load if I'm logged out.

When I'm logged in:

enter image description here

When I'm logged out:

enter image description here

Header Code:

  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Le styles -->
    <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">


    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
  </head>
<?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>
    <section class="navigation">
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="<?php echo site_url(); ?>">AdventureSpace</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <?php wp_list_pages(array('title_li' => '', 'exclude' => 4)); ?>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>
     <section id="body-content">

I don't see any reason for it to be loading like this. You can even see that when logged it in fails to load the navigation bar correctly but it loads the columns right. I'm using xampp to run wordpress on my laptop right now.

Update - Further Information my style.css (the commented part was from a tutorial I did which I'll also link below):

/*
Theme Name: WP Bootstrap
Theme URI: http://teamtreehouse.com/how-to-build-a-simple-responsive-wordpress-site-with-twitter-bootstrap
Description: A simple responsive theme built with Bootstrap
Author: Zac Gordon
Author URI: http://zacgordon.com/
Version: 1.0
Tags: responsive, white, bootstrap

License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
License URI: http://creativecommons.org/licenses/by-sa/3.0/

This is an example theme to go along with the Treehouse blog post on <a href="http://teamtreehouse.com/how-to-build-a-responsive-wordpress-site-with-twitter-bootstrap">How to Build a Simple Responsive WordPress Site Using Twitter Bootstrap</a>.
*/

@import url('bootstrap/css/bootstrap.css');
@import url('bootstrap/css/bootstrap-responsive.css');
body { 
     padding-top: 70px; 
     padding-bottom: 40px; 
}

Header.php:

  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Le styles -->
    <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">


    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
  </head>
<?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>
    <section class="navigation">
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="<?php echo site_url(); ?>">AdventureSpace</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <?php wp_list_pages(array('title_li' => '', 'exclude' => 4)); ?>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>
     <section id="body-content">

Footer.php

     <hr>

      <footer>
        <p>© Company 2012</p>
      </footer>

    </section> <!-- /container -->
    </div> <!-- /container -->

    <?php wp_footer(); ?>

  </body>
</html>

functions.php (a lot of whats in here was given as a solution to the navbar being hidden behind the admin bar here WordPress admin bar overlapping twitter bootstrap navigation):

<?php 

function wpbootstrap_scripts_with_jquery()
{
    // Register the script like this for a theme:
    wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
add_action('wp_head', 'mbe_wp_head');

function mbe_body_class($classes){
    if(is_user_logged_in()){
        $classes[] = 'body-logged-in';
    } else{
        $classes[] = 'body-logged-out';
    }
    return $classes;
}
function mbe_wp_head(){
    echo '<style>'
    .PHP_EOL
    .'body{ padding-top: 40px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'@media only screen and (min-width: 783px) {'
    .PHP_EOL
    .'body{ padding-top: 40px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'}</style>'
    .PHP_EOL;
}
?>

Original tutorial here http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial

Its not a problem with the navbar, if I hadn't followed the instructions above for unhiding it you wouldn't see that dark part under the admin bar that says "AdventureSpace." For some reason my navbar isn't loading properly when I'm logged in (see pictures above) but loads fine when I'm logged out.

I'm much less concerned about he navbar however. I would like to fix that but I'm much more interested in why my other boostrap code isn't working:

    <div class="container">
    <div class="row">
        <div class="col-md-6">1 of 2</div>
        <div class="col-md-6">1 of 2</div>
    </div>
    <div class="row">
        <div class="col">1 of 3</div>
        <div class="col">1 of 3</div>
        <div class="col">1 of 3</div>
    </div>
    </div>
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum ex laoreet venenatis imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ligula velit, efficitur a accumsan sit amet, cursus eget metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras consequat purus finibus lacus condimentum pulvinar. Aenean at commodo nulla, sollicitudin venenatis tortor. Vestibulum id efficitur sapien. Nulla congue tortor in mauris pulvinar, eu ultricies eros convallis. Sed non ligula id nulla lobortis vestibulum. Ut sed libero vel justo imperdiet suscipit a vel lectus. Aenean eget sapien eu eros facilisis finibus vitae et turpis. Nulla facilisi. Sed bibendum vehicula imperdiet. In quis erat sed massa volutpat posuere quis nec purus. Donec sagittis erat ex, congue sodales massa rutrum a. Morbi sed neque vel elit bibendum pretium sit amet vitae sapien.

Mauris vitae ligula non magna fringilla efficitur. Vestibulum convallis lacus eget imperdiet accumsan. Integer eget nulla eget urna gravida ultricies quis id lectus. Nulla dictum, mauris sed sollicitudin laoreet, augue magna feugiat leo, eu euismod ipsum massa eu tellus. Sed nec urna facilisis, posuere augue finibus, facilisis est. Proin pulvinar ex nec consequat egestas. Ut rutrum mollis mi, vitae rutrum tortor gravida vel. Nullam eu libero lobortis ligula molestie ultricies. Suspendisse eleifend, ligula ac feugiat ultrices, mi ipsum tincidunt augue, quis dapibus turpis sem accumsan enim. Ut sit amet eleifend arcu, ac condimentum ipsum. Praesent efficitur felis mauris, non ullamcorper elit tempus eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla gravida nisl ipsum, id viverra justo finibus nec. Pellentesque placerat euismod lectus, sit amet vulputate diam. Cras ut nisl vel urna euismod fringilla id et turpis.

Donec et orci lacus. Curabitur dapibus nisi sit amet lobortis congue. Morbi turpis ex, sollicitudin nec nulla id, molestie lacinia dolor. Donec nec erat quis elit consectetur venenatis sit amet non nulla. Ut lacinia tempus faucibus. Mauris finibus ex sit amet urna feugiat, vel vehicula nisl vestibulum. Duis pulvinar magna ante, tempor pretium orci mollis at.

In aliquet risus vel quam hendrerit sagittis. Proin laoreet vel felis ut tempus. Donec efficitur odio in erat vehicula auctor. Vestibulum posuere tortor vitae ultricies pretium. Nam euismod sollicitudin tortor, id interdum orci tincidunt vel. Vivamus lobortis euismod finibus. Duis iaculis turpis nec orci viverra, auctor sodales urna vestibulum.

Etiam facilisis ac magna id pharetra. Donec a orci dolor. Ut aliquet lobortis dignissim. Aliquam quis tortor vel nunc varius pharetra. Ut placerat elit a risus semper finibus vitae eu tellus. Praesent sed sapien id nunc luctus dictum. Nunc rhoncus viverra metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla id iaculis nibh. Maecenas nec nunc eget eros sodales interdum. Aliquam euismod massa in viverra tincidunt. Aliquam dolor felis, faucibus sed interdum vel, congue non tortor. Ut luctus nibh nisl, vel mollis velit dignissim eget. Integer pellentesque nec enim nec pulvinar. Donec varius at libero posuere varius.

</div>

As you can see, there should be some sort of grid system also showing. It works when I'm logged in and doesn't work when I'm logged out which is the completely opposite problem.

  • Your menu is loading fine. The admin bar is just covering it up. – Nathan Johnson Apr 20 '17 at 18:55
  • Nathan gives your exact answer. Your implementation is correct. Basically theme implementation you can use two browsers, one browser in login admin and another logout mode. You can also hide admin bar using this plugin wordpress.org/plugins/hide-admin-bar – Faysal Mahamud Apr 20 '17 at 19:06
  • Then what about the rest of the code? Also I already fixed the admin bar issue. If you look closer at the screenshot it shows both my navbar and the admin bar. – user214936 Apr 20 '17 at 20:51
  • This is off topic, but wp_enqueue_script("jquery"); in your header.php file, should not probably be there. Maybe you should make the wp_enqueue()' call via functions.php` – Greeso Apr 21 '17 at 5:12
0

Add the following to the end of your page, at the footer section:

wp_footer();

And see if this work.

  • Nope, it was already there and I've even tried removing it to see if that would make any difference at all. :( – user214936 Apr 21 '17 at 0:03
  • I think then, you should make your code bare-bones. Remove all divs (and sections ....etc.), and add them one by one, to see where the culprit is. – Greeso Apr 21 '17 at 5:16
  • That's kind of what I ended up doing. I eventually just erased the whole header and rewrote it from scratch, testing it in an HTML file first and then putting the working navbar code into the new header file. I couldn't get any of the bootstrap files to link correctly from wordpress (though I got them to link to the HTML file) so I used the CDN instead. Whenever I tried to link the bootstrap and jquery files from memory instead of the CDN I noticed that in the inspection panel it would say that the files were missing even though I could confirm that they were in the folder I was pointing to – user214936 Apr 21 '17 at 17:20
  • Then you are not invoking jQuery correctly. As I mentioned to you in the comment above, you do not enqueue jquery that way, it has to be through the wp_enqueue_scriopts action – Greeso Apr 21 '17 at 19:21
  • I actually did try that too. Just got the same error, that it couldnt find the file. I checked the location listed on the error and the jquery files still there. – user214936 Apr 21 '17 at 21:32
0

In this situation, I would keep the admin bar visible, and use some body padding to push non-admin-bar content lower. This CSS will probably work for you:

body.logged-in { margin-top: 28px !important; }

  • Thanks but I already have code like this implemented in the functions.php and even tried moving that particular bit of code to my styles.css but it still has the same problem. Its not a problem with my navbar being "hidden behind the admin bar", as you can see now that I've posted the rest of my code I've already fixed that. Also, I can change "AdventureSpace" by finding those words in my navbar code and changing it. AdventureSpace is not the name of the website (yet). – user214936 Apr 21 '17 at 0:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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