WonderCMS 3.5.0 released

Post by **wiz** » Sun Mar 16, 2025 1:06 pm

Latest WonderCMS update brings a few new features and bugfixes.

- New docs: https://www.wondercms.com/docs/
- Search functionality and - Sky theme update with search styling
- Blog (keywords), fixing duplicate blog posts bug
- Contact form (reCaptcha and configurable fields in Settings)
- Summernote (supports inserting uploaded files)
- Login hook (banning IPs, 2FA)
- Navigation hook (adjustable menu output)
- Option of settings persistent modal
- Pages created and modified times
- Adjustable header tag
- Bug fixes

Full details with extra links can be found here: https://www.wondercms.com/news

Important: always backup before updating.

Post by **NorfolkGreg** » Fri Mar 21, 2025 11:59 am

7. New hook on renderPageNavMenuItem is now a hook and you can now overwrite the menu in your template - more details

Unfortunately, the "more details" are written in programmer's mumbo jumbo that I don't understand, but I am hoping that this new hook would allow me to implement the change I requested in my original Wish List post.

I was looking for "Improved sub-page handling". Can you provide some sample code that would change the example menu link from:

Code: Select all

<a class="nav-link" href="games/">Games</a>

to

Code: Select all

<button class="subPageBtn">Games</button>

You can see the current link on my site at https://gregchapman.uk It works well enough on a desk/laptop computer but on a phone, tapping the menu button doesn't open the drop-down menu but takes you direct to the linked page. It only works by holding the button, then clearing the context menu that appears, before you can tap on the appropriate sub-menu option. It's a general untidiness that I would like to overcome.

Post by **wiz** » Fri Mar 21, 2025 3:51 pm

Can you give this a go? It adds the button property to any page that has subpages.
Let me know if you were looking for something different.

You can replace your whole theme.php, this is your default theme I pulled from the WonderCMS themes in Settings and edited it.

Code: Select all

<?php global $Wcms; ?>

<?php
// Add the listener and function
$Wcms->addListener('renderPageNavMenuItem', 'modifyNavMenuItem');

function modifyNavMenuItem(array $args): array
{
    [$html, $item, $parentSlug, $hasSubpages] = $args;

    // Check if the item has subpages
    if ($hasSubpages) {
        // Replace the entire <a> tag with a <button> tag
        $html = preg_replace(
            '/<a class="nav-link" href="[^"]+">([^<]+)<\/a>/',
            '<button class="subPageBtn">$1</button>',
            $html
        );
    }

    return [$html];
}
?>

<!DOCTYPE html>
<html lang="<?= $Wcms->getSiteLanguage() ?>">
<head>
	<!-- Encoding, browser compatibility, viewport -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<!-- Search Engine Optimization (SEO) -->
	<meta name="title" content="<?= $Wcms->get('config', 'siteTitle') ?> - <?= $Wcms->page('title') ?>" >
	<meta name="description" content="<?= $Wcms->page('description') ?>">
	<meta name="keywords" content="<?= $Wcms->page('keywords') ?>">
	<meta property="og:url" content="<?= $this->url() ?>" >
	<meta property="og:type" content="website" >
	<meta property="og:site_name" content="<?= $Wcms->get('config', 'siteTitle') ?>" >
	<link href="https://fonts.googleapis.com/css?family=Boogaloo|McLaren" rel="stylesheet">
	<meta property="og:title" content="<?= $Wcms->page('title') ?>" >

	<!-- Website and page title -->
	<title>
		<?= $Wcms->get('config', 'siteTitle') ?> - <?= $Wcms->page('title') ?>
	</title>

	<!-- Admin CSS -->
	<?= $Wcms->css() ?>
	<!-- Theme CSS -->
	<link rel="stylesheet" rel="preload" as="style" href="<?= $Wcms->asset('css/style.css') ?>">
</head>

<body>
	<div id="wrapper">

	<!-- Admin settings panel and alerts -->
	<?= $Wcms->settings() ?>
	<?= $Wcms->alerts() ?>

	<header>
		<h1>
			<em><?= $Wcms->get('config', 'siteTitle') ?></em><br>
			<?= $Wcms->page('title') ?>
		</h1>
		<h2><?= $Wcms->page('description') ?></h2>
	</header>

	<section id="topMenu">
		<div class="inner">
			<!-- Hamburger icon -->
			<input id="menuControl" type="checkbox">
			<label for="menuControl"></label>
			<nav>
				<ul class="menu">
					<!-- Menu -->
					<?= $Wcms->menu() ?>
				</ul>
			</nav>
		</div>
	</section>

	<section class="main">
		<?= $Wcms->page('content') ?>
	</section>

	<footer>
		<?= $Wcms->footer() ?>
	</footer>
	</div>

	<!-- Admin JavaScript. More JS libraries can be added below -->
	<?= $Wcms->js() ?>
	<script>
		function check() {
		document.getElementById("menuControl").checked = true;
		}
	</script>

</body>
</html>

