WordPress › Support » Adding date to grid thumbnails?

cathytxtwfr
Member
Posted 6 months ago #

Hi,
I am a beginner so apologies if my question is very simple.

How can I add the date to each grid post? I would like to place the date above each thumbnail in a small font size. I am not sure if this is something I do in CSS or in the template files.

Here is my site: http://cathywu.com/journal/treadling/ - there is a thumbnail and post title, but i would like to also have the date show up.

hank you for any help

Cathy
WPyogi
Volunteer Moderator
Posted 6 months ago #

You would need to edit the php file -- and since it's not a good idea to modify theme files directly, you would need to first create a child theme.
cathytxtwfr
Member
Posted 6 months ago #

Thank you. I assume it is index.php I will need to edit/make a child theme then? Do you have a link to a tutorial you recommend for adding an entry date/modifying a .php ? Sorry I am a beginner at this but I am trying to learn.
omggimme
Member
Posted 5 months ago #
Hi Cathy,

I've somewhat did it for my page, you can see the example here http://omggim.me

I hope you already have your child theme installed. You will need to edit functions.php in your child theme and also add to the CSS in your dashboard.

1. CSS:
- go to your DASHBOARD > APPEARANCE > EDIT CSS
- at the bottom just add the following few lines:
```
.date-meta {
	background-color: #000;
	opacity: .5;
	filter: alpha(opacity=50);
	position: absolute;
	padding: 5px;
	top: 21px;
	right: 20px;
	color: #FFF;
}
```
- you will have to play around with your settings such as top, right, I am using the 4-coloumn format, so it might be a bit off for you.

2. functions.php
- Search for pinboard_post_thumbnail, around lines 1495 and replace the entire function with what I have below.
```
function pinboard_post_thumbnail() {
	if( has_post_thumbnail() ) : ?>

		<figure class="entry-thumbnail">
            <div class="date-meta"><? echo get_the_time( get_option( 'date_format' ) );?></div>
			<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
				<?php the_post_thumbnail( ( pinboard_is_teaser() ? 'teaser-thumb' : 'blog-thumb' ) ); ?>
			</a>
		</figure>
	<?php endif;
}
```
3. Save and refresh
WPyogi
Volunteer Moderator
Posted 5 months ago #

I hope you already have your child theme installed.

Yes! Do not do any of these kinds of changes in theme files. And be sure to keep back-up copies as you do this kind of thing.

But nice help on this modification!
cathytxtwfr
Member
Posted 5 months ago #

Hi!

Thank you so much. It worked perfectly. (I made a child theme too) The date was also overlapping the image, and I couldn't figure out how to push my thumbnail down, so I just pushed the date up - works for me. Thank you again!

Cathy
cathytxtwfr
Member
Posted 5 months ago #

Forgot to mention - its all resolved now! thank you.
Mindscanner
Member
Posted 4 months ago #

sorry for reopening this topic but what do i have to change to use the code for category on the tumbnails?

ps im verry bad with CSS :(

thx
Andrew Nevins
Volunteer Moderator
Posted 4 months ago #

If you require further support than that given in this thread, create your own thread on the issue. This thread is resolved.
Mindscanner
Member
Posted 4 months ago #

Sorry Andrew allready done it but i tryed this way to get faster reply.
Bad misthake i see sorry i remember it for next time

thx