Welcome to day 4 where we finally dive into the page.php file, which governs the WordPress pages.

This is the default format for the page.php file:-

<?php get_header();

while(have_posts()) { 
the_post(); ?>

<p> Some constant HTML content of your page </p>

<h1> <?php the_title(); ?> </h2>
<p> <?php the_content(); ?></p>

<?php }
get_footer(); ?>

As usual, the get_header() and get_footer() function is there to get code from header.php and footer.php file resp.

Now, you notice that we keep the famous while loop in the page.php file.

So, we can initialize a particular page with the the_post() function.

And then as per our HTML design, we add the_title() and the_content(); functions to add the title and the content of the page at appropriate places.

Of course, you add your HTML code around these WordPress php functions.

As seen in the picture above, the title and content are dynamically created from your WordPress pages list. Rest all design is constant.

Now check this pic below:-

The title tag is showing only the path of the page.

So, to add a title tag we need to add the following code to the functions.php file:-

function university_features() {
    //add all sorts of default wp functions
    add_theme_support('title-tag');
}

add_action('after_setup_theme', 'university_features');

Here, we are calling on the after_setup_theme action to execute the add_theme_support function for executing the title-tag function after WordPress initializes the theme.

Now, the title tag is showing:-

We will be using the add_theme_support function to add more functions in the future.

Now look at this site_url() function below:-

Here, we usually call this function to get the root URL of your website. Something like xyz.com. And pass arguments to make the URL look like xyz.com/your-page. Then echo it to add it as a link.

Now if you are familiar with the concept of a parent-child page then breadcrumbs are usually present on the child page to go to the parent page as shown below:-

We need to make it dynamic so that the TITLE of the child and parent page on breadcrumbs updates automatically and breadcrumbs are not shown on the parent page.

So, check this code below:-

Some functions introduced:-

1) wp_get_post_parent_id(get_the_ID()) -> We are getting the ID of the parent post by first getting the ID of the current post using get_the_ID().

So, if there's no parent post, the return will be 0, and if statement will not run, hiding the breadcrumb HTML.

2) get_permalink($theParent) -> After storing the ID of the parent in $theParent we are using it to get the URL of the parent page using get_permalink() and then echo out as a URL.

3) Then in Back to <?php echo get_the_title($theParent); ?> we are getting the title of parent page using get_the_title() function.

That's what the gist of breadcrumbs is.

Echo or not to echo?

If you noticed by now that some functions have to be echoed out while others don't.

It's because some functions have the echo function built in.

So, functions like the_title() or the_content() have an echo function at the end to print the result.

But functions like get_permalink() or get_the_title() have return at the end, which only returns the value. Then you echo it.

As a rule of thumb, a function having the get keyword is returning value while the rest are echoing value.

Let's meet on day 5 now!