Repository

https://github.com/ampirecity/AMPWPBasics2

What Will I Learn?

Setting up back to home navigation logo on Header via AMP-Img;

Setting up AMP Menu via AMP-Sidebar;

Adding breadcrumbs to a custom AMP Wordpress theme.

Requirements:

• A prepared WordPress version for AMP development on your preferred server;

• AMP for Wordpress plugin;

• Basic CSS & HTML knowledge;

• Basic PHP knowledge.

Difficulty:

Beginner

Useful links:

Prepared Wordpress AMP version:https://github.com/ampirecity/AMPWPBasics1

Part 1: Setting up Wordpress for a custom AMP theme:https://medium.com/@ctdots/amp-wordpress-basics-1-setting-up-wordpress-for-a-custom-theme-992ad8261fd6?source=friends_link&sk=b94f7acc354903361a1e1d288d2bd4a5

AMProject: https://www.ampproject.org/docs/reference/components/amp-sidebar

AMPbyExample: https://ampbyexample.com/components/amp-sidebar/

Pro tip: Start developing a webpage with navigation

There are many ways to start developing a website, and some are easier than others. Most of the projects in my professional career were designing rather than implementing, therefore I’ve worked with many different developers and seen many different approaches. The main mistake I’ve seen is the development of the webpage page by page, which results in a lot of mess in CSS.

What I prefer is LOW to HIGH fidelity development, or to make it more precise, from abstract/universal to specific parts of the website. For such a development technique, setting up the navigation first, had proven to be very handy. In this tutorial, we will learn how to implement that, let’s start with the simplest.

Setting up home navigation logo on header

This part is particulary simple, just wrap website‘s logotype with HTML <a> tag directing to your homepage url inside your header. The php code to generate home url is:

="<?php echo esc_url( home_url( '/' ) ); ?

Don‘t forget that in AMP website, amp-img tag is required instead of imgone. Everything combined, a home button on logotype can be achieved with a simple code like this: