Skip to content

HTML & CSS Customization

Fernando Briano edited this page Sep 12, 2016 · 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_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: `

`
Clone this wiki locally