Show buttons on posts in certain categories

Support
#1

Hi, I’m in the process of converting a site to the X theme, and the site displays buttons on posts in certain categories. Can you help me duplicate this in X?

The original site is upstatefilms.org, and the buttons appear at the bottom of post pages like this: https://upstatefilms.org/judy

I’m referring to the buttons for “Other Films Playing in Rhinebeck” and “Switch to Films Playing in Woodstock.” This set of buttons appears only on posts with the category “Now Showing Rhinebeck.”

I’m working on X in the staging site, https://staging1.upstatefilms.org.

Thanks for any help you can provide.

#2

Hello Steve,

Thanks for writing in!

I have inspected the page and the buttons were added in each of the posts. You have this:

<div id="morebutton"><a href="/now-showing/rhinebeck"><button class="red">Other Films Playing in Rhinebeck</button></a><a href="/now-showing/woodstock"><button class="grey">Switch to Films Playing in Woodstock</button></a></div>

If you clone the site to your staging and use X theme, all of those buttons might still be present in each posts. I may not be sure how the live site were coded. If we have access on it, we might be able to figure it out.

Regards.

#3

Hi Steve,

Please add this code to your child theme’s functions.php

add_filter( 'the_content', 'filter_the_content_in_the_main_loop', 999999999 );
 
function filter_the_content_in_the_main_loop( $content ) {
 
    // Check if we're inside the main loop in a single post page.
    if ( is_singular('post') && in_the_loop() && is_main_query() ) {


		if ( in_category( "now-showing" ) ) { 
		return $content . '<div id="morebutton"><a href="/now-showing/rhinebeck"><button class="red">Other Films Playing in Rhinebeck</button></a><a href="/now-showing/woodstock"><button class="grey">Switch to Films Playing in Woodstock</button></a></div>';
		} 

		if ( in_category( "now-showing-tinker-street" ) ) {
		return $content . '<div id="morebutton"><a href="/now-showing/woodstock"><button class="red">Other Films Playing in Woodstock</button></a><a href="/now-showing/rhinebeck"><button class="grey">Switch to Films Playing in Rhinebeck</button></a></div>';
		}       

    }
 
    return $content;
}

As for the positioning, it’s done through this javascript

jQuery(".showtimes-moviepage")
.prependTo(".post-entry");

For that, please add this similar code to Theme Options > JS

jQuery(".showtimes-moviepage")
.prependTo(".single-post .entry-content");

Thanks!

#4

Wow, brilliant. Both tips worked perfectly! Your support is the best! Thanks so much.

#5

Can you help with one more thing, the CSS for the buttons? In the original site, there is CSS for the buttons, but this CSS is not being applied in the staging site. Can you help make that happen, or perhaps show me how to make the X button stylings apply in these cases. Here’s the original CSS:

button.red {
	color: white;
	background-color: rgb(229, 8, 45);
	cursor: pointer;
	padding: 0.6em 1em;
	margin-right: 0.6em;
	display: inline-block;
	border-style: solid;
	border-width: 0px;
	text-transform: uppercase;
	font-size: 13px;
	font-family: "HalisR-Black", sans-serif;
	margin-top: 10px;
}

button.grey {
	color: white;
	background-color: grey	;
	cursor: pointer;
	padding: 0.6em 1em;
	margin-right: 0.6em;
	display: inline-block;
	border-style: solid;
	border-width: 0px;
	text-transform: uppercase;
	font-size: 13px;
	font-family: "HalisR-Black", sans-serif;
	margin-top: 10px;
}

#morebutton {
	padding-bottom: 10px;
}
#6

Never mind, Got it working. Thanks again for all your help!

#7

Hey Steve,

It’s good to know that you got it working.
Don’t hesitate to open another thread if there’s anything else we can help you with.

Cheers.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.