Show current date in header

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[Leo]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leon]

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

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).

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.)

[David]

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

#wrapper #header div.head-wrap #headerkoptekst

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leon]

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

[David]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leon]

Hi David,
Thanks again. This works perfect.
Leon

[David]

Glad to hear that

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts