How to add content to the_content() in Wordpress using a hook

Question

quick question:

lets say this is my content div:

<div id="content">
    <ul id="featured-controllers" class="clearfix">
       <li class="first" style="min-height: 182.167px;">
          <div class="et_slide_hover" style="opacity: 0; display: block;"></div>
          <div class="controller">
             <h2>Volunteers have more fun</h2>
          </div>
          <div class="et_animated_bar" style="display: block; width: 238.055px; left: 0.488656px; overflow: hidden;"></div>
      </li>
      <li style="min-height: 182.167px;" class="">
          <div class="et_slide_hover" style="display: block; opacity: 0;"></div>
          <div class="controller">
              <h2>Mark your calendar</h2>
              Check out our schedule of upcoming events...</p>
          </div>
         <div class="et_animated_bar" style="display: none; width: 239px; left: 0px;"> </div>
     </li>
  </ul>
  <div id="services" class="clearfix">
       <div class="service">
           <h3>Sample Page</h3>
             <p>
             <a href="http://collaborativecommunityprogram.org/wp-content/uploads/sample.png">
            <img class="alignnone size-medium wp-image-12" width="300" height="84" src="http://collaborativecommunityprogram.org/wp-content/uploads/sample-300x84.png" alt="sample">
            </a>
            </p>
      </div>
  </div>
  <div id="footer">
       <div id="footer-widgets" class="clearfix">
           <div class="footer-widget" style="min-height: 58px;">
               <div id="text-2" class="f_widget widget_text">
                   <h4 class="widgettitle"> </h4>
                <div class="textwidget">
           <img src="http://collaborativecommunityprogram.org/wp-content/uploads/footer-social.png">
               </div>
         </div>
     </div>
</div>

Formatting is a bit messed up, but I'm trying to add content to the ul list with the id of "featured-controllers" right at the top of the content div element within that above content div. I'm trying to append content to it.

Here is the site: http://collaborativecommunityprogram.org/

Now, I've tried doing this:

function pc_custom_content($content) {
  return $content."<div><p>This is a test</p></div>";
}
add_filter( 'the_content', 'pc_custom_content');

But it appends this div onto the end of the div with id of "services" instead of ul id of "featured-controllers" at the top.

Is there any way I can stick some custom content, preferably another li into the ul id of "featured-controllers" list? I have found no way of doing this through the admin panel.

Any help is greatly appreciated.

Thanks!!

What you're looking for is probably a shortcode. Do you want to add this content to all pages? — Nick Pickering, Feb 20 '13 at 04:00
No sir, just want to add it to the homepage. Thanks for the help :) — Alex Douglas, Feb 20 '13 at 04:02
"the_content" filter simply gives you the content as $content for you to then manipulate and return, you'll have to either load the HTML in a DOM structure, or perform string manipulations on your html. — Scuzzy, Feb 20 '13 at 04:04

score 1 · Answer 1 · answered Feb 20 '13 at 04:05

1

You could add a shortcode to your content from the admin panel. Then call your php code from your functions.php or plugin.

Modified from the Wordpress Codex

//you can pass arguments to shortcodes and they are stored in the $atts array
function function_name( $atts ){  
    return "dynamic content to replace shortcode with";
}
add_shortcode( 'shortcode_name', 'function_name' );

Then add this to your Home Page's content where you want the dynamic content to appear in WP Admin:

[shortcode_name]

answered Feb 20 '13 at 04:05

Nick Pickering

3,095
3
29
50

I'm studying up on shortcodes (not familiar) only problem is, I can't get to the "Home" page in Admin->Pages to pop that shortcode in. trying to figure out how to get it in there – Alex Douglas Feb 20 '13 at 04:17
@AlexDouglas Ah, you might have to change your home page default in Settings->Reading to an existing page. If you want to keep your homepage as a post list, you can add your dynamic content code straight into your home page's template. If you're not sure which template is your home page, use this: [Template Hierarcy](http://codex.wordpress.org/images/1/18/Template_Hierarchy.png) – Nick Pickering Feb 20 '13 at 04:24
1

Many themes have custom home pages and some do not "play well with others". Often editing the main theme home page code directly is the only/best option. The only problem is when you update the theme your changes go away. Always backup the original and your modified version (home_orig.php, home_new.php) before hacking up home.php. To add new code it is often easiest to create a new plugin (requires readme.txt and blah.php) that holds your "output custom content" function. Then your home.php file just needs to be modified to say . – Lance Cleveland Feb 20 '13 at 05:16

How to add content to the_content() in Wordpress using a hook

1 Answers1