0

TL;DR, Skip to Trouble

I am a programmer and web developer by trade. I'm attempting to launch my own small business website in order to showcase my talents. As such, I've created subdomains for each of the major development Frameworks that I can use to develop customer sites. Each of these is successfully running.

  1. DotNetNuke - ASP.NET - Main Site
  2. Joomla
  3. CodeIgnitor/CakePHP
  4. WordPress
  5. Drupal
  6. PHPbb
  7. WikiMedia
  8. Custom - Catch All for Everything Else

I'll admit that I'm old school. I used to prefer Notepad/Kate, and do it all by hand, but I understand technology changes. Up until recently, I was like every other "web guy," and would purchase a precanned theme, add a little content, make sure it all worked and resell it. In an effort to not look "Cookie Cutter", and not bankrupt my small bankroll by buying someone else's overpriced theme(s), I decided to show customer's my skills by theming each subdomain myself, which will hopefully set me apart....


Not As Easy As I Thought

  • I went to _s, and created a Starter Theme.
  • I crossed over to the Darkside by integrating Bootstrap into my theme. I'm a sucker for eye candy, and I didn't want to recreate buttons and grids by hand, and technology changes.
  • I decided on this blog example, as a base for my creative genius. Plain I know, but I'm starting off slow.
  • The Trouble Starts...

Trouble

I converted the code in the template to the Wordpress Section Files(header.php, footer.php, and sidebar.php) Hurdle 1 Jumped. Whoot.

I could't get the customized NavMenus to work until I found the BootstrapNavWalker Helper. Hurdle 2 Jumped. Whoot.

I added the following code to functions PHP to have a login link.

/**
 * Add Login/Logout to Menu
 */
function add_login_logout_link($items, $args) {
    if( $args->theme_location == 'primary' ) {
        $loginoutlink = wp_loginout('index.php', false);
        $items .= '<li>'. $loginoutlink .'</li>';
    }

    return $items;
}
add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2);

This Works, but I wanted a button, so I changed $items to:

$items .= '<li><button type="button" class="btn btn-default">'. $loginoutlink .'</button></li>';

It worked, so I thought, as I was developing in Chrome. I got home and tried in Firefox:

Q: The Button is visible in Firefox, but clicking it does nothing. Clicking it in Chrome takes me to the login page, so What is the proper way to output $items so the button and/or all bootstrap items works in every browser?

Q: I chose, the snippet above after reviewing a few dozen snippets from various places. In seeing these, I saw some that used the output buffer functions and some that didn't. What's the advantage of wrapping functions in the buffer before outputting them to the browser?

7
  • 1
    In general if it works in one modern browser but not another it means you have either a broken HTML or JS. – Mark Kaplun Sep 12 '14 at 16:46
  • How do I find which section is broken? – eyoung100 Sep 12 '14 at 16:54
  • Why this is a <button>? Button will not take you anywhere unless it is inside a <form> and type="submit". If this is standard WordPress logout link. Use anchor <a>. – Sisir Sep 12 '14 at 17:04
  • @Sisir I wanted to be fancy, but i forgot buttons only work in form tags... Your comment makes total sense, so the question should be Does Chrome render the button inside a form tag, even though I never created a form? – eyoung100 Sep 12 '14 at 17:12
  • Different browser uses different method against broken html. We can't rely on that. I think chrome is ignoring <button> and considering <a> tag while FF is counting the <button> :) – Sisir Sep 12 '14 at 17:14
0

Looking at your code (as i do not see any live link to look at). I will assume you are outputting anchor tag inside a button tag (making the HTML invalid). Try the function below instead. Notice that I changed the html from button to anchor tag.

    /**
     * Add Login/Logout to Menu
     */
    function add_login_logout_link($items, $args) {

        $redirect_to = home_url();

        if( $args->theme_location == 'primary' ) {
            $loginoutlink = wp_loginout('index.php', false);

            $link = wp_logout_url($redirect_to);
            $label = 'Logout';

            if(!is_user_logged_in()){ // user not logged in, show login url
                $link = wp_login_url( $redirect_to );
                $label = 'Login';
            }

            $items .= '<li><a class="btn btn-default" href="'. $link .'">'. $label .'</a></li>';

        }

        return $items;
    }

add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2);

Using Output Buffer

Only use output buffer when you have to. This has potential to create unusal behavior. Here is an example.

3
  • That works if I add a test to see if user is logged in. I'll get it there though. Thank You – eyoung100 Sep 12 '14 at 17:36
  • Updated :) now it will show login link if user not logged in. – Sisir Sep 13 '14 at 4:39
  • Great, I'll give you credit if you can answer the part regarding output buffers. – eyoung100 Sep 15 '14 at 5:49

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.