Jump to content
#StayAtHome ×
Sign in to follow this  

Building Theme System and Implementation

Recommended Posts

I am starting a project that is way over my head.  As usual, I will be learning a lot as I go.  The short and skinny:  a website that allows users to select which theme they would like to use.  My file structure is like this:








//default theme





//theme 1





//theme 2





So, I think its pretty self explanatory.  I would like the URL's to always be:







But I want these files to change depending on the theme selected.  So, if the user selects "theme 1":


www.website.com/index.html -> will display content of -> www.website.com/theme/theme1/index.html

www.website.com/about.html -> will display content of -> www.website.com/theme/theme1/about.html

www.website.com/contact.html -> will display content of -> www.website.com/theme/theme1/contact.html


I have done a bunch of research, but all I seem to find are tutorials and articles about using the include(), include_once(), and require() functions.


Any pointers to some better content?  Is there a shortcut that can be taken?  Something akin to .htaccess rewrite?


Share this post

Link to post
Share on other sites

What exactly changes between themes that you need to re-write all the content every time?  Normally I would do something like:
















Have a theme stored in the DB against a user login and then load in the relevant css based on that, or clearWhite.css as a default if no DB results are returned for a theme. Here's some brutally over-simplified example code:



//inex.php ---->
  (!empty($user->theme)) ? $userTheme = $user->theme : $userTheme = 'clearWhite.css'
  $themeLink = '/css/theme/'.$userTheme
$themeLink = '/css/theme/clearWhite.css';
$header = <<<HTML_CUST_HEAD
<link type="text/css" rel="stylesheet" href="/css/primary.css />
<link type="text/css" rel="stylesheet" href="{$themeLink} />
<script src="/libs/js/jquery-min.js"></script>
<script src="/script/js/myCustom.js"></script>
... rest of head data
echo $header


You shouldn't need multiple copies of all the pages for all the themes.

Share this post

Link to post
Share on other sites

Literally duplicating every single HTML file for every single theme is the worst approach you can possibly take. Whenever the content changes, you'll be busy wading through all of your themes and adjusting them. Writing a new theme is also a pain in the ass, because the files are cluttered with text and images and other content that has nothing to do with a theme.


Have you considered solving your problem with PHP? I'm talking about a dynamic website where the content is stored in a database and then inserted into HTML templates.


An even better approach is to combine PHP with a modern template engine like Twig. This gives you advanced features like template inheritance: Instead of writing every about page, contact page etc. from scratch, you can define a base template which already contains a default page structure. Within each theme, you only need to override the parts which are actually different. This again avoids duplication and makes the themes very compact.


I recommend you look into existing projects and see how they do it (content management systems, blogs, forums, ...). The concept of themes isn't exactly new in web programming.

Share this post

Link to post
Share on other sites

Maybe I am not understanding your suggestions (thanks by the way!), but the themes that I am thinking of are drastically different so I am not sure I can adopt your suggestions.


These themes do have a core style.css file, but each and every theme has completely different content formatting for each page, so calling up different .css files won't do the whole trick.


I've implemented a temporary work-around, that I am confident I will be frowned upon by one and all:


www.website.com/index.html  ->  all content = include('theme/' . $themedirectory . '/index.html')

www.website.com/about.html  ->  all content = include('theme/' . $themedirectory . '/about.html')

www.website.com/contact.html  ->  all content = include('theme/' . $themedirectory . '/contact.html')

Share this post

Link to post
Share on other sites

Does the actual content change between themes? Does one theme get different about us info than another? does one theme get a different contact us form?  If not then you only need to change the css, at most the css and a javascript file if you are using js to create some of the UI elements. If you have designed your pages properly then there is no need to use multiple copies of the html as all that should be in that is the core data.

Share this post

Link to post
Share on other sites

It's perfectly fine to use different HTML structures for different themes. A theme engine which can only swap CSS/JavaScript files is actually very limited and will require hacks as soon as the layouts become more complex.


But then you still don't copy-and-paste hand-written HTML files. A theme is a graphical representation of a particular content. When you have to create 100 themes, it would be insane to duplicate the entire content 100 times. What you do instead is create the content once and then insert it into theme-specific templates.


Anyway, I'm starting to think this is hopeless ...

Share this post

Link to post
Share on other sites



Anyway, I'm starting to think this is hopeless ...

That's what I love about you @Jacques1 - your such a ray of sunshine!  :lol:


I haven't hit an issue where I need to hack a theme yet, but I will admit a huge lack of experience in this so... could you explain why it's limited to do this?

Share this post

Link to post
Share on other sites

Maybe I am not understanding your suggestions (thanks by the way!), but the themes that I am thinking of are drastically different so I am not sure I can adopt your suggestions.

You might be surprised what can be done with just CSS to alter the look and feel of a page. However even if you need more than just CSS changes you can use alternative an HTML structure.


The way you create a theme is you create different template files with whatever base HTML you need. Within that HTML you put various placeholder values that you can replace with the actual content of the page later.


For example, take a look at the Twig template engine. You'd define your template as something like this:




<!doctype html>
 <head><title>Theme 1</title></head>
   {% block content '' %}
You'd create as many of these theme templates as you need, each with a content block which will be replaced later. You can create multiple blocks if necessary, just give each one a unique name.


Then all your content files extend the desired theme template. For example:



{% extends 'theme1.html.twig' %}
{% block content %}
 <p>This is your page content.  All about us.</p>
{% endblock %}
Once you have all that working for one theme, you can change the extends tag to use a variable instead of a static file name and have PHP populate that variable with the theme template filename you wish to use.


Be sure to go over all the Twig documentation to learn how to set it up and use it. Search for a few tutorials if need be also.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.