Theme Development for a Newbie

Question

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?

Answer 1

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.