[Resolved] Show current date in header

Home Forums Support Show current date in header

  • This topic has 13 replies, 3 voices, and was last updated 2 months ago by David.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1358773
    Leon

    I’d like to show the current date in the header in the new (GeneratePress) version of my site. In the present (custom-made) theme that is done by adding a little code to header.php. How can I create in in GeneratePress?
    Thanks, Leon

    #1358880
    David
    Staff
    Customer Support

    Hi there,

    you can add this PHP Snippet to your site:

    <?php echo date(‘l jS F Y’); ?>

    using a Hook Element:

    https://docs.generatepress.com/article/hooks-element-overview/

    Or Leo provides some code here to create your own shortcode that you can add to widet areas as well as Hooks:

    https://generatepress.com/forums/topic/changing-the-copyright-message-full-date/#post-617442

    #1372357
    Leon

    Hi,
    I finally had the time to give this a try. I made a hook element “after_logo”:

    opening div
    <?php echo date(‘l jS F Y’); ?>
    end div

    and checked “Execute PHP”

    As a result I got a message “critical fault in my website” and was told to check “problem solving in WordPress”

    In Dutch:
    Er heeft zich een kritische fout voorgedaan op je website.
    Lees meer over probleemoplossing in WordPress.

    If I uncheck “Execute PHP” I don’t see anything. If I then replace the php with a few words, they show up right.

    What do I do wrong here?
    Thanks, Leon

    #1372445
    Leo
    Staff
    Customer Support

    I just tried adding this:

    <div class="header-date">
        <?php echo date('l jS F Y'); ?>
    </div>

    Without any issues:
    https://www.screencast.com/t/P1SaO5HaWvg

    Can you try again?

    #1373239
    Leon

    Hi Leo,
    I don’t understand why, but now it works indeed.

    Screendump header

    In my css I added:

    .header-date {
    color: #000000;
    text-align: right;
    float: right;
    margin-top: 104px;
    }

    That works fine, when the window is wider than the header image. In tablet view and smaller, the date appears under the logo (including that 104px).

    narrow window view

    In those cases I’d like the date to be just below the logo. Is there an easy way to achieve that?
    Thanks, Leon

    #1373380
    David
    Staff
    Customer Support

    Hi there,

    can you remove any CSS related to the Dates positioning – there is a lot of it and i am sure we can do something simpler.

    #1373391
    Leon

    Sure.
    This is the css left:

    .header-date {
    color: #000000;
    text-align: right;
    }

    And this is the hook (after_logo, √ execute PHP)

    <?php echo date_i18n(‘j F Y’, time()); ?>

    Leon (do you see the div-tags? They seem to vanish in the forum-post.)

    #1373418
    David
    Staff
    Customer Support

    I am seeing lots of CSS related to the date – using vaious CSS selectors such as thes:

    #wrapper #header div.head-wrap #headerkoptekst

    #1374435
    Leon

    I think you are looking at the wrong site; #headerkoptekst for instance is used in the present site with a custom theme.
    In mbo-today.nl/test I only use the css that came with WordPress and Generatepress. I provided the login data earlier, but I can of course send them again.

    #1374577
    David
    Staff
    Customer Support

    If you can send the login over again that would be appreciated.

    #1375237
    Leon

    Sure, I did send the login by the mail on the contact page.
    Leon

    #1375605
    David
    Staff
    Customer Support

    Try this CSS instead:

    /* relative position header */
    .inside-header {
        position: relative;
    }
    
    /* position date relative to header */
    .header-date {
        color: #000;
        text-align: right;
        pointer-events: none;
        position: absolute;
        bottom: 45px;
        right: 20px;
    }
    
    /* reduce date font size on small devices */
    @media(max-width: 420px) {
        .header-date {
            font-size: 12px !important;
        }
    }
    #1377595
    Leon

    Hi David,
    Thanks again. This works perfect.
    Leon

    #1377603
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.