Breaking up multiple words and inserting an image after first word

Question

I'm not sure if it's possible, however, what I'm after is to break up WordPress titles that are multiple words and then insert an image.

My current loop works just fine. Right now it gets the page's featured image, then shows the page title:

<img>
WordPress Development

Here's the loop:

$args = array(
    'post_parent' => $page_id->ID,
    'showposts' => $show,
    'post_type' => 'page',
    'orderby' => 'menu_order',
    'order' => 'ASC'
);
$subpages = new WP_query($args);

if ($subpages->have_posts()) : while ($subpages->have_posts()) : $subpages->the_post();

    $output .= '<li><a href="'.get_permalink().'" class="'.$page_id->post_name.'-link"><div class="'.$page_id->post_name.'-info"><div class="'.$page_id->post_name.'-img">'.get_the_post_thumbnail($page->ID,'icons').'</div><h2>'.get_the_title().'</h2></div></a></li>';

endwhile; endif;

wp_reset_postdata();

return $output;

What I'm trying to accomplish is having the put more like this:

WordPress
<img>
Development

All of the page titles used in this loop with be 2 words. Any thoughts or suggestions on how to do this would be greatly appreciated.

Answer 1

Assuming you know that there will always be two words separated by a space, you can use explode. Something like this:

$pieces = explode(" ", get_the_title());
$word1 = $pieces[0];
$word2 = $pieces[1];

$output .= '<li><a href="'.get_permalink().'" class="'.$page_id->post_name.'-link"><div class="'.$page_id->post_name.'-info"><h2>'.$word1.'</h2><div class="'.$page_id->post_name.'-img">'.get_the_post_thumbnail($page->ID,'icons').'</div><h2>'.$word2.'</h2></div></a></li>';