Hi there!
We’ll need to change the way Shoreditch decides how to style the Panel Page, by removing a class from the body element.
Start by adding this to the functions.php
file of your child theme:
// Removes no-sidebar class from the body_class array on Panel Pages.
add_filter('body_class', function (array $classes) {
if ( is_page_template('panel-page.php') ) {
unset( $classes[array_search('no-sidebar', $classes)] );
}
return $classes;
}, 12 );
Next, we need to call the sidebar in the panel template.
Copy panel-page.php
from the parent theme into your child theme.
Just above this line:
get_sidebar( 'footer' );
add in this:
get_sidebar();
Now we have a sidebar, and some of the basic styling will begin to carry over.
Add the following CSS to handle the rest of the alignments, widths, and positioning:
.page-template-panel-page #secondary {
width: 90%;
margin: 0 auto;
}
@media screen and (min-width: 895px) {
.page-template-panel-page .site-content {
width: calc(100% - 3em);
margin: 0 3em 0 0;
}
.page-template-panel-page .content-area {
float: left;
width: 70%;
}
.page-template-panel-page .hentry-wrapper {
padding: 0 1em;
}
.page-template-panel-page #secondary {
float: right;
padding-top: 6em;
width: 25%
}
}
That should do the trick – let me know what you think!