CSS not responding well with Shortcode

  • Resolved juicyjuke

    (@juicyjuke)


    9 years, 1 month ago

    mixed in with some CSS, im getting just about everything I want from this short code. 

    /*
	=================================
	Displays posts from specified category on homepage
	=================================

*/ 

add_filter( 'category_description', 'do_shortcode'); 

function wpb_postsbycategory() {
// the query
$the_query = new WP_Query( array( 'category_name' => 'crazy-humorous-pictures, strange-news-stories', 'posts_per_page' => 10 ) ); 

// The Loop
if ( $the_query->have_posts() ) {
	$string .= '<ul class="postsbycategory widget_recent_entries">';
	while ( $the_query->have_posts() ) {
		$the_query->the_post();
			if ( has_post_thumbnail() ) {
			$string .= '<li>';
			$string .= '<a href="' . get_the_permalink() .'" rel="bookmark">' . get_the_post_thumbnail($post_id, array( 500, 500) ) . get_the_title() . '</a></li>';
			} else {
			// if no featured image is found
			$string .= '<li><a href="' . get_the_permalink() .'" rel="bookmark">' . get_the_title() . get_the_content() .'</a></li>';
			}
			}
	} else {
	// no posts found
}
$string .= '</ul>';

return $string;

/* Restore original Post Data */
wp_reset_postdata(); } 

// Add a shortcode
add_shortcode('categoryposts', 'wpb_postsbycategory');

// Enable shortcodes in text widgets
add_filter('widget_text', 'do_shortcode');

    However when using custom CSS, it is not to easy getting the “post title” to float above the featured image thumbnails. by float above I mean…be displayed above the thumbnail

    the post title link is very stubborn, and wont budge from being on the left side of the thumbnails. I want the title above the post thumbnails.

    also note. it seems the post title is somehow connected with the post thumbnail. im sensing this is something to do with this code.

    anyone got some answers to this?

    • This topic was modified 9 years, 1 month ago by juicyjuke.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    9 years, 1 month ago

    You mean overlaid onto the image, not above and outside the image, right?

    Are you able to post a live link showing this output? It’s virtually impossible to suggest CSS unless the full context is available so it can be inspected with browser developer tools.

    Thread Starter juicyjuke

    (@juicyjuke)

    9 years, 1 month ago

    hey BCworkz,

    Sorry for the late response.
    I figured it out on my own shortly after I posted this.

    overlaid. that’s the word im looking for.

    I simply put get_the_title function in its own string, and it worked just fine.

    originally I had

    if ( has_post_thumbnail() ) {
			$string .= '<li>';
$string .= '<a href="' . get_the_permalink() .'" rel="bookmark">' . get_the_post_thumbnail($post_id, array( 500, 500) ) . get_the_title() . '</a></li>';

    now…

    if ( has_post_thumbnail() ) {
			$string .= '<a href="' . get_the_permalink() .'" rel="bookmark">' . get_the_title() . '</a></li>';
			$string .= '<li>';$string .= '<a href="' . get_the_permalink() .'" rel="bookmark">' . get_the_post_thumbnail($post_id, array( 500, 500) ) . '</a></li>';

    🙂 now its treated as its on entity. im still way much a noob, but im getting there.

    looking at what I did… would you have done the same? also is there anything wrong with the way I did it?

    also there is nothing live yet. im doing this all locally.

    • This reply was modified 9 years, 1 month ago by juicyjuke.
    Moderator bcworkz

    (@bcworkz)

    9 years, 1 month ago

    Sort of like how buying insurance means you won’t need to use it, posting here means you’ll figure it out on your own right after the edit period closes 😀

    Yup, I would have suggested something very similar. Well done! I’ll go ahead and mark this as resolved for you.

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

The topic ‘CSS not responding well with Shortcode’ is closed to new replies.