Scarlettsays Scarlettsays - 5 months ago 12
HTML Question

Subtitle output at the wrong location

I cant understand why did my subtitle appears at the top of the contents when I've set it at below the titles

$output .= '<article class="' . esc_attr( $columns ) . '" data-categories="' . trim( $data_categories ) . '" >';
if( $post_thumbnail_img ) {
$output .= '<a href="' . $permalink . '" title="' . get_the_title() . '"' . $lightbox_class . '>';
$output .= '<img src="' . $post_thumbnail_img[0] . '" alt="' . $post_thumbnail_data['alt'] . '" class="entry-image ' . $post_thumbnail_data['class'] . '">';
$output .= '</a>';
}

$output .= '<a href="' . get_permalink() . '" class="project-meta">';
$output .= '<h5 class="title">' . get_the_title() . '</h5>';
$output .= '<h5 class="subtitle">'. get_the_subtitle() . '</h5>';
$output .= '<span class="categories">' . substr( trim( $category_names ), 0, -2 ) . '</span>';
$output .= '</a>';


I cant seem to find where goes wrong. Here is a part of the css. Is this the correct place? Please help.


/* -------------------------------------------------- */
/* Projects Carousel
/* -------------------------------------------------- */

.no-js .projects-carousel, .no-js .post-carousel {
border-top: 1px solid #efefef;
margin: 15px -20px 60px 0;
padding: 25px 0 0;
}

.projects-carousel > li, .post-carousel > li, #portfolio-items > article {
float: left;
list-style: none;
margin: 0 20px 0 0;
overflow: hidden;
position: relative;
}

.projects-carousel > li, .post-carousel > li { width: 220px; }

.no-js .post-carousel > li {
display: inline-block;
float: none;
}

.no-js .projects-carousel > li, .no-js #portfolio-items > article { margin-bottom: 40px; }

.projects-carousel a, #portfolio-items article .project-meta {
border-bottom: 1px solid #efefef;
display: block;
text-align: center;
}

.projects-carousel a { padding: 20px 0 0; }

#portfolio-items article a, #portfolio-items article .audio-player, #portfolio-items article .video-player { margin: 0 auto; }

.projects-carousel img, #portfolio-items article img {
background-color: #fff;
margin: 0 auto;
filter: alpha(opacity=70); /* Fallback for old IE */
opacity: 0.7;
}

.no-js .projects-carousel img, .no-js #portfolio-items article img { margin-bottom: 0; }

.projects-carousel img { margin: -25px auto 20px; }

.projects-carousel .title, #portfolio-items > article .title, .projects-carousel .subtitle, #portfolio-items > article .subtitle {
font-weight: 400;
margin: -1px 0 0;
}

.projects-carousel > li .categories, #portfolio-items > article .categories, #portfolio-items > article a + .project-meta .categories{
color: #aeaeae;
display: block;
font-style: italic;
margin: -1px 0 20px;
}
#portfolio-items > article .categories { margin-bottom: 19px; }

.projects-carousel a:hover, #portfolio-items > article:hover {
background: #f8f8f8;
border-bottom: 1px solid #f15a23;
}

.not-ie .projects-carousel a:hover:after, .not-ie #portfolio-items > article:hover:after {
background: #f15a23;
bottom: -2.5px;
content: '';
left: 50%;
display: block;
height: 5px;
margin: 0 0 0 -2.5px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
width: 5px;
}

.projects-carousel a:hover img, #portfolio-items > article:hover img {
filter: alpha(opacity=100); /* Fallback for old IE */
opacity: 1;
}

.projects-carousel a:hover .title, #portfolio-items > article:hover .title, .projects-carousel a:hover .subtitle, #portfolio-items > article:hover .subtitle { color: #f15a23; }




Answer

I'm writing this based on the two assumptions (based on the code you've provided):

  • You're using WordPress
  • You're using the WP Subtitle plugin

Please correct me if I'm wrong.

The documentation for the get_the_subtitle function here accepts a 4th boolean parameter $echo. When true, this actually echoes the output into your template rather than returning it, which is why the text appears above the block I'm presuming is rendered by your function. By default, this is true.

Instead of:

$output .= '<h5 class="subtitle">'. get_the_subtitle() . '</h5>';

Try using the_subtitle

$output .= the_subtitle('<h5 class="subtitle">', '</h5>', false);

This will take care of wrapping the subtitle with the h5 tag, and return the value, instead of echoing it, which will then be concatenated with $output.

Details for the curious

So, why is get_the_subtitle not working as expected while get_the_title is? The functions that are natively provided by WP usually have two forms: x and get_x. The main difference being that x will echo the output and get_x will return the output. Generally, x is used to inject the output directly into the template while The Loop is running. get_x is used within PHP functions which need to operate on the returned value.

In this respect, the behavior of get_the_subtitle and the_subtitle seem rather non-standard for WP.