Skip to content

Theme tags

Jump to bottom
Robert Isoski edited this page Jul 25, 2022 · 19 revisions

Necessary and vital tags for creating a basic theme (WonderCMS 3.0.0 and above)

  • <?php global $Wcms ?> - system class
  • <?= $Wcms->settings() ?> - returns the settings panel
  • <?= $Wcms->alerts() ?> - returns alerts and success/error messages
  • <?= $Wcms->page('content' ) ?> - returns current page content
  • <?= $Wcms->js() ?> - returns admin and plugin JavaScript files
  • <?= $Wcms->css() ?> - returns admin and plugin CSS files
  • <?= $Wcms->asset('css/style.css') ?> - returns CSS file to currently active theme
  • <?= $Wcms->footer() ?> - returns website footer
  • <?= $Wcms->get('config','siteTitle') ?> - returns website title
  • <?= $Wcms->getCurrentPageUrl() ?> - returns current page URL
  • <?= $Wcms->page('title') ?> - returns current page title
  • <?= $Wcms->page('description') ?> - returns current page description
  • <?= $Wcms->page('keywords') ?> - returns current page keywords
  • <?= $Wcms->url() ?> - returns homepage URL
  • <?= $Wcms->menu() ?> - returns each menu item as list item - example: <li><a href="//example.com/home">home</a></li>
  • <?= $Wcms->block('subside') ?> - returns editable block named subside from database

Example of a theme.php file with ALL tags above

<?php global $Wcms ?>

<!DOCTYPE html>
<html lang="en">
	<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">

		<!-- 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="<?= $Wcms->getCurrentPageUrl() ?>" />
		<meta property="og:type" content="website" />
		<meta property="og:site_name" content="<?= $Wcms->get('config', 'siteTitle') ?>" />
		<meta property="og:title" content="<?= $Wcms->page('title') ?>" />
		<meta name="twitter:title" content="<?= $Wcms->get('config', 'siteTitle') ?> - <?= $Wcms->page('title') ?>" />
		<meta name="twitter:description" content="<?= $Wcms->page('description') ?>" />

		<!-- 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>
		<!-- Admin settings panel and alerts -->
		<?= $Wcms->settings() ?>

		<?= $Wcms->alerts() ?>

		<section id="topMenu">
			<div class="inner">
				<nav>
					<ul class="menu">
						<!-- Menu -->
						<?= $Wcms->menu() ?>

					</ul>
				</nav>
			</div>
		</section>

		<div id="wrapper">
			<section id="intro" class="wrapper style1 fullscreen">
				<div class="inner">
					<!-- Main content for each page -->
					<?= $Wcms->page('content') ?>

				</div>
			</section>

			<section class="wrapper style2">
					<div class="inner">
						<!-- Static editable block, same on each page -->
						<?= $Wcms->block('subside') ?>

					</div>
			</section>
		</div>

		<footer class="wrapper style2">
			<div class="inner">
				<!-- Footer -->
				<?= $Wcms->footer() ?>

			</div>
		</footer>

		<!-- Admin JavaScript. More JS libraries can be added below -->
		<?= $Wcms->js() ?>

	</body>
</html>

WonderCMS v2.7.0 and below - necessary tags for creating a basic theme

  • <?=wCMS::settings()?> - returns the settings panel
  • <?=wCMS::alerts()?> - returns alerts and success/error messages
  • <?=wCMS::page('content')?> - returns current page content
  • <?=wCMS::js()?> - returns admin and plugin JavaScript files
  • <?=wCMS::css()?> - returns admin and plugin CSS files
  • <?=wCMS::asset('css/style.css')?> - returns CSS file to currently active theme
  • <?=wCMS::footer()?> - returns website footer
  • <?=wCMS::get('config','siteTitle')?> - returns website title
  • <?=wCMS::page('title')?> - returns current page title
  • <?=wCMS::page('description')?> - returns current page description
  • <?=wCMS::page('keywords')?> - returns current page keywords
  • <?=wCMS::url()?> - returns homepage URL
  • <?=wCMS::menu()?> - returns each menu item as list item - example: <li><a href="//example.com/home">home</a></li>
  • <?=wCMS::block('subside')?> - returns editable block named subside from database

3 necessary JavaScript libraries to make WonderCMS work seamlessly

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  • Description: Bootstrap CSS file
    • Location: between the <head></head> tags

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

  • Description: jQuery library file
    • Location: before ending the </body>tag

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  • Description: Bootstrap JavaScript library file
    • Location: before ending the </body>tag

Example of a theme.php file with ALL tags above

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title><?=wCMS::get('config','siteTitle')?> - <?=wCMS::page('title')?></title>
	<meta name="description" content="<?=wCMS::page('description')?>">
	<meta name="keywords" content="<?=wCMS::page('keywords')?>">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="<?=wCMS::asset('css/style.css')?>">
	<?=wCMS::css()?>

</head>
<body>
	<?=wCMS::alerts()?>
	<?=wCMS::settings()?>

	<nav class="navbar navbar-default">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-collapse">
					<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="<?=wCMS::url()?>">
					<?=wCMS::get('config','siteTitle')?>

				</a>
			</div>
			<div class="collapse navbar-collapse" id="menu-collapse">
				<ul class="nav navbar-nav navbar-right">
					<?=wCMS::menu()?>

				</ul>
			</div>
		</div>
	</nav>

	<div class="container">
		<div class="row">
			<div class="col-lg-12 text-center padding40">
				<?=wCMS::page('content')?>

			</div>
		</div>
	</div>

	<div class="container-fluid blueBackground whiteFont">
		<div class="row">
			<div class="col-lg-12 text-center padding40">
				<?=wCMS::block('subside')?>

			</div>
		</div>
	</div>

	<footer class="container-fluid">
		<div class="text-right padding20">
			<?=wCMS::footer()?>

		</div>
	</footer>

	<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script>
	<?=wCMS::js()?>
</body>
</html>

Still need help?

Intro

Basic how to's

Themes

Plugins

Security

Features description

List of common errors

Clone this wiki locally