Customize bbpress with woodmart template

Hi, how I can customize the forum page with woodmart child?
On your xtemos page you are using a header imagen on forum page with a search tool and breadcrumbs on it, how we can do the same?

Screenshot attached below

Thanks!

Attachments:

You must be logged in to view attached files.

Hello,

We can provide you the code from our xtemos website.

1. This is for the search form in the page title. Add it to the functions.php file in the child theme

// **********************************************************************// 
// ! Page title function
// **********************************************************************// 
add_action( 'woodmart_after_header', 'woodmart_page_title', 10 );
function woodmart_page_title() {
	global $wp_query, $post;

	// Remove page title for dokan store list page

	if( function_exists( 'dokan_is_store_page' )  && dokan_is_store_page() ) {
		return '';
	}

	$page_id = 0;

	$disable     = false;
	$page_title  = true;
	$breadcrumbs = woodmart_get_opt( 'breadcrumbs' );

	$image = '';

	$style = '';

	$page_for_posts    = get_option( 'page_for_posts' );
	$page_for_shop     = get_option( 'woocommerce_shop_page_id' );
	$page_for_projects = woodmart_tpl2id( 'portfolio.php' );

	$title_class = 'page-title-';

	$title_color = $title_type = $title_size = 'default';

	// Get default styles from Options Panel
	$title_design = woodmart_get_opt( 'page-title-design' );

	$title_size = woodmart_get_opt( 'page-title-size' );

	$title_color = woodmart_get_opt( 'page-title-color' );

	$shop_title = woodmart_get_opt( 'shop_title' );
	$shop_categories = woodmart_get_opt( 'shop_categories' );

	// Set here page ID. Will be used to get custom value from metabox of specific PAGE | BLOG PAGE | SHOP PAGE.
	$page_id = woodmart_page_ID();

	if( $page_id != 0 ) {
		// Get meta value for specific page id
		$disable = get_post_meta( $page_id, '_woodmart_title_off', true );

		$image = get_post_meta( $page_id, '_woodmart_title_image', true );

		$custom_title_color = get_post_meta( $page_id, '_woodmart_title_color', true );
		$custom_title_bg_color = get_post_meta( $page_id, '_woodmart_title_bg_color', true );

		if( $image != '' ) {
			$style .= "background-image: url(" . $image . ");";
		}

		if( $custom_title_bg_color != '' ) {
			$style .= "background-color: " . $custom_title_bg_color . ";";
		}

		if( $custom_title_color != '' && $custom_title_color != 'default' ) {
			$title_color = $custom_title_color;
		}
	}

	if( $title_design == 'disable' ) $page_title = false;

	if( ! $page_title && ! $breadcrumbs ) $disable = true;

	if( $disable ) return;

	$title_class .= $title_type;
	$title_class .= ' title-size-'  . $title_size;
	$title_class .= ' color-scheme-' . $title_color;
	$title_class .= ' title-design-' . $title_design;

	// Heading for pages
	if( is_singular( 'page' ) && ( ! $page_for_posts || ! is_page( $page_for_posts ) ) ):
		$title = get_the_title();

		?>
			<div class="page-title <?php echo esc_attr( $title_class ); ?>" style="<?php echo esc_attr( $style ); ?>">
				<div class="container">
					<header class="entry-header">
						<?php if ( woodmart_woocommerce_installed() && ( is_cart() || is_checkout() ) ): ?>
							<?php woodmart_checkout_steps(); ?>
						<?php else: ?>
							<?php if( $page_title ): ?><h1 class="entry-title"><?php echo esc_html( $title ); ?></h1><?php endif; ?>
							<?php if( $breadcrumbs ) woodmart_breadcrumbs(); ?>
						<?php endif ?>
					</header><!-- .entry-header -->
				</div>
			</div>
		<?php
		return;
	endif;
	
	// Heading for forums
	if( is_bbpress() ):
		$title = get_the_title();
		?>
			<div class="page-title <?php echo esc_attr( $title_class ); ?>" style="<?php echo esc_attr( $style ); ?>">
				<div class="container">
					<header class="entry-header">
						<?php if ( woodmart_woocommerce_installed() && ( is_cart() || is_checkout() ) ): ?>
							<?php woodmart_checkout_steps(); ?>
						<?php else: ?>
							<?php if( $page_title ): ?><h1 class="entry-title"><?php echo 'SUPPORT FORUM'; ?></h1><?php endif; ?>
						<?php endif ?>
						<div class="forum-search-inheading">
							<p><?php _e('Search topic or reply') ?></p>
							<?php bbp_get_template_part( 'form', 'search' ); ?>
						</div>
						<?php if( $breadcrumbs ) bbp_breadcrumb(); ?>
					</header><!-- .entry-header -->
				</div>
			</div>
		<?php
		return;
	endif;

	// Heading for blog and archives
	if( is_singular( 'post' ) || woodmart_is_blog_archive() ):

		$title = ( ! empty( $page_for_posts ) ) ? get_the_title( $page_for_posts ) : esc_html__( 'Blog', 'woodmart' );

		if( is_tag() ) {
			$title = esc_html__( 'Tag Archives: ', 'woodmart')  . single_tag_title( '', false ) ;
		}

		if( is_category() ) {
			$title = '<span>' . single_cat_title( '', false ) . '</span>'; 
		}

		if( is_date() ) {
			if ( is_day() ) :
				$title = esc_html__( 'Daily Archives: ', 'woodmart') . get_the_date();
			elseif ( is_month() ) :
				$title = esc_html__( 'Monthly Archives: ', 'woodmart') . get_the_date( _x( 'F Y', 'monthly archives date format', 'woodmart' ) );
			elseif ( is_year() ) :
				$title = esc_html__( 'Yearly Archives: ', 'woodmart') . get_the_date( _x( 'Y', 'yearly archives date format', 'woodmart' ) );
			else :
				$title = esc_html__( 'Archives', 'woodmart' );
			endif;
		}

		if ( is_author() ) {
			/*
			 * Queue the first post, that way we know what author
			 * we're dealing with (if that is the case).
			 *
			 * We reset this later so we can run the loop
			 * properly with a call to rewind_posts().
			 */
			the_post();

			$title = esc_html__( 'Posts by ', 'woodmart' ) . '<span class="vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '" title="' . esc_attr( get_the_author() ) . '" rel="me">' . get_the_author() . '</a></span>';

			/*
			 * Since we called the_post() above, we need to
			 * rewind the loop back to the beginning that way
			 * we can run the loop properly, in full.
			 */
			rewind_posts();
		}

		if( is_search() ) {
			$title = esc_html__( 'Search Results for: ', 'woodmart' ) . get_search_query();
		}

		?>
			<div class="page-title <?php echo esc_attr( $title_class ); ?> title-blog" style="<?php echo esc_attr( $style ); ?>">
				<div class="container">
					<header class="entry-header">
						<?php if( $page_title ): ?><h1 class="entry-title"><?php echo ( $title ); ?></h1><?php endif; ?>
						<?php if( $breadcrumbs && !is_search() ) woodmart_breadcrumbs(); ?>
					</header><!-- .entry-header -->
				</div>
			</div>
		<?php
		return;
	endif;

	// Heading for portfolio
	if( is_singular( 'portfolio' ) || woodmart_is_portfolio_archive() ):

		$title = get_the_title( $page_for_projects );

		if( is_tax( 'project-cat' ) ) {
			$title = single_term_title( '', false );
		}

		?>
			<div class="page-title <?php echo esc_attr( $title_class ); ?> title-blog" style="<?php echo esc_attr( $style ); ?>">
				<div class="container">
					<header class="entry-header">
						<?php if( $page_title ): ?><h1 class="entry-title"><?php echo esc_html( $title ); ?></h1><?php endif; ?>
						<?php if( $breadcrumbs ) woodmart_breadcrumbs(); ?>
					</header><!-- .entry-header -->
				</div>
			</div>
		<?php
		return;
	endif;

	// Page heading for shop page
	if( woodmart_is_shop_archive()
		&& ( $shop_categories || $shop_title )
	 ):

		if( is_product_category() ) {

			$cat = $wp_query->get_queried_object();

			$cat_image = woodmart_get_category_page_title_image( $cat );

			if( $cat_image != '') {
				$style = "background-image: url(" . $cat_image . ")";
			}
		}

		if( is_product_category() || is_product_tag() ) {
			$title_class .= ' with-back-btn';
		}

		if( ! $shop_title ) {
			$title_class .= ' without-title';
		}

		?>
			<?php if ( apply_filters( 'woocommerce_show_page_title', true ) && ! is_singular( "product" ) ) : ?>
				<div class="page-title <?php echo esc_attr( $title_class ); ?> title-shop" style="<?php echo esc_attr( $style ); ?>">
					<div class="container">
						<div class="nav-shop">

							<div class="shop-title-wrapper">
								<?php if ( is_product_category() || is_product_tag() ): ?>
									<?php woodmart_back_btn(); ?>
								<?php endif ?>

								<?php if ( $shop_title ): ?>
									<h1><?php woocommerce_page_title(); ?></h1>
								<?php endif ?>
							</div>
							
							<?php if( ! is_singular( "product" ) && $shop_categories ) woodmart_product_categories_nav(); ?>

						</div>
					</div>
				</div>
			<?php endif; ?>

		<?php
		
		return;
	endif;
}

