[Resolved] Volume: List Child Pages With Title, Featured Image, Excerpt, More button

[Tim]

Hello

I would like to list a Page’s Child Pages in the content. With Title, Featured Image, Excerpt, More button.

I have tried and tested 5 different plugins that offer such functionality, but for one reason or another I’m not able to match the styling of the Volume Blog post listings.

If there is not a suitable plugin for this purpose, do you have a code suggestion whereby I could reuse Volume’s Blog listing style ?

Thanks

Tim

[David]

Hi there,

was there a particular plugin you liked that allowed all the elements to be displayed in the correct order ? As I may be able to assist with some CSS to match the styling.

[Tim]

Hi David

That is very kind of you to offer.

I got the furthest with:

https://wordpress.org/plugins/page-list/

and

https://wordpress.org/plugins/cc-child-pages/

They are both present on the URL cited in the OP, the later “cc-child-pages” being the closest.

cc-child-pages has no link anchor in the Title, which would be useful so I’d like to know how to implement that. The more link could look more like button.

The other thing I had considered was putting the Title as an overlay to the cover thumbnail.

[David]

The CC Child Pages looks less convoluted – well at least for styling as all the elements are where they need to be.

For the title link, looking at the plugin page, there is this Shortcode argument link_titles="true" which should add the link to the title.

See if you can add that and ill look at the CSS

[Tim]

Hi David

Thank you for pointing out the Shortcode argument, which I’ve added.

I already added this CSS:

.cc-child-pages-thumb {
height: 250px;
object-fit: cover;
}

As those appeared in the Volume styling.

Any additional help with CSS would be great.

I noticed that another Shortcode argument is to add a class class="myclass" and another one specifically for the Title title_link_class="my_title_link_class".

Might those arguments be used to apply existing CSS from the Volume’s Blog styling ?

[David]

Unfortunately they dont provide a class for the read more or an easy filter to change the H2 title to a H3.

So try this:

/* Fixed column width and remove spacing */
.onecol .ccchildpage {
    width: 100%;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Increase title size and weight */
.ccpage_linked_title {
    font-size: 36px;
    font-weight: 800;
}

/* Adjust spacing between thumb and excerpt */
.ccpages_excerpt,
.cc-child-pages-thumb {
    margin-bottom: 2em !important;
}

/* Style more to look like button */
.ccpages_more a,
.ccpages_more a:visited {
    padding: 10px 20px;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background-color: #0066b2;
}

.ccpages_more a:hover {
    color: #ffffff;
    background-color: #0096d6;
}

And you can use this Arg to change your read more button label:
more="More..."

[Tim]

Hi David

Fantastic.

Thank you for taking the trouble to interrogate and make the CSS for the page lists consistent with the Volume styling.

Tim

[David]

Glad to be of help … good to see Volume being used 🙂

[Author]

Posts