-
-
Notifications
You must be signed in to change notification settings - Fork 166
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.
- 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
- A few simple steps with the help of Custom modules.
<?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)
<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
<?= $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.
<?= $Wcms->get('config','siteTitle') ?>
<?= $Wcms->get('config','siteTitle') ?>
returns the main website title
<?= $Wcms->page('content') ?>
<?= $Wcms->page('content') ?>
returns the content for current page
<?= $Wcms->block('subside') ?>
<?= $Wcms->block('subside') ?>
returns the static content and is visible on all pages
<?= $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.
- 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
- By using Custom modules, you can share, update and easily maintain your theme.
Still need help?
- Ask a question or make a request in the community.
- Official website
Intro
- Home
- Demo
- Download
- One step install
- Requirements
- 5 file structure
- List of hooks
- Included libraries
- Create theme in 8 easy steps
- Create a plugin
- Custom modules
- Translations
- All security features described
Basic how to's
- Backup all files
- Change default login URL
- Change default password
- Create custom page template
- Create new editable areas or editable blocks
- Edit 404 page
- Get data from database
- Set data to database
- Hide page from menu
- Caddy web server config
- IIS server config
- NGINX server config
- Login
- Recover login URL
- Reset password
- Restore backup
- Update
- PHP built in server
Themes
- Create theme in 8 easy steps
- Add favicon
- Theme tags
- Update theme to work with WonderCMS 2.0.0
- Update theme to work with WonderCMS 3.0.0
- Share your themes with Custom modules
Plugins
- Quick intro on creating plugins and List of hooks
- Share your plugin with simply with Custom modules
Security
- All security features described
- Add SRI tags to your theme libraries
- Always redirect to https and www
- Additional security configuration(s)
- Add SRI tags to your theme libraries
- Better security mode (HTTPS and other features)
Features description
- One click update
- Optional: functions.php file
- Default database.js
- Allowed extensions file types for uploads
- Login URL doesn't work - 404
- 500 internal server error
- Persistent "New WonderCMS update available" message
- URLs mailformed on Windows IIS
- Other errors