Skip to content

HTML & CSS Customization

Klemens Starybrat edited this page Sep 11, 2018 · 13 revisions

By default, the plugin lists the posts in an unordered list with the lcp_catlist CSS class, like this:

<ul class="lcp_catlist">

So if you want to customize the appearance of the List Category Posts lists, you can just edit the lcp_catlist class in your theme's CSS.

You can also customize what HTML tags different elements will be surrounded with, and set a CSS class for this element, or just a CSS class which will wrap the element with a span tag.

The customizable elements (so far) are: author, catlink (category link), comments, date, excerpt, morelink ("Read More" link), thumbnail and title (post title).

The parameters are: author_tag, author_class, catlink_tag, catlink_class, comments_tag, comments_class, date_tag, date_class, date_modified_tag, date_modified_class, excerpt_tag, excerpt_class, morelink_tag, morelink_class, thumbnail_class, title_tag, title_class, posts_morelink_class, customfield_tag, customfield_class

So let's say you want to wrap the displayed comments count with the p tag and a "lcp_comments" class, you would do:
[catlist id=7 comments=yes comments_tag=p comments_class=lcp_comments]
This would produce the following code:

<p class="lcp_comments"> (3)</p>

Or you just want to style the displayed date, you could wrap it with a span tag:
[catlist name=blog date=yes date_tag=span date_class=lcp_date]
This would produce the following code:

<span class="lcp_date">March 21, 2011</span>

Elements without a specified tag, but a specified class, will be wrapped with a span tag and its class. For example this:
[catlist id=7 date=yes date_class="lcp_date"]
Will produce the following:

<span class="lcp_date">October 23, 2013</span>

The only exceptions here are the title_tag and title_class parameters. If you only use the title_class parameter, the CSS class will be assigned to the a tag like this:
[catlist id=1 title_class="lcp_title"]
Will produce:

<a href="http://127.0.0.1/wordpress/?p=38" title="Test" class="lcp_title">Test</a>

But if you use both:
[catlist numberposts=5 title_class=lcp_title title_tag=h4]
You will get:

<h4 class="lcp_title">
    <a title="Hipchat" href="http://127.0.0.1:8080/wordpress/?p=40"></a>
</h4>
Clone this wiki locally