[Support request] Using PHP to see if Sections are enabled

[Andy]

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

[David]

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; ?>

[Andy]

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

[David]

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?

[Andy]

Yeah, I wondered about using CSS, I just tried PHP first 🙂

[David]

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

[Andy]

Nice – thanks David, I’ll have a bash at this shortly.

[David]

Glad to be of help. Have fun 😉

[Author]

Posts