Introduction

One of the goals of this blog is to create a so-called normal blog using the Twenty Twenty Five theme of WordPress.It will be responsive and have the same look and feel for PCs and smartphones, but we also want to add some smartphone-specific usability features.

Multilingual support is another goal, so we installed a bottom navigator at the bottom of the smartphone screen so that you can switch between languages.Also, since this blog is a vertically long page, we also installed a button to go back to the top of the page.

How to install the Bottom Navigator

I was thinking of using a plugin to handle this, but could not find a good one.My hope was to include an image in the bottom navigator section, but most of them were in the form of placing icons such as FontAweSome.

I tried to see if I could set up a bottom navigator with blocks in the Gutenberg editor, and I got something that looked reasonable.

The three from the left are made with a combination of blocks in the Gutenberg editor and fixed with CSS.The rightmost part, which returns to the top of the page, is made with jQuery + CSS.

Composition of each language switching section

The bottom navigator section was created as a pattern.The composition consists of a horizontal block in a group and four vertical blocks within the group.

The three in the upper row have the same configuration, with the round flags and letters arranged vertically.

The width of the vertically aligned block itself is set to fill so that the widths are equal when aligned.Then, links are set up on the round flags and letters to jump to the top page of each language.

Structure of the Return to Top section

For the part that returns to the top of the page, we used jQuery and CSS.The following page was used as a reference. (Japanese Blog)

First is the jQuery part: create the jQuery file to_page_top.js in the Twenty Twenty Five child theme directory.

// Back to top button
jQuery(function(){
		
	// Run when scrolled
	jQuery(window).scroll(function(){
		// Set the desired scroll volume(px)
		var targetPos = 300;

		// Get current scroll position
		var scrollPos = jQuery(window).scrollTop();
		// Determine if the current position has reached the scroll amount
		if( scrollPos >= targetPos ){
			// Button display
			jQuery("#toTop").fadeTo(200,1.0);
		}else{
			// Button translucent
			jQuery("#toTop").fadeTo(200,0.2);
		}
	});
	
	jQuery("#toTop").click(function(){
		// Speed of return to Top The more, the slower.
		jQuery("body,html").animate({
			scrollTop: 0
		}, 200);
		jQuery("#toTop").fadeTo(200,0.2);
		return false;
	});
});

The original method was to display the icon and make it disappear or appear when scrolling, but this time the icon is always displayed and the transparency is adjusted.

The next section is an addition to functions.php.

// Scroll Action to Page Top
if (!is_admin()) {
   function register_script(){
        wp_register_script( 'scroll-action', get_stylesheet_directory_uri() . '/to_page_top.js', array( 'jquery' ), '', true);
        }
    function add_script() {
        register_script();
        wp_enqueue_script('scroll-action');
        }
    add_action('wp_enqueue_scripts', 'add_script');
}

Correcting the name of the created file or directory location.

Next is CSS.Add it to style.css of the child theme.

/* 20250208 Move Button To PageTop */
#toTop {
	border-width: 0px;
    border: none;
	color: #516028;
    background-color: #dae7bd;
	opacity: 0.2;
	padding: 0;
    outline: none;
}
#toTop:focus {
    /* Remove the outer frame that is displayed when the button is pressed */
    outline: none;
}

If the button is left as is, a border will be displayed, so the border-width, border, and outline are adjusted.

Finally, the html, I used FontAweSome’s up arrow.

<button id="toTop">
<i class="fa-solid fa-circle-chevron-up" style="font-size: 32px;">
</i>
</button>

The CSS content is reflected by specifying id=”toTop” for the button.

Bottom Navigator is fixed at the bottom of the screen

For the highest group in the bottom navigator pattern, I added footer_navi_menu to the additional CSS class in the advanced settings and specified its placement on the CSS side.

/* 20250208 footer_navi_menu */
.footer_navi_menu {
	position: fixed;
	z-index: 5;
	left: 0;
	bottom: 0;
	width: 100%;
	display: block;
	border-collapse: collapse;
}
.footer_navi_menu div {
/*	display: block; When enabled, they are aligned vertically */
	gap:0;
	padding:0;
	margin: 0;
    border-collapse: collapse;
}
.footer_navi_menu_item {
	display:block;
	gap: 0;
    border-collapse: collapse;
}
/* 20250208 reCAPTCHA badge position adjustment  */
.grecaptcha-badge {
    bottom: 100px !important;
	z-index: 3;
}

If the z-index is not adjusted, other items will pass over the menu, so this time the z-index is set to 5.Also, the menu will overlap with the Google reCAPTCHA badge, so the position of the badge has been adjusted as well.

Other adjustments

Since we included language switching in the bottom navigator, we used the Block Visiblity plugin to hide the language switching at the top on the smartphone screen.

The global menu at the top will also be converted to a hamburger menu, so the same items at the bottom will also be hidden on smartphones.

Adjustments were made while clearing the cache of the LiteSpeed Cache plugin as appropriate.

I’d like to make a few more adjustments

Since we have a hamburger menu at the corner, we would like to keep the categories and archives there.

Musubi

I was going to summarize the Twenty Twenty Five theme settings, but I spent my free time today adjusting the smartphone screen.Still, I think I was able to make it look more like a “smartphone page” than the previous smartphone display.There are a few more adjustments I would like to make, but I will work on the rest little by little from tomorrow onward.

This is a bottom navigator created using only jQuery (JavaScript), CSS, and PHP, without using any plug-ins.It uses a pattern of block combinations, which I think is typical of the Twenty Twenty Five theme.

We hope to use this experience to reduce the number of plug-ins as much as possible.