Post by **NorfolkGreg** » Fri Mar 21, 2025 5:37 pm

That's getting there! The top level item is a button, (which I still have to style) but it changes the sub-menu options to buttons as well. Obviously, they need to be retained as links (when they will retain their existing link styling):

: screenshot-429.png (20.54 KiB) Viewed 72417 times

Post by **wiz** » Fri Mar 21, 2025 9:02 pm

This should make only the parent menu become a button, and it's children regular menu items.
This is the whole theme.php, which can be replaced.

Code: Select all

<?php
global $Wcms;

// Add the listener and function
$Wcms->addListener('renderPageNavMenuItem', 'modifyNavMenuItem');

// Helper function to check if an item has subpages
function hasSubpages($menuItem) {
    return property_exists($menuItem, 'subpages') && !empty((array)$menuItem->subpages);
}

function modifyNavMenuItem(array $args): array
{
    [$html, $item, $parentSlug] = $args;

    // Check if this item has subpages
    $hasSubpages = hasSubpages($item);

    // Trim parent slug for consistency
    $trimmedParentSlug = trim($parentSlug, '/');

    // Check if this is a top-level item with subpages
    $isTopLevel = empty($trimmedParentSlug) || $trimmedParentSlug === $item->slug;

    if ($hasSubpages && $isTopLevel) {
        // Replace only the top-level <a> with <button>, preserving subpage structure
        $html = preg_replace_callback(
            '/(<li\s+class="nav-item\s*[^"]*">\s*)<a\s+class="nav-link"\s+href="([^"]+)">(.*?)<\/a>/i',
            function($matches) {
                return $matches[1] . '<button class="subPageBtn" onclick="window.location.href=\'' . $matches[2] . '\'">' . $matches[3] . '</button>';
            },
            $html,
            1 // Limit to 1 replacement to avoid subpage matches
        );
    }

    return [$html, $item, $parentSlug];
}
?>

<!DOCTYPE html>
<html lang="<?= $Wcms->getSiteLanguage() ?>">
<head>
	<!-- Encoding, browser compatibility, viewport -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<!-- Search Engine Optimization (SEO) -->
	<meta name="title" content="<?= $Wcms->get('config', 'siteTitle') ?> - <?= $Wcms->page('title') ?>" >
	<meta name="description" content="<?= $Wcms->page('description') ?>">
	<meta name="keywords" content="<?= $Wcms->page('keywords') ?>">
	<meta property="og:url" content="<?= $this->url() ?>" >
	<meta property="og:type" content="website" >
	<meta property="og:site_name" content="<?= $Wcms->get('config', 'siteTitle') ?>" >
	<link href="https://fonts.googleapis.com/css?family=Boogaloo|McLaren" rel="stylesheet">
	<meta property="og:title" content="<?= $Wcms->page('title') ?>" >

	<!-- Website and page title -->
	<title>
		<?= $Wcms->get('config', 'siteTitle') ?> - <?= $Wcms->page('title') ?>
	</title>

	<!-- Admin CSS -->
	<?= $Wcms->css() ?>
	<!-- Theme CSS -->
	<link rel="stylesheet" rel="preload" as="style" href="<?= $Wcms->asset('css/style.css') ?>">
</head>

<body onload="check()">
	<div id="wrapper">

	<!-- Admin settings panel and alerts -->
	<?= $Wcms->settings() ?>
	<?= $Wcms->alerts() ?>

	<header>
		<h1>
			<em><?= $Wcms->get('config', 'siteTitle') ?></em><br>
			<?= $Wcms->page('title') ?>
		</h1>
		<h2><?= $Wcms->page('description') ?></h2>
	</header>

	<section id="topMenu">
		<div class="inner">
			<!-- Hamburger icon -->
			<input id="menuControl" type="checkbox">
			<label for="menuControl"></label>
			<nav>
				<ul class="menu">
					<!-- Menu -->
					<?= $Wcms->menu() ?>
				</ul>
			</nav>
		</div>
	</section>

	<section class="main">
		<?= $Wcms->page('content') ?>
	</section>

	<footer>
		<?= $Wcms->footer() ?>
	</footer>
	</div>

	<!-- Admin JavaScript. More JS libraries can be added below -->
	<?= $Wcms->js() ?>
	<script>
		function check() {
		document.getElementById("menuControl").checked = true;
		}
	</script>

</body>
</html>

Post by **NorfolkGreg** » Fri Mar 21, 2025 9:15 pm

Thanks for the speedy update.
I hope to check it out tomorrow.

Post by **wiz** » Fri Mar 21, 2025 9:17 pm

No problem, here is also the styling you can add to the bottom of your CSS.
It seems to be matching the other menu items pretty good now.

: Screenshot 2025-03-21 at 22.17.36.png (27.17 KiB) Viewed 72380 times

Code: Select all

