WordPress.org

Ready to get started?Download WordPress

Forums

Adding Logged-in User, Date and Time to top of every page (1 post)

  1. gayle1
    Member
    Posted 1 year ago #

    I noticed a couple of posts asking about date, username etc but I can't seem to find them now, so I thought I would just start a new one. In case anyone is interested I have the logged-in user's name, today's date and time showing in all my pages by inserting this in the header (between the header div and the main div):

    <div id="welcome">
    	<?php  if (is_user_logged_in()){
    global $current_user; get_currentuserinfo();
    echo('Welcome, ' . $current_user->user_firstname . '  ');
    }
    else {
    echo "Welcome, Guest";
    };
    ?>&nbsp;&nbsp;<span id="clock">&nbsp;</span>&nbsp;&nbsp;<?php echo date(get_option('date_format')); ?></div>

    And into the <head> section (before </head>) place:

    <script type="text/javascript">
    <!--
    
    function updateClock ( )
    {
      var currentTime = new Date ( );
      var currentHours = currentTime.getHours ( );
      var currentMinutes = currentTime.getMinutes ( );
      var currentSeconds = currentTime.getSeconds ( );
      // Pad the minutes and seconds with leading zeros, if required
      currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
      currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
      // Choose either "AM" or "PM" as appropriate
      var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
      // Convert the hours component to 12-hour format if needed
      currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
      // Convert an hours component of "0" to "12"
      currentHours = ( currentHours == 0 ) ? 12 : currentHours;
      // Compose the string for display
      var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
      // Update the time display
      document.getElementById("clock").firstChild.nodeValue = currentTimeString;
    }
    // -->
    </script>

    Obviously, update your css to choose font color, size and position.
    I chose this to ensure it is not really a feature of the pages:

    #welcome {
        text-align: right;
        margin-right: 3.33%;
        font-size: small;
        color: #899f89;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic