Archived topic
Using PHP to see if Sections are enabled
7 replies · Started by Andy on June 22, 2018
Hi Tom and team,
What I'm trying to achieve is to insert (using a shortcode) a screen-wide section within a standard blog post (if the blog post itself isn't using sections).
My first thought is to add some PHP to exit the divs, then re-add them again at the end... so is there an identifier I could use to detect whether sections have been enabled on a post/page? I can see the body class 'generate-sections-enabled' and therefore I could do this in jQuery, but I wanted to add some conditional PHP directly into the template file... eg:
<?php if( $sections_enabled ) : ?>
</div></div></article>
<?php endif; ?>Alternatively, is there a better way of trying to add this screen-wide section within the narrow blog post?
Thanks,
Andy
Hi Andy,
ill check with Tom if there is a specific condition, however you could test for the class using get_body_class
<?php $classes = get_body_class();
if (in_array('generate-sections-enabled',$classes)) : ?>
// Markup
<?php endif; ?>Ah yes, thanks David... that works perfectly.
I have to break out of a whole bunch of containers (all the way out to the #page):
</div></div></article></main></div></div></div>
... but I might be guessing a little when returning to the blog post content with the classes I'm adding back in:
<div class="hfeed site grid-container container grid-parent">
<div class="site-content">
<div class="content-area grid-parent mobile-grid-100 grid-100 tablet-grid-100">
<main class="site-main">
<article class="post hentry">
<div class="inside-article">
<div class="entry-content">but unless you or Tom know of a better way to do this, this will do for now :)
Cheers,
Andy
Well glad to hear the first part worked.
I have been toying with something similar here (copying the old medium style posts):
https://block.assemblewp.com/start-here/
It's pure CSS. I can provide if interested?
Yeah, I wondered about using CSS, I just tried PHP first :)
Yes, i looked at PHP but realised it would get awfully complex and not fluid enough.
The site above uses this CSS
/* Fixed columns - single post & header */
@media (min-width: 420px) {
body.single-post .grid-container {
max-width: 100%;
}
.single-post .inside-article .entry-content :not(.extended-container),
.comments-area,
.inside-page-header {
max-width: 36rem;
margin-left: auto;
margin-right: auto;
}
.single-post .extended-container , .extended-container > * {
max-width: 100% !important;
text-align: center;
margin: 20px 0;
}
}
.single footer.entry-meta {
max-width: 36rem;
margin-right: auto;
margin-left: auto;
}You can define the REM unit size using:
html {
font-size: 18px;
}You can then define a wide container with this class: .extended-container
Nice - thanks David, I'll have a bash at this shortly.
Glad to be of help. Have fun ;)
