Make a Tabbed Navigation With Child Pages in WordPress

On this tutorial, we’ll learn to convert WordPress baby pages into shareable navigation tabs. Nevertheless, not like widespread tabs the place guests stay on the identical web page upon clicking them and simply the related panel seems, ours will behave like menu hyperlinks and pressure the web page to reload.

Tabs are a well-liked method of organizing and categorizing teams of content material. For instance, on the Airbnb website, tabs behave like filters that permit guests to pick houses grouped below a selected tag like Wonderful views, Beachfront, and so forth.

The Airbnb tab filtersThe Airbnb tab filtersThe Airbnb tab filters

Up to now, I’ve proven you methods to construct a customized JavaScript-based responsive tab component. As well as, some years in the past, I went via the method of customizing Bootstrap tabs by giving each tab an identifiable URL, making their content material extra navigable and shareable.

Right this moment, I’ll present you methods to simulate this performance in WordPress with baby pages. 

Every tab will signify a baby web page with a panel of the web page’s content material. This habits is right when your design requires a tabbed interface, but for search engine optimisation functions, you want clear shareable URLs. One other situation arises when every tab panel accommodates complicated content material and never just a few textual content, and also you wish to keep away from having all of the content material on one web page—one thing that may sluggish the admin web page.

Right here’s an introductory video that showcases the anticipated habits:


Our WordPress Tabbed Interface

Contemplate the next hierarchical construction the place now we have one guardian web page and 4 baby ones:

The child pagesThe child pagesThe child pages

Every baby web page could have a structure like this:

The desktop layoutThe desktop layoutThe desktop layout

Relating to the web page parts:

  • On the prime, there can be breadcrumbs the place solely the primary degree (residence web page) can be clickable.
  • Then, we’ll have the tabs that may signify the kid pages. The present web page would be the lively tab.
  • Beneath the tabs, we’ll have the tab panel that may present the content material of the present web page.

Relying on the tabs now we have, we want to consider the tabbed interface on cell screens. A fast answer is to indicate a vertical scrollbar if the tabs’ width is bigger than the system’s width. 

The mobile layoutThe mobile layoutThe mobile layout

All baby pages will share the identical customized web page template.

Our custom tabs templateOur custom tabs templateOur custom tabs template

Implementation

For the implementation half, I’ll work with my common customized Playground theme. I’ll use the information from a previous tutorial and solely replace two issues—these are those that curiosity you if you happen to plan to embed this method in your tasks:

  • First and most significantly, I’ll add the customized tabs.php file—the web page template of all baby pages and
  • secondly, I’ll replace the fashion.css file with the tab types.
Theme filesTheme filesTheme files

In your comfort, as common, all of the theme belongings can be out there on a GitHub repo.

Contained in the customized template, we’ll do the next: 

  1. Create the breadcrumbs that can be three ranges deep. The primary degree, which can be clickable, will hyperlink to the house web page. The second will present the title of the guardian web page (“Firm” in my case). It gained’t be clickable as we gained’t have any structure for the guardian web page. The third one will present the title of the present web page.
  2. Seize the kid pages of the guardian of the present web page. You possibly can at all times customise the order of your pages through the use of the sort_column key contained in the arguments array of the get_pages() operate. Default sorting is through their publish title in ascending order which works in our instance.
  3. Loop via them and generate the tabs. To find out the lively tab, nonetheless contained in the loop, we’ll examine the URL of the present web page with the URL of the looped factor. In the event that they match, we’ll denote the lively tab utilizing the lively class.
  4. Print the present web page’s content material that may behave because the lively tab panel.

The output markupThe output markupThe output markup

Right here’s the required PHP code:

1
<?php
2
/* Template Title: Tabs Web page */
3
get_header();
4

5
$parent_id    = wp_get_post_parent_id();
6
$parent_title = get_the_title( $parent_id );
7
$child_pages  = get_pages(
8
    array(
9
		'guardian' => $parent_id,
10
	)
11
);
12
?>
13

14
<primary class="site-main">
15
	<?php
16
	if ( have_posts() ) :
17
		whereas ( have_posts() ) :
18
			the_post();
19
			?>
20
			<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
21
				<part class="section-with-tabs">
22
					<div class="container container-sm">
23
						<?php
24
						if ( ! empty( $child_pages ) ) :
25
							/*BREADCRUMBS*/
26
							?>
27
							<ul class="breadcrumbs">
28
								<li class="breadcrumb">
29
									<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
30
										<?php esc_html_e( 'Dwelling', 'playground' ); ?>
31
									</a>
32
								</li>
