Title: [Plugin: List category posts] Styling Output
Last modified: August 20, 2016

---

# [Plugin: List category posts] Styling Output

 *  [sdtheatreworld](https://wordpress.org/support/users/sdtheatreworld/)
 * (@sdtheatreworld)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/plugin-list-category-posts-styling-output/)
 * I noticed quite a few posts asking about how to style the output from this plugin,
   and the documentation was a little confusing, so after spending some time with
   it I thought I would share my findings.
 * First, I highly recommend creating a child theme so that you do not mess up any
   of your core files, and so that your work will not be erased with your next theme
   update. See here for how to set this up: [http://codex.wordpress.org/Child_Themes](http://codex.wordpress.org/Child_Themes)
 * If you want the formatting to work for both widget areas and on pages, there 
   is a simple solution to allow shortcode in widgets.
 * Add the following to functions.php
 *     ```
       /* This allows shortcodes in widget text areas */
       add_filter('widget_text', 'do_shortcode');
       ```
   
 * Now you will be able to use shortcode in the standard Text widget.
 * See here for a more detailed explanation of this step:
    [http://wordpress.org/support/topic/how-to-make-shortcodes-work-in-a-widget](http://wordpress.org/support/topic/how-to-make-shortcodes-work-in-a-widget)
   Or here: [http://digwp.com/2010/03/shortcodes-in-widgets/](http://digwp.com/2010/03/shortcodes-in-widgets/)
 * 1. Put the shortcode where you want your category list to show up
 * 2. Add a tag and a class to each component
    For example, I have used the span
   tag with all of my components. You can use p, br, or other html tags instead.
   You can name the classes whatever you want, as long as they are the same as the
   classes that you are about to build in step 3. `[catlist id=1 date=yes author
   =yes excerpt=yes title_tag=span title_class=titleclass date_tag=span date_class
   =dateclass author_tag=span author_class=authorclass excerpt_tag=span excerpt_class
   =excerptclass]`
 * 3. Add a class to style.css for each component (the html tag, then a period, 
   then your class name)
 * For example:
 *     ```
       span.titleclass{
       }
       span.dateclass {
       }
       span.authorclass {
       }
       span.exerptclass {
       }
       ```
   
 * 4. Optionally, you can choose not to display the bullet points with the following
   added to your style.css
 *     ```
       ul.lcp_catlist li {
       	list-style-type:none;
       }
       ```
   
 * Here is a complete example of what I added to my style.css:
 *     ```
       /* BEGIN CSS FOR CUSTOM DISPLAY OF LIST CATEGORY POSTS */
       /* Decreases the left-hand margin of the entire list */
       ul.lcp_catlist {
       	margin:0 0 0 -3px;
       }
   
       /* Removes the bullet points from lists */
       ul.lcp_catlist li {
       	list-style-type:none;
       }
   
       /* The following are all classes that modify how each component of the list looks.
       These classes must be specificed in the shortcode by first adding a tag around the component
       i.e. author_tag=span
       and then adding the class
       i.e. author_class=authorclass */
       span.titleclass {
       font-size: 1.2em;
       font-weight:bold;
       display:block;
       }
   
       span.dateclass {
       font-size: .8em;
       font-weight:bold;
       display:block;
       }
   
       span.authorclass {
       font-size: 1.1em;
       display:block;
       }
   
       span.excerptclass {
       font-size: 1em;
       display:block;
       margin:0 0 20px 0;
       }
       /* END CSS FOR CUSTOM DISPLAY OF LIST CATEGORY POSTS */
       ```
   
 * Additional note: You can have as many classes as you want for each component 
   and reference different classes (via the shortcode) on different pages. See the
   HTML & CSS Customization section of the [Other Notes](http://wordpress.org/extend/plugins/list-category-posts/other_notes/)
   section of the plugin page for details about which components can be customized
   this way.

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [pauly24](https://wordpress.org/support/users/pauly24/)
 * (@pauly24)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/plugin-list-category-posts-styling-output/#post-2994766)
 * I’m having a problem with this, I’ve added
    `[catlist name="News" numberposts
   =1 date=yes author=yes excerpt=yes title_tag=span title_class=titleclass date_tag
   =span date_class=dateclass author_tag=span author_class=authorclass excerpt_tag
   =span excerpt_class=excerptclass]` (Just same as above) to my home page, then
   in my style CSS I’ve copied and pasted again from whats above, and I’ve tried
   changing all the values but my site doesn’t change. I’ve tried clearing all cache,
   restart, different browser etc but it just doesn’t pick up the styling change.
 *  [Creatrix](https://wordpress.org/support/users/chrisl_57/)
 * (@chrisl_57)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/plugin-list-category-posts-styling-output/#post-2994878)
 * to get this to work you need to put quotes around all of the attributes –
    `[
   catlist name="News" numberposts="1" date="yes" author="yes" excerpt="yes"` etc
   etc….
 *  [pgraysymposium-eventscouk](https://wordpress.org/support/users/pgraysymposium-eventscouk/)
 * (@pgraysymposium-eventscouk)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/plugin-list-category-posts-styling-output/#post-2994879)
 * Hi
 * This is really helpful but I have hit the limit of my hacking abilities when 
   it comes to putting in the thumbnail and formatting it.
 * I added:
 * thumbnail_tag=span thumbnail_class=thumbnailclass
 * to the shortcode and
 * span.thumbnailclass {
    align:alignright }
 * to the style.css but no matter what I put where the “align:alignright” now shows,
   I can’t change the alignment of the image.
 * I’m probably missing something simple, but can anyone tell me what that is?
 * Thanks in advance for any help!
 * Paul
 *  [pgraysymposium-eventscouk](https://wordpress.org/support/users/pgraysymposium-eventscouk/)
 * (@pgraysymposium-eventscouk)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/plugin-list-category-posts-styling-output/#post-2994880)
 * Solved it..
 * Don’t need this in style.css at all:
 * span.thumbnailclass {
    img.alignright }
 * Just put
 * thumbnail_class=”alignright”
 * in the shortcode
 *  [andriansah](https://wordpress.org/support/users/andriansah/)
 * (@andriansah)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/plugin-list-category-posts-styling-output/#post-2994889)
 * Thank you sdtheatreworld
    you save my time 😀
 *  [hunter44](https://wordpress.org/support/users/hunter44/)
 * (@hunter44)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/plugin-list-category-posts-styling-output/#post-2994893)
 * Thank you SO MUCH!! You saved me so much time. I was just about ready to give
   up on this plugin — I gave up on it last summer and installed 2 others instead,
   but this plugin has all the features I wanted… I just couldn’t get it formatted
   right!!
 * Now it’s done — in about an hour — thanks to you, **sdtheatreworld**!!
 *  [thefairmagazine](https://wordpress.org/support/users/thefairmagazine/)
 * (@thefairmagazine)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/plugin-list-category-posts-styling-output/#post-2994894)
 * I just wanted to thank you so much for this – you literally saved me hours!
 *  [dcell59](https://wordpress.org/support/users/dcell59/)
 * (@dcell59)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/plugin-list-category-posts-styling-output/#post-2994896)
 * Yes. Thanks for this article. It helped me get the plugin set up and styled exactly
   as I needed very quickly.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘[Plugin: List category posts] Styling Output’ is closed to new replies.

 * ![](https://ps.w.org/list-category-posts/assets/icon-256x256.png?rev=2517221)
 * [List category posts](https://wordpress.org/plugins/list-category-posts/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/list-category-posts/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/list-category-posts/)
 * [Active Topics](https://wordpress.org/support/plugin/list-category-posts/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/list-category-posts/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/list-category-posts/reviews/)

 * 8 replies
 * 8 participants
 * Last reply from: [dcell59](https://wordpress.org/support/users/dcell59/)
 * Last activity: [13 years, 1 month ago](https://wordpress.org/support/topic/plugin-list-category-posts-styling-output/#post-2994896)
 * Status: not a support question