/* =========== Button Styling =========== */
button.subPageBtn {
    display: block;
    line-height: 30px; /* Match the line height of menu items */
    text-decoration: none; /* Remove underline */
    padding: 0 25px; /* Match the padding of menu items */
    color: var(--menutext); /* Use the same text color as menu items */
    background-color: var(--menubkgnd); /* Use the same background color as menu items */
    border: none; /* Remove default button border */
    cursor: pointer; /* Show pointer cursor on hover */
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; /* Match the font family */
    font-weight: bold; /* Match the font weight */
    text-align: left; /* Align text to the left */
    width: 100%; /* Ensure the button takes up the full width */
    font-size: 1em; /* Match the font size of menu items */
}

/* Hover effect for buttons */
button.subPageBtn:hover {
    background-color: var(--menubghvr); /* Use the same hover background color as menu items */
    color: var(--menutxthvr); /* Use the same hover text color as menu items */
}

/* Submenu dropdown arrow for buttons */
button.subPageBtn:after {
    content: ' \25BC'; /* Add dropdown arrow */
    font-weight: bold; /* Match the font weight */
}

/* Remove dropdown arrow if the button has no subpages */
button.subPageBtn:only-child:after {
    content: '';
}

/* Ensure buttons in submenus have the same styling as submenu links */
.subPageDropdown button.subPageBtn {
    padding-left: 25px; /* Match the padding of submenu links */
    color: var(--menutext); /* Use the same text color as submenu links */
    background-color: var(--menubkgnd); /* Use the same background color as submenu links */
    font-size: 1em; /* Match the font size of submenu links */
}

/* Hover effect for buttons in submenus */
.subPageDropdown button.subPageBtn:hover {
    background-color: var(--menubghvr); /* Use the same hover background color as submenu links */
    color: var(--menutxthvr); /* Use the same hover text color as submenu links */
}

Post by **NorfolkGreg** » Sat Mar 22, 2025 12:17 am

Oops!
I've just swapped in the second version of your file and get something a little different. If anything this is a backward step on your first version. All that happens is that three of the menu options turn into buttons but they all function exactly as the original. "WonderCMS" and "More..." still open links and hovering over "Games" still opens a link while also opening the drop-down. I see that's because you've added some JavaScript to the code.

: screenshot-430.png (25.33 KiB) Viewed 72359 times

My aim is to get rid of all JavaScript. I discovered years ago from the many "CSS Only" menu systems found at:
https://www.cssplay.co.uk/menus/index.html
that, with appropriate HTML and CSS code, JavaScript is unnecessary for even complex multi-level menu systems. (That's why I have never needed to learn JavaScript!)

What I was hoping to get with the new 3.5.0 feature was any menu option with sub-pages would cease being a link to a page and instead be coded as a <button>, <p> or almost anything (leaving the page inacessable). I would then add code to the stylesheet that would make hovering over, or tapping on, the button/paragraph open the drop-down to access the sub-page menu options.

Because, with WonderCMS, I was forced to use a menu system that inserts links for every option I opted to use the the menu system found at:
https://www.w3schools.com/howto/howto_j ... opdown.asp
It does use one small snippet of JavaScript but, should users of GregCustom want to tweak things further, it has the advantage that the whole menu is fully documented at W3Schools in a style suitable for beginners.

My hope was that with the ability to change the HTML generated when a sub-page is available, I could get rid of the W3Schools menu and use a pure CSS menu system.

Post by **NorfolkGreg** » Sat Mar 22, 2025 11:03 am

I've just looked again at the standard navigation code generated for https://gregchapman.uk The list item I am concerned about is this:

Code: Select all

		<li class="nav-item subpage-nav">
			<a class="nav-link" href="https://gregchapman.uk/games/">Games</a>
			<ul class="subPageDropdown">
				<li class="nav-item ">
					<a class="nav-link" href="https://gregchapman.uk/games/board/">Board</a>
				</li>
				<li class="nav-item ">
					<a class="nav-link" href="https://gregchapman.uk/games/table/">Table</a>
				</li>
			</ul>
		</li>

It's just Line 2 that I'm looking to change to:

Code: Select all

<button class="nav-link">Games</button>

I can then use a CSS first-child selector to style the second (now <button>) line to appear like other menu items and open the child drop-down list <ul class="subPageDropdown"> on hover (on a desktop) or tap (on a phone).

I see your suggested code includes a reference to "top level" but I would want any list item of class "subpage-nav" to replace a link with button code, so sub-pages could cascade almost indefinitely.

Does that make sense?

Nightwanderer · Post by **Nightwanderer** » Tue Mar 25, 2025 5:10 pm

After installation, the menu of plugins and themes is empty.
When updating, it displays the message Cannot get content from url.

WonderCMS community

WonderCMS 3.5.0 released

WonderCMS 3.5.0 released

Re: WonderCMS 3.5.0 released

Re: WonderCMS 3.5.0 released

Re: WonderCMS 3.5.0 released

Re: WonderCMS 3.5.0 released

Re: WonderCMS 3.5.0 released

Re: WonderCMS 3.5.0 released

Re: WonderCMS 3.5.0 released

Re: WonderCMS 3.5.0 released

Re: WonderCMS 3.5.0 released