Customizing the layout

Can you tell me exactly what you want to display where in the above example?

thanks for the quick reply.
i want the default layout https://snag.gy/cTLlL.jpg
to be transformed into something like this https://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

`<div class=”one_fifth”><h5><span class=”popular”>Fitness</span></h5>
<div class=”display-posts-listing”><div class=”listing-item”>

<a class=”image wp-post-image” href=”https://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/&#8221; title=”Κοιλιακ? λ?πο?: Καθημεριν? λ?θη που προκαλο?ν την α?ξηση του.”>
<img class=”wp-post-image” ‘wpp-thumbnail’=”” src=”/wp-content/plugins/popularity-posts-widget/cache/05f9482db_158x130.png” alt=””>
</a>
<a class=”title_pop” href=”https://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/&#8221; title=”Κοιλιακ? λ?πο?: Καθημεριν? λ?θη που προκαλο?ν την α?ξηση του.” rel=”nofollow”>Κοιλιακ? λ?πο?: Καθημεριν? λ?θη που προκαλο?ν την α?ξηση του…</a></div></div></div>`

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

Looking at the source code you just pasted, it seems to me that you’re using WordPress Popular Posts plugin and not mine?

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

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

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

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

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

also i think i will need thumbnail image link,i cant use the post image is too big

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.

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.

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.

if i use this command tptn_get_the_post_thumbnail($result->ID)
inside the loop will this work? it will output the thumbnail?

You need to use it inside the foreach loop you’re creating above.

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 '<div style="max-width:158px;min-width:150px;" class="one_fifth column_last">';
} else
{
echo '<div style="max-width:158px;min-width:150px;" class="one_fifth">';
$popular_posts++;
}
echo '<h5><span class="popular">'.$this_category.'</span></h5>';
echo '<div class="display-posts-listing"><div style="width:100%;" class="listing-item">';
echo '<a class="image-popular size-full wp-post-image" href="'.$this_permalink.'" title="'.$this_title.'">';
echo $this_permalink.'</a>';
echo '<a class="title_pop" href="'.$this_permalink.'" title="'.$this_title.'" rel="nofollow">'.$this_title.'</a></div></div></div>';

}