How to code theme files for ePowerPress
Coding themes for ePowerPress is easy and quick. Most of the work is done by stylesheet, and not the HTML files themselves. All you need is one single HTML file with certain tags and you are done!
Note, if you develop a theme for PowerPress, then let me know and I can officially link from this website to yours where ePowerPress users can download your themes! Simply start a new topic, and use the tag #PowerPressThemes
Structure of ePowerPress themes
ePowerPress uses its core to process data, and uses a separate HTML layer for display, unlike wordpress where content and PHP code is mixed together. To code a wordpress theme, you must know at least some PHP, but this is not the case with ePowerPress. You can code a neat and sleek ePowerPress theme with plain HTML and CSS!
Easiest way to setup a ePowerPress theme is to make a copy of the 2 column theme provided in your default THEMES folder, and now edit the stylesheet of this new copy you just made. You can do this in your favourite text editor like notepad, notepad++ or any other text editor you use for HTML coding.
ePowerPress tags you need for content display
Wherever these tags will appear in your ".HTM" file, that is where the appropriate content will be displayed.
Please note, all these tags go inside a [] (square brackets).
| Tag Name | Content it displays |
| PT | Page Title, displays title of your webpage. |
| META | Meta Description |
| META_KEY | Meta Keywords |
| LOGO | Logo of the website as specified in admin panel. |
| banner | Horizontal menu bar links |
| banner2 | Secondary horizontal menu bar links |
| CO | Main Content generated by the script |
| SIDE | Navigation menu, notifications, etc |
| FOOT | Footer links, terms of use etc. |
| BASE_URL | Homepage URL, as in c.conf.php |
| DOMAIN | Domain name as in c.conf.php |
| SHARE | Share buttons, facebook, twitter etc. |
| AD_TOP | An ad unit for adsense etc. |
| AD_BOTTOM | Another ad unit for adsense etc. |
| AD_MID | Another ad unit for adsense etc, displayed just below main blog post, just before comments. |
| side_pages | Links to landing pages linked from menu. A part of the side menu, can be used to display those links elsewhere also. |
| search_box | Display the search box. Also a part of the menu, but you can use this to display search box somewhere else in the theme. |
| member_notifications | Section which displays member notifications. Also a part of side menu |
| popular_posts | Section which displays links to popular posts made by admin. Also a part of side menu |
| trending | Links of tags that are trending or most used. Also a part of side menu |
Tags which are a part of side menu can be used to display only specific content in side menu instead of the entire side menu. For example, you can show only member notifications in side menu, and display the search box in the header of the theme. Alternatively, you can use these individual tags to change the order of the side menu. You can show notifications first, then the search box and so on.
Other than these, you can create your own tags by placing tag name in square brackets. Example, [This_is_my_tag], and then placing its value in the PHP variable "$rv", like this:
$rv['This_is_my_tag'] = "This is value for tag";
This is discussed further in developing plugins tutorial. You do not need plugins for a theme. They are used to extend core ePowerPress, add data to existing output, or even completely replace the entire output.
HTML structure of ePowerPress themes
There is no limitation of any kind on what you want to do in your ePowerPress theme file, except one.
The file must have a ".htm" extension.
That is all. Now simply upload the .htm file in your "THEMES" folder, and choose this new theme from your admin panel settings.
Make sure that you have above mentioned tags in the theme where you want the content to appear.
Sample Structure:
<html>
<head>
<title> [PT] </title>
<style type="text/css">
body{ background: #FFFFFF; }
</style>
</head>
<body>
<div id="content"> [CO] </div>
<div id="navigation"> [SIDE] </div>
</body>
</html>
Of course, this is a very basic structure, and you are free to modify it in any way you want. Its upto you and your website design skills!
Stylesheet coding for ePowerPress theme
All the content generated by the script is placed inside stylesheet blocks.
For example, the headings of the blog posts that you made are placed inside "class='title'". This can be a <h1 class="title"> or a <h2 class="title">, depending on where the title is appearing.
To change colors, fonts of these titles, all you need is a CSS block in your stylesheet file, like this:
.title{
color: #FF0000;
font-size: 15px;
}
.title a{
color: #FF0000;
font-size: 15px;
text-decoration: none;
}
And that does it!
You can change styles for any output generated by the script in similar way. Its all upto you and your website design skills!
View the source code of your ePowerPress iwebsite to see what stylesheet classes and ids are used for which sections. You can control any element and complete display!
I wish I could have made a huge multipage document for you to read, but this is all it takes to develop a ePowerPress theme...
I am sorry for keeping things this easy!!!
