Style WP plugin output : columns and font size

I use the "simple posts list" - wordpress plugin which outputs all posts as a long list - how can you style the output, say in 4 columns, and determine font size (as far as I know it's not possible in php)? Looks not too difficult, but I have no knowledge of php...so please tell me where to change what...

    function posts_list () {
    $output='<ul>';
    $posts = get_posts('numberposts=-1');
    foreach($posts as $post){
        $permalink = get_permalink( $post->ID );
        $output.= '<li>' . '<a href="' . $permalink . '">' . $post->post_title     .         '</a></li>';
    }
    $output.='</ul>';
    return $output;
}

function pages_list () {
    $output='<ul>';
    $pages = get_pages();
    foreach($pages as $page){
        $permalink = get_permalink( $page->ID );
        $output.= '<li>' . '<a href="' . $permalink . '">' . $page->post_title .     '</a></li>';
    }
    $output.='</ul>';
    return $output;
}

add_shortcode('posts','posts_list');
add_shortcode('pages','pages_list');

?>

Many thanks! Michael

Solutions

A simple CSS only approach could be to float your list elements left and give them a width of 25% total. Maybe add some padding so they aren't touching. So a width of 23% and left and right padding of 1% for a total of 25%.

ul{list-style-type: none;} 
li{float: left; width: 23%; padding: 0 1%;}

Demo

Tags: PHP / Wordpress

Similar questions

getting title to automatically reduce font-size based on container size to fit on 1 line
Hiall, I’m using wordpress and are displaying a main title header for feature article. Now if the heading title is 30 characters in length it fits onto 1 line perfect, but if the length of the title is 32 characters then it spills onto 2 lines and I have an ugly looking headline because there is all this unwanted space. Is there anyway to tell the ...
Wordpress tag cloud: how to remove inline style for font size?
Is there a nice way to remove the inline style from wordpress tag cloud tags? I'd like to set the same size for all tags and do not want inline styles at all if I can help it. Thanks
Capturing the element style - font-size
I am using WordPress with WPBakery Web Builder. I am trying to capture a CSS attribute("font-size") of a specific element in the screen. In order to capture the element and its attribute I am using JavaScript. I am running the following script: var v = document.getElementsByClassName("cb-img-area"); v[0].style.fontSize; &...
Style.css not overwriting parent style.css although style.css and functions.php are set up
I have been trying to fix this for two days, looking at the different answers on here. Whenever I edit css in the 'Additional CSS' editor in WP, I get the desired results. However, I can't seem to do this from the style.css sheet. Not that I need to do it from there, but it indicates to me that my child theme is not set up properly. My style.css fi...
wordpress how to 3 columns post list and columns wrap
I am trying to load a WordPress blog list with the following structure. this is my code enter image description here POST 1 | POST 2 , POST 3 POST 4 | POST 5 , POST 6 POST 7 | POST 8 , POST 7 Thank you for your help.
I want to stay in the same wheel loop of WordPress, the first post will have 6 columns and the other posts will be in 6 columns
I want to stay in the same wheel loop of WordPress, the first post will have 6 columns and the other posts will be in 6 columns. such as http://prntscr.com/mvx453 my HTML code https: // PasteBin. Low / uQvcsP8h

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.