Third Party Theme Compatibility

Generally Projects will play nicely with most themes. However it is impossible to make a plugin compatible with all themes out of the box and you may run into issues such as the sidebar appearing beneath the main content when using some themes.

This is all down to the markup used to wrap the projects content.

The default wrappers look like this:

<div id="container"><div id="content" role="main">

Projects content is here.

</div></div>

If this doesn’t match your theme you will run into the aforementioned issues on the projects page, single projects page and projects archives (categories). There are two ways to fix this.

projects.php ↑ Back to top

The projects template loader will always check your theme for the existence of a projects.php template file. If it exists this will be used for all projects pages. This makes it easy to add a catch-all compatibility solution. To do so:

  1. Duplicate the page.php template in your theme and rename it to projects.php.
  2. Open the newly created projects.php file and remove everything between the wrappers
  3. Add <?php projects_content(); ?> in its place
  4. Save and upload the file

Using hooks ↑ Back to top

Using projects.php works well but doesn’t give you much flexibility. The most comprehensive way to add layout compatibility is to remove the default wrappers and add your own which match the theme you’re using.

To remove the default wrappers add the following to your themes functions.php file:

remove_action( 'projects_before_main_content', 'projects_output_content_wrapper', 10 );
remove_action( 'projects_after_main_content', 'projects_output_content_wrapper_end', 10 );

You now need to add your own wrappers e.g.

add_action( 'projects_before_main_content', 'my_projects_output_content_wrapper', 10 );
add_action( 'projects_after_main_content', 'my_projects_output_content_wrapper_end', 10 );

function my_projects_output_content_wrapper() {
echo '<section class="my-wrapper">';
}

function my_projects_output_content_wrapper_end() {
echo '</section>';
}

CSS ↑ Back to top

For deep integrations you should consider disabling the Projects CSS.

Editing Templates ↑ Back to top

It should go without saying that if you want to edit templates, do not touch the core files as they will be overwritten during updates, erasing your modifications. To edit a template safely you must copy it to your theme. You can read about that process in details here.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top