Skip to content

Create theme in 8 easy steps

Jump to bottom
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_no="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_no="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_no="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity_no="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<?= $Wcms->js() ?>
</body>
</html>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity_no="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_no="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.

Still need help?

Intro

Basic how to's

Themes

Plugins

Security

Features description

List of common errors

Clone this wiki locally