Title: Customizing the layout Last modified: August 21, 2016 --- # Customizing the layout * Resolved [Exoskeletor](https://wordpress.org/support/users/exoskeletor/) * (@exoskeletor) * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-the-layout/) * thanks for this great plugin im trying to customize the layout to look like this: [http://www.bootply.com/121264#](http://www.bootply.com/121264#) but im not good at css, can you help me? * Also a good feature request would be to display the category of the post * [https://wordpress.org/plugins/top-10/](https://wordpress.org/plugins/top-10/) Viewing 15 replies - 1 through 15 (of 27 total) 1 [2](https://wordpress.org/support/topic/customizing-the-layout/page/2/?output_format=md) [→](https://wordpress.org/support/topic/customizing-the-layout/page/2/?output_format=md) * Plugin Author [Ajay](https://wordpress.org/support/users/ajay/) * (@ajay) * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-the-layout/#post-4728126) * Can you tell me exactly what you want to display where in the above example? * Thread Starter [Exoskeletor](https://wordpress.org/support/users/exoskeletor/) * (@exoskeletor) * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-the-layout/#post-4728135) * thanks for the quick reply. i want the default layout [http://snag.gy/cTLlL.jpg](http://snag.gy/cTLlL.jpg) to be transformed into something like this [http://snag.gy/7efKu.jpg](http://snag.gy/7efKu.jpg) I dont mind much about the categories if they are not shown although i will try to modify your code and show the categories with something like this: * > `$category_name = get_the_category( $row[‘id’] ); > $category_posts=$category_name[ > 0]->cat_name;` * my current html code * > `
Fitness
>
class=”display-posts-listing”>
> title=”Κοιλιακό λίπος: Καθημερινά λάθη που προκαλούν την αύξηση του.”> > class=”wp-post-image” ‘wpp-thumbnail’=”” src=”/wp-content/plugins/popularity- > posts-widget/cache/05f9482db_158x130.png” alt=””> href=”[http://fit-life.info/fitness/%ce%ba%ce%bf%ce%b9%ce%bb%ce%b9%ce%b1%ce%ba%cf%8c-%ce%bb%ce%af%cf%80%ce%bf%cf%82-%ce%ba%ce%b1%ce%b8%ce%b7%ce%bc%ce%b5%cf%81%ce%b9%ce%bd%ce%ac-%ce%bb%ce%ac%ce%b8%ce%b7-%cf%80%ce%bf%cf%85-%cf%80%cf%81/”](http://fit-life.info/fitness/%ce%ba%ce%bf%ce%b9%ce%bb%ce%b9%ce%b1%ce%ba%cf%8c-%ce%bb%ce%af%cf%80%ce%bf%cf%82-%ce%ba%ce%b1%ce%b8%ce%b7%ce%bc%ce%b5%cf%81%ce%b9%ce%bd%ce%ac-%ce%bb%ce%ac%ce%b8%ce%b7-%cf%80%ce%bf%cf%85-%cf%80%cf%81/”); > title=”Κοιλιακό λίπος: Καθημερινά λάθη που προκαλούν την αύξηση του.” rel=” > nofollow”>Κοιλιακό λίπος: Καθημερινά λάθη που προκαλούν την αύξηση του… >
` * and css * > `a.title_pop { > position: absolute; width: 90%; /* for IE 6 */ color: white; > font: 12px/ 27px Open Sans, Helvetica, Sans-Serif; letter-spacing: 0px; background: > rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); padding: > 8px; bottom: 0px; left: 0px; line-height:115% } > span.popular { > position: absolute; font-weight:normal; top: 8px; left: 0px; > color: white; letter-spacing: 0px; background: rgb(0, 0, 0); /* fallback color*/ > background: rgba(255, 0, 0, 0.7); padding: 8px; line-height:80% }` * if they are helpfull thanks for your quick reply * Plugin Author [Ajay](https://wordpress.org/support/users/ajay/) * (@ajay) * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-the-layout/#post-4728139) * Looking at the source code you just pasted, it seems to me that you’re using WordPress Popular Posts plugin and not mine? * Thread Starter [Exoskeletor](https://wordpress.org/support/users/exoskeletor/) * (@exoskeletor) * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-the-layout/#post-4728140) * yes for now im using this plugin until i fix the layout in your plugin. i have paste the html and css code just in case it is helpful. The 1st image is from your plugin and i want your default layout to be customized to look like the layout in the 2nd image i prefer to use your plugin * Plugin Author [Ajay](https://wordpress.org/support/users/ajay/) * (@ajay) * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-the-layout/#post-4728141) * Understood. That makes sense to me. * I haven’t tested this code, but can you try it. It won’t give you the exact look above but an approximate one. * [https://gist.github.com/ajaydsouza/9705239](https://gist.github.com/ajaydsouza/9705239) * Thread Starter [Exoskeletor](https://wordpress.org/support/users/exoskeletor/) * (@exoskeletor) * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-the-layout/#post-4728143) * i see that it is not what i want. is it possible in your plugin for me to select the layout by selecting if the posts will be wraped in divs or sometihng, which div to come first (category,a,image,title) I will try to manually edit the plugin code to make it look like i want but i guess its a bad approach because on a update i will lose it * Plugin Author [Ajay](https://wordpress.org/support/users/ajay/) * (@ajay) * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-the-layout/#post-4728144) * If you’re comfortable writing your own code, then the best solution is to use the `tptn_pop_posts('posts_only=1')` to get the post IDs and then write a loop to run this through how you want. * Another alternative is to change the “Customise the list HTML” section to use` div` * Thread Starter [Exoskeletor](https://wordpress.org/support/users/exoskeletor/) * (@exoskeletor) * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-the-layout/#post-4728145) * thats seems very good and easy solution. how i can use this code to get the latest 5 posts? * > fot (i=0;i<5;i++){ > echo tptn_pop_posts(‘posts_only=1’); } * this will do the trick? it will not show 5 times tha same post which would be the latest one? i only need the post_ids of the top 5 posts thanks for your support * Thread Starter [Exoskeletor](https://wordpress.org/support/users/exoskeletor/) * (@exoskeletor) * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-the-layout/#post-4728149) * also i think i will need thumbnail image link,i cant use the post image is too big * Plugin Author [Ajay](https://wordpress.org/support/users/ajay/) * (@ajay) * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-the-layout/#post-4728152) * You need something like this: * ``` $results = tptn_pop_posts('posts_only=1'); foreach ( $results as $result ) { $result = get_post( $result->ID ); .... .... } ``` * Then $result will contain the entire post variable and you can do what you want with that including getting thumbnails etc. * Thread Starter [Exoskeletor](https://wordpress.org/support/users/exoskeletor/) * (@exoskeletor) * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-the-layout/#post-4728154) * should i get the title this way * > get_the_title( $id ) * or i can do something like that * > $result = get_post( $result->Title ); * how i can find the title, permalink, thumbnail link name in order to use them like in your example? (for example for the id i see you use ID, how i can find the name for the others) Also i should use the thumbnails from top ten because the size will be changed am i right? if i use the theme thumbnail image i have to make it small somehow. Sorry if i ask too much. * Plugin Author [Ajay](https://wordpress.org/support/users/ajay/) * (@ajay) * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-the-layout/#post-4728163) * You need to use: * `get_the_title ( $result->ID );` * Check out lines 398 to 462 in top-10.php file. It will give you the code I use in the plugin to generate the list of posts. * Thread Starter [Exoskeletor](https://wordpress.org/support/users/exoskeletor/) * (@exoskeletor) * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-the-layout/#post-4728219) * if i use this command tptn_get_the_post_thumbnail($result->ID) inside the loop will this work? it will output the thumbnail? * Plugin Author [Ajay](https://wordpress.org/support/users/ajay/) * (@ajay) * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-the-layout/#post-4728220) * You need to use it inside the foreach loop you’re creating above. * Thread Starter [Exoskeletor](https://wordpress.org/support/users/exoskeletor/) * (@exoskeletor) * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-the-layout/#post-4728221) * i have paste this code on my index.php with top 10 enabled but i dont see anyoutput * ``` $results = tptn_pop_posts('posts_only=1'); $popular_posts = 1; foreach ( $results as $result ) { $result = get_post( $result->ID ); $this_title = get_the_title ( $result->ID ); $this_category = get_the_category ( $result->ID ); $this_thumb = tptn_get_the_post_thumbnail($result->ID); $this_permalink = get_permalink($result->ID); if ($popular_posts==4) { echo '
'; } else { echo '
'; $popular_posts++; } echo '
'.$this_category.'
'; echo '
'; echo ''; echo $this_permalink.''; echo ''.$this_title.'
'; } ``` Viewing 15 replies - 1 through 15 (of 27 total) 1 [2](https://wordpress.org/support/topic/customizing-the-layout/page/2/?output_format=md) [→](https://wordpress.org/support/topic/customizing-the-layout/page/2/?output_format=md) The topic ‘Customizing the layout’ is closed to new replies. * ![](https://ps.w.org/top-10/assets/icon-256x256.png?rev=2986432) * [WebberZone Top 10 — Popular Posts](https://wordpress.org/plugins/top-10/) * [Frequently Asked Questions](https://wordpress.org/plugins/top-10/#faq) * [Support Threads](https://wordpress.org/support/plugin/top-10/) * [Active Topics](https://wordpress.org/support/plugin/top-10/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/top-10/unresolved/) * [Reviews](https://wordpress.org/support/plugin/top-10/reviews/) * 27 replies * 4 participants * Last reply from: [Yosh](https://wordpress.org/support/users/yoshmar/) * Last activity: [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-the-layout/page/2/#post-4728274) * Status: resolved