2. This part is for styling, add it to the style.css file

/** ------------------------------------------------------------------------------------------------
* BB Page title
* ------------------------------------------------------------------------------------------------ */

.bbpress div.bbp-breadcrumb {
	float: none;
	text-align: center;
}
.bbpress div.bbp-breadcrumb a {
	color: white;
}
.bbpress div.bbp-breadcrumb p {
	color: rgba(255,255,255,0.9);
}
.bbpress div.bbp-breadcrumb:after{
	display: none;
}
.bbpress div.bbp-breadcrumb{
	margin-bottom: 0;
}
.bbpress div.bbp-breadcrumb p{
	margin-bottom: 0;
}
.forum-search-inheading #bbp-search-form {
	position: relative;
	max-width: 450px;
	margin: 0 auto;
}
.forum-search-inheading #bbp-search-form input[type="text"] {
	background-color: transparent;
	border:2px solid rgba(255, 255, 255, 0.7);
	color: white;
	font-size: 16px;
	letter-spacing: 0.3px;
	padding-right: 55px;
}
.forum-search-inheading #bbp-search-form input[type="text"]:focus {
	border-color:white;
}
.forum-search-inheading #bbp_search_submit {
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
	background-color: transparent !important;
	border:none;
	font-size: 0px;
	text-align: center;
	width: 50px;
	padding: 0;
	color: rgba(255,255,255,0.9);
}
.forum-search-inheading #bbp_search_submit:before {
	content: "\f125";
	font-size: 20px;
	line-height: 30px;
	font-family: "woodmart-font";
	transition: opacity .2s ease;
	-webkit-transition: opacity .2s ease;
}
.forum-search-inheading #bbp_search_submit:hover,
.forum-search-inheading #bbp_search_submit:focus {
	background-color: transparent;
	color: white;
	outline: none;
	opacity: 0.8;
}
.forum-search-inheading #bbp_search_submit{
    background-color: #96040f;
    border-color: #96040f;
    color: #ffffff;
    text-decoration: none;
}
.forum-search-inheading {
	margin-bottom: 20px;
}
.title-size-default .entry-title, .title-size-default h1{
	font-size: 48px;
	font-weight: 400;
	font-family: Lato;
	margin-bottom: 7px;
	text-transform: uppercase;
}

