Wordpress shortcode does not work when its wrapped in HTML

Question

I have create Wordpress pages that contain HTML elements like <div> and <ul> e.g.

<div id="main" class="large-12 medium-12 columns clearfix" role="main">
  <h2 class="press-list-header">Articles</h2>
    <ul class="press-list">

    </ul>
</div> 

I would like to place short codes inside these HTML elements like this:

<div id="main" class="large-12 medium-12 columns clearfix" role="main">
  <h2 class="press-list-header">Articles</h2>
    <ul class="press-list">
[picture image="http://example.com/image1.jpg" thumbnail="http://example.com/image1-thumbnail.jpg"]
[picture image="http://example.com/image2.jpg" thumbnail="http://example.com/image2-thumbnail.jpg"]
[picture image="http://example.com/image3.jpg" thumbnail="http://example.com/image3-thumbnail.jpg"]
    </ul>
</div> 

When I do this, the short codes just show up as regular text on the rendered page. If I just place the short codes outside of the HTML elements then they function properly rendering the expected content onto the page.

How can I get my short codes to render their content wrapped within HTML elements?

UPDATE

I should have been more descriptive. I want to make it easy for my client to just drop in a short code in the TinyMCE editor for pages and posts. I do not want them having to deal with php or html code. They will not have access to those .php template files anyways since they aren't developers. I have gotten the short codes to work fine for just posts but not pages. I believe the reason for this is the fact that I am using a template called custom-page.php for all my pages which looks like:

<?php /* Template Name: Custom */ ?>
<?php get_header(); ?>

  <div id="content">        
    <div id="inner-content" class="row clearfix">

      <?php the_post(); global $post; echo $post->post_content; ?>

    </div> <!-- end #inner-content -->
  </div> <!-- end #content -->

<?php get_footer(); ?>

I have determined that the problem lies in the line

<?php the_post(); global $post; echo $post->post_content; ?>

For some reason it is just rendering the short code text. It is not allowing the short codes to run and render the expected content. How can I rewrite this line to make short codes execute properly?

Answer 1

You're looking for do_shortcode():

<?php echo do_shortcode("[shortcode]"); ?>

So in your template, it will look as such:

<div id="main" class="large-12 medium-12 columns clearfix" role="main">
  <h2 class="press-list-header">Articles</h2>
    <ul class="press-list">
<?php echo do_shortcode("[picture image=\"http://example.com/image1.jpg\" thumbnail=\"http://example.com/image1-thumbnail.jpg\"]"); ?>
<?php echo do_shortcode("[picture image=\"http://example.com/image2.jpg\" thumbnail=\"http://example.com/image2-thumbnail.jpg\"]"); ?>
<?php echo do_shortcode("[picture image=\"http://example.com/image3.jpg\" thumbnail=\"http://example.com/image3-thumbnail.jpg\"]"); ?>
    </ul>
</div>

Adding to your UPDATE, the do_shortcode function is still the way to go:

<?php the_post(); global $post; echo do_shortcode($post->post_content); ?>

Answer 2

you need to do like this

<?php 
echo do_shortcode("[picture image='http://example.com/image1.jpg' thumbnail='http://example.com/image1-thumbnail.jpg']"); 
?>

Answer 3

 <?php echo do_shortcode('<div id="main" class="large-12 medium-12 columns clearfix"   role="main">
 <h2 class="press-list-header">Articles</h2>
 <ul class="press-list">
 [picture image="http://example.com/image1.jpg" thumbnail="http://example.com/image1-thumbnail.jpg"]
 [picture image="http://example.com/image2.jpg" thumbnail="http://example.com/image2-thumbnail.jpg"]
 [picture image="http://example.com/image3.jpg" thumbnail="http://example.com/image3-thumbnail.jpg"]
 </ul>
</div>');