Title: CSS not responding well with Shortcode
Last modified: April 21, 2017

---

# CSS not responding well with Shortcode

 *  Resolved [juicyjuke](https://wordpress.org/support/users/juicyjuke/)
 * (@juicyjuke)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/css-not-responding-well-with-shortcode/)
 * 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](https://wordpress.org/support/users/juicyjuke/).

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

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/css-not-responding-well-with-shortcode/#post-9055291)
 * 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](https://wordpress.org/support/users/juicyjuke/)
 * (@juicyjuke)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/css-not-responding-well-with-shortcode/#post-9057365)
 * 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](https://wordpress.org/support/users/juicyjuke/).
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/css-not-responding-well-with-shortcode/#post-9057544)
 * 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.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 3 replies
 * 2 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [9 years, 1 month ago](https://wordpress.org/support/topic/css-not-responding-well-with-shortcode/#post-9057544)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics