Beautify the website’s top page link button: use the get_pages() method

If you followed my previous tutorial, you will now have a theme (or subtheme) on your site that contains links to the top-level pages in the header of your site.

I created a 26 child theme and this is what my links look like now:

In this tutorial, I'm going to show you how to add some CSS to your theme to make those links a little better. Let's start by removing bullets and adding floats.

Remove bullets and add floats

Open the theme's style sheet. If you created a child theme it will be empty, but if you are using your own theme I recommend adding this style in the section of your stylesheet that holds the header style.

Code review of output page link (if there is a page to be linked):

<ul class="top-level-page-links">

<?php // using a foreach loop, output the title and permalink for each page
foreach ( $pages as $page ) { ?>

    <li class="page-link">
	
		<a href="<?php echo get_page_link( $page->ID ); ?>">
			<?php echo $page->post_title; ?>
		</a>
	
	</li>

<? } ?>

</ul>

This means we are targeting a ul element with class top-level-page-links and within it a li element where # The ##page-link class is followed by the a element (that is, the link).

First, let's remove the bullet. Add this:

ul.top-level-page-links  {
    list-style: none;
}

Next, let's remove the padding on each list item and add a

margin-left statement:

ul.top-level-page-links  {
    list-style-type: none;
	margin-left: 0;
}

Now refresh the screen and you will see that the list style is gone:

Next let these links float next to each other. Add this to your stylesheet:

.page-link {
    float: left;
}

Now your links will be next to each other:

Next, let’s move on to making the link look more like a button.

Add margins, padding and background

To make our link look like a button, we will add margins, padding, and a background to the link.

Add this to your stylesheet:

.page-link a {
    margin-right: 10px;
	padding: 0.5em 10px;
	background-color: #454545;
}

Please note that I only used margin on the right side because I wanted the left button to align with the left side of the page.

When you refresh the screen, your buttons will look more like buttons:

They look much better, but require a little skill. Let's edit the color of the text and background so that when someone hovers over the button, it changes color.

Add hover effect

Now let's make these buttons more attractive.

Add two more declaration blocks to the stylesheet, making sure to add them after the declaration block of the link you just added:

.page-link a:link,
.page-link a:visited {
    color: #fff;
	text-decoration: none;
}
.page-link a:hover,
.page-link a:active {
	background-color: #dddddd;
	color: #454545;
	text-decoration: none;
}

This changes the color of the link, removes the underline, and changes the color when someone hovers over the link or when the link is active.

Let’s see how it looks on the page:

When I hover over the link:

much better!

Summary

In this two-part tutorial, you learned how to create links to automatically generated top-level pages of your website, and then use CSS to style those links so that they look like buttons.

This gives you a nice, prominent way to get your visitors directly to these pages, which is useful if you want to ensure that a large number of visitors can access the top pages.

The above is the detailed content of Beautify the website’s top page link button: use the get_pages() method. For more information, please follow other related articles on the PHP Chinese website!