Help editing a few things

Hi @nicholasm3,

Regarding your first question, to add a Read More button to your popular posts you could for example take advantage of the HTML customization options provided by WordPress Popular Posts.

To be more precise, since you’re using the Cards theme with your popular posts list try adding your “Read More” link to the Post HTML Markup field like so:

<li class="{current_class}">{thumb_img} <div class="wpp-item-data"><div class="taxonomies">{taxonomy}</div>{title} <p class="wpp-excerpt">{excerpt}</p><a href="{url}" class="more-link">Read More</a></div></li>

As for your second question, to edit the styling of the Cards theme you have a couple of options:

• You can override the Cards theme styles (or any theme style) by copying the theme files into your WordPress theme and change it from there.
• You can inject your own CSS rules via filter hook.

For example, let’s say you decided to go for the filter hook option. You’ll want to add something like this to your theme’s functions.php file (or via the Code Snippets plugin):

/**
 * Adds custom styling rules for the 'Cards' theme.
 *
 * @param  string $additional_styles
 * @param  string $theme_name
 * @return string
 */
function wpp_additional_css_rules($additional_styles, $theme_name) {
    if ( 'cards' == $theme_name ) {
        $additional_styles .= <<<EOD
            .wpp-cards li .taxonomies { margin-bottom: 15px; }
            .wpp-cards li .wpp-post-title { line-height: 1.5; }
            .wpp-cards li .wpp-excerpt { font-size: 17px; line-height: 1.8em; }
            .wpp-cards li .more-link { color: #0047BB; font-size: 17px; text-decoration: underline; }
        EOD;
    }
    return $additional_styles;
}
add_filter('wpp_additional_theme_styles', 'wpp_additional_css_rules', 10, 2);

Of course, feel free to adjust where/if needed.

If you have any further questions please let me know.

Thank you Hector! It’s so awesome how active you are to help people on here.

Well, someone’s gotta do it and that someone happens to be me 😛

Don’t mention it, glad I can help!

I tried editing your code to add color to the taxonomies (same as the read more link, #0047BB) but it’s not taking. I tried using !important tag as well to no avail.

That’s because you’re targeting the .taxonomies DIV tag. To style the actual taxonomy link (A tag) inside that .taxonomies DIV you’ll want to target it like this (yeah, CSS can be funny like that):

.wpp-cards li .taxonomies a { color: #0047BB; }

Or if you don’t want to be that specific you could just target all A tags like so:

.wpp-cards li a { color: #0047BB; }

and then your .more-link can be rewritten like this since it’ll inherit the color attribute from the rule above:

.wpp-cards li .more-link { font-size: 17px; text-decoration: underline; }

is there a way to force line break before the Read More so that it’s below the content on a new line and not immediately following it?

Yep, you make the .more-link element a block element via the display property, like so:

.wpp-cards li .more-link { display: block; font-size: 17px; text-decoration: underline; }

I have author and date checked to display in Appearance > Widgets customization options but they aren’t showing up?

That’s expected. If you take a closer look at the HTML structure of the Cards theme you’ll notice that none of these elements are present.

Hence, no author and no publish date.

Fortunately, you can add them. WordPress Popular Posts has these things called Content Tags that are basically placeholders that will be replaced with, well, content (hence the super creative name Content Tags haha) once the list is rendered on screen.

Since I’m more of a show-don’t-tell kind of guy, let’s say for example that you wanted to add the author name next to the post title (Some Title by Author). You would then use the {author} content tag to render it right where you want, eg:

<li class="{current_class}">{thumb_img} <div class="wpp-item-data"><div class="taxonomies">{taxonomy}</div>{title} by {author} <p class="wpp-excerpt">{excerpt}</p><a href="{url}" class="more-link">Read More</a></div></li>

Same principle applies to the date, only difference is that you’d use the {date} content tag. For example:

<li class="{current_class}">{thumb_img} <div class="wpp-item-data"><div class="taxonomies">{taxonomy}</div>{title} by {author} on {date} <p class="wpp-excerpt">{excerpt}</p><a href="{url}" class="more-link">Read More</a></div></li>

You can of course modify the HTML structure to whatever feels best.

Hey @nicholasm3,

Yes, the indentation was indeed incorrect.

Welcome to the programming world where small things like that can easily trip you up haha.

Just make sure that the closing EOD; is at the same level spacing wise as $additional_styles, otherwise that will happen (the code below is using the right indentation and contains your changes too).

/**
 * Adds custom styling rules for the 'Cards' theme.
 *
 * @param  string $additional_styles
 * @param  string $theme_name
 * @return string
 */
function wpp_additional_css_rules($additional_styles, $theme_name) {
    if ( 'cards' == $theme_name ) {
        $additional_styles .= <<<EOD
            .wpp-cards li .taxonomies { margin-bottom: 15px; font-size: 16px; }
            .wpp-cards li .taxonomies a { color: #0047BB; }
            .wpp-cards li .wpp-post-title { line-height: 1.5; }
            .wpp-cards li .wpp-excerpt { font-size: 17px; line-height: 1.7em; }
            .wpp-cards li .more-link { display: block; margin-top: 15px; color: #0047BB; font-size: 17px; text-decoration: underline; }
        EOD;
    }
    return $additional_styles;
}
add_filter('wpp_additional_theme_styles', 'wpp_additional_css_rules', 10, 2);