3. Create a file woodmart-child/bbpress/form-search.php with the following code

<form role="search" method="get" id="bbp-search-form" action="<?php bbp_search_url(); ?>">
	<div>
		<label class="screen-reader-text hidden" for="bbp_search"><?php _e( 'Search for:', 'bbpress' ); ?></label>
		<input type="hidden" name="action" value="bbp-search-request" />
		<input tabindex="<?php bbp_tab_index(); ?>" type="text" value="<?php echo esc_attr( bbp_get_search_terms() ); ?>" name="bbp_search" id="bbp_search" />
		<button type="submit" id="bbp_search_submit" value="<?php esc_attr_e( 'Search', 'bbpress' ); ?>"><?php esc_attr_e( 'Search', 'bbpress' ); ?></button>
	</div>
</form>

Regards

WOW!

Really thanks guys, you’re so cool! 😉
I will need just a few fixes more, please, see the following screenshot: http://prntscr.com/hyfjuz

Here is a code to delete these elements

#bbpress-forums .bbp-search-form, #bbpress-forums .bbp-breadcrumb{
	display: none;
}

As for the search form, it seems that you didn’t create the file we sent you. Or you didn’t activate the child theme.

Hi,

Were I have to submit this code in order to got it working? I introduced this code at the top of style.css of child theme but no changes have been done on the forum page

I have the child theme working and I’ve created the file too

I attach screenshots

Attachments:

You must be logged in to view attached files.

Could you please provide us your FTP access so we can check what is wrong there?

And we’re I can change this colors? I’m looking for it but I’m being unable to do it for myself, I don’t have knowledge on css code

Really thanks!

Attachments:

You must be logged in to view attached files.

Here I give to you FTP access,

In order to set you on the whitelist of the firewall I will need your IP and the country where are you connecting from,

I wait for the info,
Thanks!

Could you please provide us your admin access also?

There’s an admin for you

…

IP added on whitelist, now you may connect without problems, if you can’t connect, please, give me the name of the country which are you connecting from

My country

Country added to the whitelist, try to connect now

Thanks!

You can set your page title background in Theme Settings -> Page heading http://prntscr.com/hyg8el
And here is a code to change the color

.title-size-default .entry-title, .title-size-default h1{
	color: #fff;
}

Regards

Hi,

I added the color at style.css but I don’t see any changes, can you check it please?

style.css with the color code on title: http://prntscr.com/hygrfq

changes we’re needing to do for finish: https://prnt.sc/hygsgx

Really thanks!

You need to clear your browser cache to see the changes https://prnt.sc/hyhmi9

Great!!

Really thanks ppl, your awesome guys

Problem solved
Thanks!

Great, you are welcome!

[Author]

Posts