AMP Menú Reader Mode

@juangose If you’ve created your own AMP reader mode templates, or if your theme features it’s own templates these may override the mini plugin addition. In your case it looks like the Jannah theme does provide it’s own AMP templates.

With the mini plugin you have installed you can rename/remove your themes header-bar.php overwrite, which should be located within your wp-content/themes/jannah/amp directory.

Thanks, I wasn’t aware that Jannah uses her own template for AMP. I tried to rename the file header-bar.php and no header or menu is shown.

This is the code for header-bar.php:

<header id="#top" class="amp-wp-header">
	<div>
		<a href="<?php echo esc_url( $this->get( 'home_url' ) ); ?>">
			<?php echo esc_html( $this->get( 'blog_name' ) ); ?>
		</a>
	</div>
</header>

<?php
	// below Header Ad
	if( tie_get_option( 'amp_ad_below_header' ) ){ ?>
		<div class="amp-custom-ad amp-below-header-ad amp-ad">
			<?php echo tie_get_option( 'amp_ad_below_header' ); ?>
		</div>
	<?php
	}
?>

Can I add something to it so that the menu is displayed?

@juangose Can you try and install this plugin and then use the following:

<header id="#top" class="amp-wp-header">
	<div>
		<a href="<?php echo esc_url( $this->get( 'home_url' ) ); ?>">
			<?php echo esc_html( $this->get( 'blog_name' ) ); ?>
		</a>
               <?php echo do_shortcode('[jz-sidebar]'); ?>
	</div>
</header>

<?php
	// below Header Ad
	if( tie_get_option( 'amp_ad_below_header' ) ){ ?>
		<div class="amp-custom-ad amp-below-header-ad amp-ad">
			<?php echo tie_get_option( 'amp_ad_below_header' ); ?>
		</div>
	<?php
	}
?>

Let me know if that works, you may need to style and position the navigation button.

I’ve installed it and it doesn’t show anything. I think the code you are indicating is the same as the default, maybe you forgot to add something.

@juangose I can see the button when looking at your source code, but the problem is your logo is covering the full width. Please try the below.

<header id="#top" class="amp-wp-header">
	<div>
		<a href="<?php echo esc_url( $this->get( 'home_url' ) ); ?>">
			<?php echo esc_html( $this->get( 'blog_name' ) ); ?>
		</a>
	</div>
 <?php echo do_shortcode('[jz-sidebar]'); ?>
</header>

<?php
	// below Header Ad
	if( tie_get_option( 'amp_ad_below_header' ) ){ ?>
		<div class="amp-custom-ad amp-below-header-ad amp-ad">
			<?php echo tie_get_option( 'amp_ad_below_header' ); ?>
		</div>
	<?php
	}
?>

Now I see the button. How can I add CSS to style the button? If I add it to the additional CSS section of WordPress or Jannah it doesn’t load in AMP :/

@juangose You can add css to reader mode templates using the below template, added to your themes functions.php or preferabley a custom plugin (so it doesn’t get overwritten):

add_action( 'amp_post_template_css', function() {
        ?>
        /* Put Custom CSS here */
        <?php
} );

As you can image we can’t provide the particular styling for users own sites, but you can use Stackoverflow or online resources to learn CSS if you’re unsure. If you’re able to use the default reader mode templates the button should be placed automatically.

Okay, I got it, only 3 lines of CSS were enough. Finally I have a nice and useful menu in AMP pages. Thank you very much @jamesosborne, very kind.

@juangose Nice work with your styling, it looks great.

Feel free to leave the plugin a review now that you’re viewers can navigate your side in reader mode.