Add Page Title to Pro Header Using Shortcode

[btabor23]

I built a great header in Pro Headers—logo, nav, etc. I understand that landmark headers (used in the original header builder) are not supported with the Pro Header Builder. Now I have no page titles throughout my entire site.

How can I add page titles in the Pro Header Builder so I don’t have to manually add them to each page?

One solution I’ve thought of is creating two Pro Headers—one without page title, one with a page title—and assign them accordingly. If I go this route, is there a way for me build an additional header where I can add shortcode (or something) that populates the page title? Is there a better way to go about this?

Here’s the site I’m developing. You’ll see that only a few pages were designed without page titles while most inner pages have page titles. http://f41.f4c.myftpupload.com

[paul.r]

Hi,

Please remove any shortcodes you have added. You can use hooks to add your page title to your pages.

Add the code below in your child theme’s functions.php

function add_my_title() {   
    if(is_page()){  ?>
  <header class="x-header-landmark">
      <div class="x-container max width">
        <div class="x-landmark-breadcrumbs-wrap">
          <div class="x-landmark">
               <h1 class="h-landmark entry-title"><span><?php the_title(); ?></span></h1>
          </div>
      </div>
    </div>
</header>
<?php
    }
}
add_action( 'x_after_view_global__slider-below', 'add_my_title', 10 );

https://theme.co/apex/forum/t/customizations-actions-and-filters-in-x/208

Hope that helps.

[btabor23]

Paul,

This is very helpful. Thank you! Two more questions while we’re on this topic:

• Is here a way for me to add breadcrumbs?
• The “Disable Page Title” function does not work. Any way to fix this?

[thai]

Hi There,

Please update the previous code to this:

function add_my_title() {
	$disable_page_title = get_post_meta( get_the_ID(), '_x_entry_disable_page_title', true );
	$breadcrumbs        = x_get_option( 'x_breadcrumb_display' );
	if ( $breadcrumbs == '1' ) : ?>
		<?php if ( ! is_front_page() && ! x_is_portfolio() ) : ?>
		<div class="x-breadcrumbs-wrap">
			<?php x_breadcrumbs(); ?>
		</div>
		<?php endif; ?>
	<?php endif; ?>
	<?php  
    	if( is_page() && $disable_page_title != 'on' ){
    ?>
	<header class="x-header-landmark">
		<div class="x-container max width">
			<div class="x-landmark-breadcrumbs-wrap">
				<div class="x-landmark">
					<h1 class="h-landmark entry-title"><span><?php the_title(); ?></span></h1>
				</div>
			</div>
		</div>
	</header>
<?php
    }
}
add_action( 'x_after_view_global__slider-below', 'add_my_title', 10 );

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope that helps and thank you for understanding.

[btabor23]

So close! The breadcrumbs are showing up in a weird spot. One more small tweak and we’re there!

https://imgur.com/h8iTUJs

[nabeel]

Hi again,

To align it with your content below you can add the following code in the Theme Options > CSS:

.x-site .x-breadcrumbs-wrap {
    width: 88%;
    text-align: left;
    max-width: 1200px;
    display: block;
    margin: 0 auto 10px;
}

Feel free to make adjustments in the code as per your need. If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!

[btabor23]

I’m comfortable with CSS but this issue is that div.x-breadcrumbs-wrap displays above div.x-header-landmark rather than below it. Do you know how to fix this issue?

[paul.r]

Hi,

To fix it, you can change the code in your child theme’s functions.php file to this.

/* Add page title and breadcrumbs */
function add_my_title() {
    $disable_page_title = get_post_meta( get_the_ID(), '_x_entry_disable_page_title', true );
    $breadcrumbs        = x_get_option( 'x_breadcrumb_display' );
 
        if( is_page() && $disable_page_title != 'on' ){
    ?>
    <header class="x-header-landmark">
        <div class="x-container max width">
            <div class="x-landmark-breadcrumbs-wrap">
                <div class="x-landmark">
                    <h1 class="h-landmark entry-title"><span><?php the_title(); ?></span></h1>
                </div>
            </div>
        </div>
    </header>
<?php
    }
    if ( $breadcrumbs == '1' ) : ?>
        <?php if ( ! is_front_page() && ! x_is_portfolio() ) : ?>
        <div class="x-breadcrumbs-wrap">
            <?php x_breadcrumbs(); ?>
        </div>
        <?php endif; ?>
    <?php endif;
}
add_action( 'x_after_view_global__slider-below', 'add_my_title', 10 );

Further customization from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thank you for understanding.

[btabor23]

This is exactly what I needed! Thank you, all!

[paul.r]

You’re welcome!