The AudioTheme plugin was built to work with any theme that follows standard WordPress conventions. In some cases, however, the plugin isn’t aware of markup used in the theme, causing the default templates to appear broken. Typically, you only need to add a couple of hooks to your own custom plugin or child theme to help rein things in.

Hooks

Using the default theme Twenty Thirteen as an example, if we open up index.php, there are a couple of <div> elements around the Loop.

Those wrapping elements need to be added to all of the AudioTheme templates in order to mimic the theme’s output. That can be done using the audiotheme_before_main_content and audiotheme_after_main_content action hooks like this:

function childtheme_wrapper_before() {
	echo '<div id="primary" class="content-area">';
		echo '<div id="content" class="site-content" role="main">';
}
add_action( 'audiotheme_before_main_content', 'childtheme_wrapper_before' );

function childtheme_wrapper_after() {
		echo '</div>';
	echo '</div>';
}
add_action( 'audiotheme_after_main_content', 'childtheme_wrapper_after' );

Usually, adding those wrappers is all that’s needed, but Twenty Thirteen expands the full width of the browser, so a little CSS is needed to constrain the width of the templates:

function childtheme_head() {
	?>
	<style type="text/css">
	.audiotheme {
		margin: 40px auto;
		padding: 0 20px;
		max-width: 1080px;
	}
	</style>
	<?php
}
add_action( 'wp_head', 'childtheme_head' );

That should do it!

Even though things may look broken, a few simple tweaks may be all you need to get the framework working with your theme.

Styles

Styles are inherited from the theme, so it may be necessary to add some custom CSS for more seamless integration. If you’re not using a child theme, we recommend creating one to implement your customizations so they won’t be wiped out if your parent theme is updated in the future.

Or you can add custom CSS in the “Additional CSS” section in the customizer.

Advanced Customization

If the default layouts and styles just don’t work for you and you’re familiar with themes, it’s possible to copy the default templates into your theme to customize them as much as you’d like. In fact, this is how our own premium themes work.