Skip to content

Create theme in 8 easy steps

Robert Isoski edited this page Jul 25, 2022 · 22 revisions

A list of all theme tags can be found here.

Theme guidelines

  • Every theme needs to have its own folder. For this example we'll create a theme folder called new-theme.
  • Your new-theme folder needs to be in the themes folder.
  • Your new-theme should include:
    • theme.php -> theme layout and a few simple tags that make WonderCMS work (explained below line by line)
    • style.css -> CSS styling for the theme -> must to be in its own css folder
    • wcms-modules.json file
  • optional functions.php file

How share theme

Theme quick start

1. Starting with a simple few tags between your <head> </head> in theme.php

<?php global $Wcms ?>

<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Encoding, browser compatibility, viewport -->
		<meta 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:site" content="@YourTwitterUsernameGoesHere" />
		<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') ?>">

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

	</head>

Explanation

  • <meta charset="UTF-8"> ensures proper character set
  • <meta http-equiv="X-UA-Compatible" content="IE=edge"> ensures proper mobile responsiveness
  • <meta name="viewport" content="width=device-width, initial-scale=1"> ensures proper mobile responsiveness
  • <?= $Wcms->get('config','siteTitle') ?> displays main website title
  • <?= $Wcms->page('title') ?> displays current page title
  • <?= $Wcms->page('description') ?> displays current page description
  • <?= $Wcms->page('keywords') ?> displays current 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"> includes minimized Bootstrap CSS with SRI tag
  • <?= $Wcms->css() ?> includes the admin settings panel CSS
  • <link rel="stylesheet" href=" <?= $Wcms->asset('css/style.css') ?> "> includes your style.css Other meta tags are used for improved Search Engine Optimization (SEO)

2. Right after starting <body>, insert the alerts and settings functions.

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

  • <?= $Wcms->settings() ?> displays the admin settings panel once you're logged in
  • <?= $Wcms->alerts() ?> displays messages such as updates, changing the default login URL and default password

3. Menu / navigation

	<?= $Wcms->menu() ?>
  • <?= $Wcms->menu()?> returns each menu item as list item <li><a href="//example.com/home">home</a></li>
  • WonderCMS automatically assigns id="active" to the current active page for easier styling (example <li><a href="//example.com/home" id="active">home</a></li>)

Link to homepage

	<a href="<?= $Wcms->url() ?>">
		<?= $Wcms->siteTitle() ?>
	</a>

<?= $Wcms->url() ?> returns your website url and <?= $Wcms->siteTitle() ?> returns the main website title.

4. Main website title

	<?= $Wcms->get('config','siteTitle') ?>
  • <?= $Wcms->get('config','siteTitle') ?> returns the main website title

5. Main editable area

	<?= $Wcms->page('content') ?>
  • <?= $Wcms->page('content') ?> returns the content for current page

6. Static editable area

	<?= $Wcms->block('subside') ?>
  • <?= $Wcms->block('subside') ?> returns the static content and is visible on all pages

7. Footer

	<?= $Wcms->footer() ?>
  • <?= $Wcms->footer() ?> returns the footer copyright notice as defined in your admin settings panel
  • <?= $Wcms->footer() ?> also returns your login link only if your login URL is set to default (loginURL) - which is not recommended.

8. Additional scripts before closing the </body>

  • Optional: additional scripts only necessary only if you need to use jQuery and Bootstrap.
	<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<?= $Wcms->js() ?>
</body>
</html>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> includes minimized jQuery
  • <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> bootstrap.js minimized, required for animations
  • <?=$Wcms->js()?> returns the admin JavaScript functionality which is required for saving content

Your first theme is ready!

Share theme

  • By using Custom modules, you can share, update and easily maintain your theme.
Clone this wiki locally