Uly.me

cloud engineer

genesis

Genesis Footer

Here’s how to display Copyright years in the footer section if you’re using the Genesis theme.

[footer_copyright first="2002"]

Result:

Copyright © 2002–2020

The current year is dynamic. It will display 2021 a year from now. The first year is always fixed.

Where Featured Images Are Stored

The WordPress Genesis theme uses featured images on its posts on several of its themes. If you’re curious as to where the Genesis theme stores the image links on the database, you’ll need to go to a couple of WordPress tables to find them. First and foremost, you’ll need to get the ID of your WordPress post. You can easily find this by hovering over the edit link and checking the ID number.

Let’s pretend the post ID is 110. You will then need to find the meta_value in the wp_postmeta table.

Table: wp_postmeta

meta_id     post_id   meta_key         meta_value
544         110       _thumbnail_id    45
SELECT meta_value FROM wp_postmeta WHERE meta_key='_thumbnail_id' and post_id=110;

The result is 45. Now that you have the meta_value, you can then search for the link from the wp_posts table.

Table: wp_posts

ID      post_type       guid
45      attachment      http://yourdomain.com/wp-content/uploads/2017/03/featured-image.jpg
SELECT guid FROM wp_posts WHERE post_type='attachment' and id=45;

The result will be the URL of the image, e.g. http://yourdomain.com/wp-content/uploads/2017/03/featured-image.jpg.

It’s an odd place to store the image link, but that’s where it is.

Styling Genesis Post Navigation

The Genesis framework has a feature where you choose the post navigation technique. You can select either “previous / next” or the “numeric” option. This feature is found under the main Genesis Theme settings about halfway down. Selecting the “numeric” option, in this example, will display the numeric post navigation at the bottom of the home page after the main content.

pagination

Unfortunately, it didn’t always look like this, when I first enabled it. It lacks margin and some padding. The link colors falls back to the default colors. I had to style the post navigation technique to make it look better. So, I just wanted to share with you the following CSS styles that will make this Genesis numeric post navigation technique look much better.

/* Page Navigation */
.navigation li {
   font-size:14px;
}
.navigation li a {
   padding:10px;
   margin:0;
   color: #fff;
   background-color: #777;border-radius:5px;
}
.navigation li.active a {
   padding:10px;
   margin:0;
   color:#000;
   background-color:#aaa;
   border-radius:5px;
}
.navigation li a:hover {
   color:#000
}

First, I increased the font size to make it more legible. I added some padding and margins, gave it some link color, background color, and added a border radius to make it less boxy. Finally, I also changed the hover color to show a mouse rollover. It’s nothing fancy, but it looks much better with a little bit of window dressing.