Adding if statement

Question

I'm pretty new to PHP however have managed to put together a site I'm happy with. Once small issue I am having is that I would like to add content for users with specific roles, this means adding an if statement in the middle of a pre existing one for me.

Below is my current code:

<?php global $current_user; wp_get_current_user(); ?>
        <?php if ( is_user_logged_in() ) { 
         echo '<ul style="padding: 0; margin: 0;">
                    <li class="adminBar" style="float: left; line-height: 60px; border-left: 1px solid #555555; border-right: 1px solid #555555;"><a href="#" target="_blank"><img src="#" height="40px" style="padding-left: 15px; padding-right: 15px;"></a></li>
                    <li class="adminBar" style="float: left; line-height: 60px; border-right: 1px solid #555555;"><a href="#" target="_blank"><img src="#" height="40px" style="padding-left: 15px; padding-right: 15px;"></a></li>
                    <li class="adminBar" style="float: left; line-height: 60px; border-right: 1px solid #555555;"><a href="#" target="_blank"><img src="#" height="40px" style="padding-left: 15px; padding-right: 15px;"></a></li>
                    <li class="adminBar" style="float: left; line-height: 60px; border-right: 1px solid #555555;"><a href="#" target="_blank"><img src="#" height="40px" style="padding-left: 15px; padding-right: 15px;"></a></li>
                    <li class="adminBar" style="float: left; line-height: 60px; border-right: 1px solid #555555;"><a href="#" target="_blank"><img src="#" height="40px" style="padding-left: 15px; padding-right: 15px;"></a></li>
                    <li id="logoutDrop" class="loginBtn" style="background-color: #27618d; float: right;"><a style="text-decoration: none; text-transform: none; line-height: 60px; color: #fff; padding: 15px 20px 15px 20px;" href=""' . wp_logout_url() . '">Logout</a>' . '
                    <li id="logoutDrop" style="border-right: 1px solid #555; padding: 0 15px 0 15px; float: right;"><a style="text-transform: none; text-decoration: none; line-height: 60px; color: #fff;">Hi, ' . $current_user->user_login . '</a>' . '

                        <ul style="display: none;">
                            <li><a href="#" style="">Logout</a></li>
                        </ul>
                    </li>' .
                '</ul>' . "\n";} 

        else  { echo '
            <div id="stmposTitle">
            <a href="/" style="text-decoration: none; float: left; text-transform: none; line-height: 35px; color: #fff;">
            <img src="#" style="margin-top: 2px; float:left; padding-right: 10px;">Name</a></div>
            <a class="loginBtn" style="float: right; line-height: 35px; color: #fff; background-color: #27618d; padding: 0 15px; 0 15px; text-decoration: none;" href="' . wp_login_url() . '">Login</a>' ;} ?>

I essentially want to allow it so that there is a part of this menu that logged in users with only specific roles can see. Something like the below although it is not quite right as it stops the site from loading:

<?php global $current_user; wp_get_current_user(); ?>
        <?php if ( is_user_logged_in() ) { 
         echo '<ul style="padding: 0; margin: 0;">
                    <li class="adminBar" style="float: left; line-height: 60px; border-left: 1px solid #555555; border-right: 1px solid #555555;"><a href="#" target="_blank"><img src="#" height="40px" style="padding-left: 15px; padding-right: 15px;"></a></li>
                    <li class="adminBar" style="float: left; line-height: 60px; border-right: 1px solid #555555;"><a href="#" target="_blank"><img src="#" height="40px" style="padding-left: 15px; padding-right: 15px;"></a></li>
                    <li class="adminBar" style="float: left; line-height: 60px; border-right: 1px solid #555555;"><a href="#" target="_blank"><img src="#" height="40px" style="padding-left: 15px; padding-right: 15px;"></a></li>
                    <li class="adminBar" style="float: left; line-height: 60px; border-right: 1px solid #555555;"><a href="#" target="_blank"><img src="#" height="40px" style="padding-left: 15px; padding-right: 15px;"></a></li>
                    <li class="adminBar" style="float: left; line-height: 60px; border-right: 1px solid #555555;"><a href="#" target="_blank"><img src="#" height="40px" style="padding-left: 15px; padding-right: 15px;"></a></li>'

                    <?php if( current_user_can('editor') || current_user_can('administrator') ) {  ?>
                        content
                    <?php } ?>

                    '
                    <li id="logoutDrop" class="loginBtn" style="background-color: #27618d; float: right;"><a style="text-decoration: none; text-transform: none; line-height: 60px; color: #fff; padding: 15px 20px 15px 20px;" href=""' . wp_logout_url() . '">Logout</a>' . '
                    <li id="logoutDrop" style="border-right: 1px solid #555; padding: 0 15px 0 15px; float: right;"><a style="text-transform: none; text-decoration: none; line-height: 60px; color: #fff;">Hi, ' . $current_user->user_login . '</a>' . '

                        <ul style="display: none;">
                            <li><a href="#" style="">Logout</a></li>
                        </ul>
                    </li>' .
                '</ul>' . "\n";} 


        else  { echo '
            <div id="stmposTitle">
            <a href="/" style="text-decoration: none; float: left; text-transform: none; line-height: 35px; color: #fff;">
            <img src="#" style="margin-top: 2px; float:left; padding-right: 10px;">Name</a></div>
            <a class="loginBtn" style="float: right; line-height: 35px; color: #fff; background-color: #27618d; padding: 0 15px; 0 15px; text-decoration: none;" href="' . wp_login_url() . '">Login</a>' ;} ?>

Thanks in advance for your help!

Answer 1

I have format your code and break echo statement into parts and add if condition. you can take reference from below code.

 <?php if ( is_user_logged_in() ) { 
         echo '<ul style="padding: 0; margin: 0;">
            <li class="adminBar" style="float: left; line-height: 60px; border-left: 1px solid #555555; border-right: 1px solid #555555;"><a href="#" target="_blank"><img src="#" height="40px" style="padding-left: 15px; padding-right: 15px;"></a></li>
            <li class="adminBar" style="float: left; line-height: 60px; border-right: 1px solid #555555;"><a href="#" target="_blank"><img src="#" height="40px" style="padding-left: 15px; padding-right: 15px;"></a></li>
            <li class="adminBar" style="float: left; line-height: 60px; border-right: 1px solid #555555;"><a href="#" target="_blank"><img src="#" height="40px" style="padding-left: 15px; padding-right: 15px;"></a></li>
            <li class="adminBar" style="float: left; line-height: 60px; border-right: 1px solid #555555;"><a href="#" target="_blank"><img src="#" height="40px" style="padding-left: 15px; padding-right: 15px;"></a></li>
            <li class="adminBar" style="float: left; line-height: 60px; border-right: 1px solid #555555;"><a href="#" target="_blank"><img src="#" height="40px" style="padding-left: 15px; padding-right: 15px;"></a></li>' ; 

            if( current_user_can('editor') || current_user_can('administrator') ) {  
                ?>
                # add you content here
                <?php 
            } 

           echo  '<li id="logoutDrop" class="loginBtn" style="background-color: #27618d; float: right;"><a style="text-decoration: none; text-transform: none; line-height: 60px; color: #fff; padding: 15px 20px 15px 20px;" href=""' . wp_logout_url() . '">Logout</a>' . '
            <li id="logoutDrop" style="border-right: 1px solid #555; padding: 0 15px 0 15px; float: right;"><a style="text-transform: none; text-decoration: none; line-height: 60px; color: #fff;">Hi, '.$current_user->user_login. '</a>
              <ul style="display: none;">
                <li><a href="#" style="">Logout</a></li>
              </ul>
            </li>' .
          '</ul>';
      }      
      else  
      { 
        echo '<div id="stmposTitle">
        <a href="/" style="text-decoration: none; float: left; text-transform: none; line-height: 35px; color: #fff;">
        <img src="#" style="margin-top: 2px; float:left; padding-right: 10px;">Name</a></div>
        <a class="loginBtn" style="float: right; line-height: 35px; color: #fff; background-color: #27618d; padding: 0 15px; 0 15px; text-decoration: none;" href="' . wp_login_url() . '">Login</a>' ;
      } 
  ?>

Answer 2

Firstly, your code is wrong. You are not allowed to put an if statement inside echo.

However, if you have your menu created using default WordPress menus (Appearance - Menu), which is definitely the right way, rather than hard coding it, better way would be to dynamically remove unwanted menu items based on your conditions using wp_nav_menu_objects filter.

add_filter('wp_nav_menu_objects', 'remove_menu_items', 10, 2);

function remove_menu_items($removed_menu_objects, $args) {

    // if current user role is Editor or Administrator, do not remove anything
    if( current_user_can('editor') || current_user_can('administrator') )
        return $removed_menu_objects;

    // for any other user role, remove menu items with title of "Logout" and "Contact"
    $remove = array('Logout', 'Contact');

    foreach ($removed_menu_objects as $key => $menu_object) {
        if (in_array($menu_object->title, $remove)) {
            unset($removed_menu_objects[$key]);
        }
    }

    return $removed_menu_objects;
}

Code goes inside functions.php of your active child theme. You can also compare e.g. menu item IDs, rather than their titles.