Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

valeriuv
valeriuv
20,999 Points

How do I remove an HTML element with it's content from a specific WP page?

I'm looking to remove a div with a specific class from only one page in wordpress. I know it should be easily done with a filter hook, but how do I write the function?

Thanks!

Dan James
Dan James
2,709 Points

Filters may not be the way to do this, but it depends what you're trying to achieve. Can you give a little more detail? Is this a template being used by multiple pages on the site?

Floris Keijser
Floris Keijser
10,628 Points

maybe try a css display: none on the specific class in the chrome inspector. if your theme allows you can even target this class only on this specific page using a custom class.

1 Answer

Brian Hayes
Brian Hayes
20,986 Points

One way to accomplish this would be to create a specific page template for that page. You could accomplish this by either creating a template and only assigning it to the page you need the div removed from, by using the page slug in the $slug-page.php naming convention, or the ID in the $id-page.php convention. Personally I suggest an assigned template so that by changing the page slug or id the page doesn't break.

Once you have the template created, copy over the code from page.php and simply remove the div from the page template.

I think this would be the simplest way to solve the problem if removing the div from the markup is your goal. The only other way I can think would be to edit the page.php template with a conditional statement that checks for that specific pages id or slug and, when matched, won't run the code that creates that div.

If, though, the div you wish to remove is generated from a function, and not a part of any template markup, then you need to identify the function that is producing that markup and look up what filters, if any, it has. I still say it would be wise to create a template file and put the filter in there and assign it to that page as oppose to using a conditional statement in your functions.php.

As for how a function may look for filtering here's an example of a filter function I wrote just today:

/**
 * Edit submit button markup
 *
 * @since 
 * @param array $defaults Existing attributes
 * @return array Ammended attributes
 */
function genfound_comment_form_submit( $defaults ) {
    $defaults['submit_field'] = '<div class="form-submit row">' . 
                            '<div class="' . 'small-12' . ' ' . 'columns' . '">' .
                            '%1$s %2$s' . 
                            '</div>' .
                            '</div>'
                            ;
    $defaults['class_submit'] .= ' ' . 'button';

    return $defaults;
}
add_filter( 'comment_form_defaults', 'genfound_comment_form_submit' );

basically what's happening here is I create a new function and pass the variable that applies to the filter I plan to hook into. In this case its the comment_form_defaults filter hook. This is something you find via WordPress codex or developer reference. From what I read in the documentation I knew I could use a few things from the array stored in $defaults. In this case I pulled the markup for the wrapper that goes around a comment form submit button, as well as the classes associated with the submit input field. In the first I'm overwriting the string that's stored in that item in the array, whereas in the second I just added to the string by using .= instead of =.

Once you're all done making you're changes to whatever items or variables simply return the variable and then hook it into the filter. Also, you can put the add_filter() function before or after the function you write. I've seen it done both ways much of the time, and in this case things just seemed better organized when I did it this way.