agent1866/wondercms
1
0
Fork 0
mirror of https://github.com/WonderCMS/wondercms.git synced 2026-08-25 10:51:22 +00:00
Code Issues Projects Releases Packages Wiki Activity
Page: Create theme in 8 easy steps
Pages
5 file structure 500 internal server error Add SRI tags to your theme libraries Add favicon Additional security configuration(s) All security features described Allowed extensions file types for uploads Always redirect to https and www Apache2 configuration 404 page errors on Ubuntu LAMP Backup all files Better security mode (HTTPS and other features) Caddy web server config Change default login URL Change default password Create a plugin Create custom page template Create new editable areas or editable blocks Create theme in 8 easy steps Custom modules Custom repositories Default database.js Demo Download Edit 404 page Example of database.js Get data from database Hide page from menu Home IIS server config Included libraries List of all functions List of common errors List of hooks Login URL doesn't work 404 Login NGINX server config One click update One step install Optional: functions.php file Other errors PHP built in server Persistent "New WonderCMS update available" message Recover login URL Requirements Reset password Restore backup Set data to database Theme tags Translations URLs mailformed on Windows IIS Update theme to work with WonderCMS 2.0.0 Update theme to work with WonderCMS 3.0.0 Update [Self attack vulnerabilities] possibilities list
22 Create theme in 8 easy steps
Robert Isoski edited this page 2022-07-25 15:47:24 +02:00
Table of Contents

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.

Intro

Basic how to's

Themes

Plugins

Security

Features description

List of common errors

Still need help?