Modifying layout of single post, search results, and 404 error page

What are my options for how to change the layout of single post, search results, and 404 error pages? I’m currently using BB theme and page builder.

I know PHP, so I can edit the child theme files if necessary, but I’m wondering if there are other ways to customize these pages before I dive into it. The customizations I want to make are pretty basic.

Mainly I just want to add more padding to the content portion of single posts, so the text area of single posts doesn’t look so wide on a big monitor. My blog design doesn’t use a sidebar. I’d also like to add a newsletter sign-up box at the bottom of those pages, which I’ve already saved as a BB module that I’ve used on other pages on the site. Other than these two tweaks, the default output of single post looks fine.

I was able to customize my category pages by creating a page for each category and then using the Posts module to list the appropriate posts for each category page. This enable me to use the BB page builder for category pages, which was very convenient.

Is there a similar workaround for being able to use BB page builder to customize pages like single post, search results, and 404 error page?

Hey Steve,

Similarly to how you did the category pages with BB, the same could be done with your individual post pages. That’s pretty much the extent of Beaver Builder at this time thought unfortunately. The templating functionality and use of global rows may make this a bit easier for you as well. For the other page templates you mention, yes, you’ll need to modify those with your child theme. Sorry about that!

Best,
Billy

Hi Billy,

My blog has about 1300 posts. Does that mean I’d have to create 1300 pages (one for each post) to customize them with the BB Posts module? If so, that wouldn’t be practical due to the posting volume and frequency for this site.

I guess I can create copies of the appropriate PHP files, add them to the child theme, and modify them for these types of dynamic pages though.

Hey Steve,

Yep, that doesn’t sound practical, that is a lot of posts! Sorry I don’t have a better answer here for you.

Best,
Billy

I was able to change the width of all the content areas by adding a little CSS, so I have that part working nicely now.

But I’m not sure how to add a BB Subscribe Form to the bottom of each single post. Any suggestions on how to do that?

I thought it might be as simple as viewing the HTML source of an existing page that includes the Subscribe Form module, then copy and paste the resulting code for the Subscribe Form into single.php in my BB child theme. That does add something resembling a Subscribe Form to the bottom of my posts, but the formatting of it is trashed.

Hey Steve,

The only way around that for now is to use a plugin called Insert Pages. What it does is it allows you to call content from a specific page via shortcode. You can place that shortcode inside your single.php file so it appears on all posts.

The next thing you need to do is to make the assets(CSS/JS files) for that same page available site wide. This can be done by using the fl_builder_global_posts filter.

Hope this helps!

Ben

Ok, when I add this code:

function my_global_builder_posts( $post_ids ) {
$post_ids[] = ‘5725’;
return $post_ids;
}
add_filter( ‘fl_builder_global_posts’, ‘my_global_builder_posts’ );

Then my H1 titles on my single post pages disappear, so my blog posts display with no titles. The titles still appear correctly on the category pages.

5725 is the ID of a page with the BB Subscribe Form I wish to use.

Any suggestions?

Hey Steve,

It’s quite possible that page 5725 has styling that matches those H1 titles. Did it fix the styling for your Subscribe form though?

Ben

I’ve made some progress with this…

The Insert Pages plugin doesn’t parse single.php. It only parses the actual content of posts and pages apparently. So I can’t use that because I want the Subscribe Form to appear just above the footer on my single posts, not inside of blog posts. I don’t want to add Insert Pages shortcodes to every post since there are 1300 posts.

However, I was able to use the Insert Pages plugin to temporarily insert the content of a Subscribe Form page into another page, then grab the exact HTML that it inserted. I pasted that HTML into single.php, and that seems to work. It’s not ideal perhaps, but it gets the job done.

The H1 titles of my blog posts are still missing though. The only content that page 5725 has is the subscribe form and an H1 header. I’ll try playing around with it and maybe use a different page template without an H1 header to see if that fixes it.

Hey Steve,

If you can share the URL of the page where this is happening, we might be able to check why that H1 is missing. It’s probably just a styling obtained from the 5725 asset.

Ben

Hi Ben,

I can’t share a URL since the site is being developed offline using Desktop Server, running on a Macbook.

I tried using different pages for the template, including one that doesn’t even have an H1 tag on the page… and it still removes all the H1s from my blog posts.

When I view the source, I see that the H1 tags are still present, but they aren’t being rendered in the browser. I tested across multiple browsers.

This is the header code for a sample blog post – the H1 is there, but it doesn’t render.

	<header class="fl-post-header">
		<h1 class="fl-post-title" itemprop="headline">
			Prisoners					</h1>
		<div class="fl-post-meta fl-post-meta-top"><span class="fl-post-date" itemprop="datePublished" datetime="2015-06-09">June 9, 2015</span></div><meta itemprop="interactionCount" content="UserComments:0">	</header><!-- .fl-post-header -->

Hey Steve,

Can you check what styling has been applied to that H1 tag? What about if you change the H1 tag on the template page(where the subscribe form is)? Probably switch it to h2 or h3 and see if it makes any difference. Having multiple H1’s on one isn’t advisable for SEO anyway, from what I read.

Ben

Some more info…

When I use Chrome’s Inspector to see what’s actually rendering, it looks like the whole snippet of code above isn’t rendering at all. So maybe it’s an issue with fl-post-header, not with H1 tags?

Do you think there could be an issue with using fl_builder_global_posts with the ID of a page (not a post) and then using it for posts (not pages)? Would that potentially cause fl-post-header not to render?

Hi Ben,

To answer your previous question, the page I’m using as a template doesn’t have an H1 tag on it.

The template page only has the following content: one BB row that contains two columns. The first column has a BB Callout module (which uses an H2 for the headline). The second column has a BB Subscribe Form module.

That’s all there is to that page. It uses the BB theme too.

Hey Steve,

The filter works with a page or post ID and it gets applied globally. Be it a page, post, or CPT, the assets get loaded regardless. It’s really hard to know what’s happening since we can’t see the page/site. Do you think you could push it to a staging URL so we can take a look?

Ben

I think I found the source of the problem, Ben.

When I view the contents of the CSS file that BB is adding globally, the file contains this snippet right at the end:

.fl-post-header { display:none; }

That would explain why the headers aren’t showing up.

Any idea why that code is even included in the CSS for BB-created pages? And how do I remove it?

Alternatively, is there a way I can create a BB page to use as a template so that the CSS for that page won’t contain this code to make .fl-post-header invisible?

That odd CSS added by BB definitely seems to be the source. I can get the header (including the H1 title) to display on my posts now by adding this line of CSS to my child theme:

.fl-post-header { display: block; }

So I’m able to get the posts looking the way I’d like, but this seems like a kludgy way to do it. Why does BB make the fl-post-header invisible on pages to begin with? Is it okay to override this behavior in the child theme’s CSS like I just did, or can you think of a better way to do this?

Hey Steve,

I just checked the CSS file generated on a page I created here on my local dev and I can’t find a styling like that. This may be specific to how you configured the page. Yes, overriding it like that on your child theme’s CSS is fine. There shouldn’t be any negative effects to it.

Ben