Create theme in 8 easy steps

robiso edited this page Feb 28, 2018 · 9 revisions

A list of all theme tags can be found here.

Theme rules

  • 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 needs at least two files
    • 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 -> has to be in its own css folder
  • optional functions.php file

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

<!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>

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
  • <link rel="stylesheet" href="<?=wCMS::asset('css/style.css')?>"> includes your style.css
  • <?=wCMS::css()?> includes the admin settings panel CSS

2. Right after starting <body>

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

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>)

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. Extra 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, but if your login URL is set to default (loginURL) - which is not recommended.

8. Additional scripts before closing the </body>

	<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!

Don't forget to create style.css as mentioned in step 3 under Theme rules.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.