33
								<li class="breadcrumb">
34
									<?php echo esc_html( $parent_title ); ?>
35
								</li>
36
								<li class="breadcrumb">
37
									<?php the_title(); ?>
38
								</li>
39
							</ul>
40

41
							<?php /*TABS*/ ?>
42
							<div class="tabs-wrapper">
43
								<ul class="tabs">
44
									<?php
45
									foreach ( $child_pages as $key => $child_page ) :
46
										$child_page_id   = $child_page->ID;
47
										$child_page_link = get_page_link( $child_page_id );
48
										$lively          = get_permalink() === $child_page_link ? ' lively' : '';
49
										?>
50
										<li class="tab<?php echo $lively; ?>">
51
											<a class="tab-link" href="<?php echo esc_url( $child_page_link ); ?>">
52
												<?php echo esc_html( $child_page->post_title ); ?>
53
											</a>
54
										</li>
55
									<?php endforeach; ?>
56
								</ul>
57
							</div>
58
						<?php endif; ?>
59
					</div>
60
				</part>
61

62
				<?php /*TAB CONTENT*/ ?>
63
				<part class="section-with-content">
64
					<div class="container container-sm">
65
						<?php the_content(); ?>
66
					</div>
67
				</part>
68
			</article>
69
			<?php
70
		endwhile;
71
	endif;
72
	?>
73
</primary>
74

75
<?php
76
get_footer();

And the related types:

1
/*CUSTOM VARIABLES HERE*/
2

3
.section-with-tabs .breadcrumbs {
4
    padding: 0;
5
    margin: 0 0 20px;
6
    list-style: none;
7
    show: flex;
8
    hole: 20px;
9
    font-size: 14px;
10
    shade: var(--darkgray);
11
}
12

13
.section-with-tabs .breadcrumbs .breadcrumb {
14
    place: relative;
15
}
16

17
.section-with-tabs .breadcrumbs .breadcrumb:not(:first-child)::earlier than {
18
    content material: "/";
19
    place: absolute;
20
    prime: 50%;
21
    left: -13px;
22
    rework: translateY(-50%);
23
}
24

25
.section-with-tabs .tabs-wrapper {
26
    white-space: nowrap;
27
    padding-bottom: 10px;
28
    overflow-x: auto;
29
}
30

31
.section-with-tabs .tabs-wrapper::-webkit-scrollbar {
32
    top: 8px;
33
}
34

35
.section-with-tabs .tabs-wrapper::-webkit-scrollbar-thumb,
36
.section-with-tabs .tabs-wrapper::-webkit-scrollbar-track {
37
    border-radius: 6px;
38
}
39

40
.section-with-tabs .tabs-wrapper::-webkit-scrollbar-thumb {
41
    background: var(--darkpink);
42
}
43

44
.section-with-tabs .tabs-wrapper::-webkit-scrollbar-track {
45
    background: var(--lightgray);
46
}
47

48
.section-with-tabs .tabs {
49
    padding: 0;
50
    margin: 0;
51
    list-style: none;
52
    show: flex;
53
}
54

55
.section-with-tabs .tabs .tab {
56
    flex-grow: 1;
57
}
58

59
.section-with-tabs .tabs .tab-link {
60
    show: block;
61
    text-decoration: none;
62
    font-weight: daring;
63
    font-size: 18px;
64
    padding: 5px;
65
    shade: var(--darkgray);
66
    min-width: 120px;
67
    border-bottom: 2px strong var(--lightgray);
68
    transition: all 0.2s;
69
}
70

71
.section-with-tabs .tabs .tab.lively .tab-link,
72
.section-with-tabs .tabs .tab .tab-link:hover {
73
    shade: var(--darkpink);
74
    border-color: var(--darkpink);
75
}
76

77
.section-with-content {
78
    text-align: left;
79
    margin-top: 60px;
80
}

Conclusion

Right here’s a last screenshot of what you’ve constructed!

final tabbed interfacefinal tabbed interfacefinal tabbed interface

Throughout this tutorial, we discovered methods to rework WordPress baby pages into navigation tabs. This system works nice if you happen to plan to have a tabbed navigation with clear, shareable URLs.

In an upcoming tutorial, I’ll present you methods to navigate between baby pages with subsequent/earlier hyperlinks. Keep tuned! 

As at all times, thanks so much for studying!

Trending Merchandise
[product_category category=”trending” per_page=”8″ columns=”2″ orderby=”date” order=”desc”].

We will be happy to hear your thoughts

Leave a reply

MyStudioCafe
Logo
Compare items
  • Total (0)
Compare
0