Please note this article is specifically written using Graphene Theme. The concepts can be implemented on others themes with slight modifications.
Yes, WP is a very flexible CMS with wide range of third party extensions. Another reason for it’s flexibility is that the developers of WordPress CMS are pushing for multipurpose program. Within few years of launch, it went from a casual and easy to use blogging platform to a large scale web management system. To me it is a good thing for average user. Like I always believe, jack of all trades is better than mater of none.
Mix and match
When we have so many open source free software to choose from, why not use them all? Most of the time, it is better to use specific software for particular task than to use one for all. WordPress (WP) for blogging and small scale websites, Drupal for large scale websites with large user base, phpBB for forums, phpList for newsletters, etc are few specialized software out of many. If you are designer then you would have to theme each and every one of the independent system to match each other. This can be done in two ways; by creating themes or through skinning.
What is skinning?
Both skins and themes creates “holistic and integrated spatial organization” of materials in their own ways. Skinning is different from theming because what skin keep all the elements of one platform and embed into the looks and feels of another. It neither changes any theme files nor create a valid theme. Themes directly change the structure of the front end interface and they are limited to the conditions of the program. For example, if I want to create a phpBB theme (a well written one), I have to comply with the guidelines for phpBB. Skinning takes all those conformities out of the equation because it is just a “wrap around” for “eye candy”. Once a skin is extracted from one program and installed on another, it just apply the same/similar style across different platforms.
Graphene theme skin
I will guide you on how to skin a WP theme using Graphene for WordPress. Some parts of this site uses phpBB and phpList with this exact skin. First take a back up of all your files and data. I would take up a task like this at nadir hours. You don’t want to mess with any code when your website is full of visitors. If you are launching a new site, consider things like forums before hand.
Copying the code
Log in to your website and choose appropriate Column Option. It is better to choose an option with no side bars because the screen real estate is very important. You can do do this by two ways in the Graphene Theme. One is using the Graphene Options.
Log in –> Dashboard –> Appearance –> Graphene Options –> Display(tab)
This will make the entire website (each and every page) default to whatever you choose. Another way to do this is under each post/page, you should find an option to choose Column configurations specifically for the current post/page. I used the later since I don’t want the entire website to have no columns during the setup.
After you setup the page/post, visit the page and go to the source code from your browser. Copy the code from div id="container" to div id="content-main" class="clearfix grid_16". Do NOT copy the following code. It will break your site since this is specific to my site.
The following code is used as an example. DO NOT copy the code and paste to your system even if you are using this theme. I am NOT responsible for any issues arise out of editing the core files of phpBB and/or WordPress.
<div id="container">
<div class="bg-gradient">
<div id="container" class="container_16">
<div id="top-bar">
<!--Top Social Profiles bar-->
<div id="profiles" class="clearfix gutter-left">
<a href="https://G+_URL" title="Sanuja on Google+" id="social-id-1" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Sanuja on Google+" /></a>
<a href="http://FB_URL" title="Link sanuja.com on FB" id="social-id-2" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Link sanuja.com on FB" /></a>
<a href="LI_URL" title="Sanuja on LinkedIn" id="social-id-3" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Sanuja on LinkedIn" /></a>
<a href="TW_URL" title="Follow on Sanuja Twitter" id="social-id-4" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Follow on Sanuja Twitter" /></a>
<a href="http://FULL_FEED_URL" title="Subscribe to sanuja.com RSS feed" id="social-id-5" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Subscribe to sanuja.com RSS feed" /></a>
</div>
<!--Search form-->
<div id="top_search" class="grid_4">
<form id="searchform" class="searchform" method="get" action="http://MAIN_URL">
<p class="clearfix default_searchform">
<input type="text" name="s" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" value="Search" />
<button type="submit"><span>Search</span></button>
</p>
</form>
</div>
</div>
<!--Banner image->
<div id="header">
<img src="http://BANNER_URL.jpg" alt="" class="header-img" />
<h2 class="header_title push_1 grid_15"><a href="http://MAIN_URL" title="Go back to the front page">Sanuja Senanayake</a><h3 class="header_desc push_1 grid_15">noreply@sanuja.com may end up in spam. Check your spam box.</h3>
</div>
<!--Main navigation menus-->
<div id="nav">
<div id="header-menu-wrap" class="clearfix">
<ul id="header-menu" class="menu clearfix"><li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-ancestor"><a href="http://MAIN_URL"><strong>Home</strong><span>Index Pages</span></a>
<ul class="sub-menu">
<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://sanuja.com">Front Page</a></li>
</ul>
</li>
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-ancestor"><a href="http://FULL_URL/about"><strong>About</strong><span>Site Information</span></a>
<ul class="sub-menu">
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about">About this Site</a></li>
<li id="menu-item-2297" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/about/biography/">Biography</a>
<ul class="sub-menu">
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/cv">Résumé (Senanayake)</a></li>
</ul>
</li>
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/system">Home Network and Servers</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/faq">Frequently Asked Questions</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/copyright">Copyright & Privacy</a></li>
<li id="menu-item-979" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/about/sitemap/">Site Map</a></li>
</ul>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-ancestor"><a href="http://FULL_URL/category/uncategorized/"><strong>Categories</strong><span>Article by Category</span></a>
<ul class="sub-menu">
<li id="menu-item-1769" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/computer-science/">Computer Science</a></li>
<li id="menu-item-2635" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/ce/">Consumer Electronics</a></li>
<li id="menu-item-1716" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/earth-science/">Earth Science</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/documentary/">Documentary</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/opinion/">Opinion</a></li>
<li id="menu-item-1142" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/philosophy/">Philosophy</a></li>
</ul>
</li>
<li id="menu-item-995" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/exams/"><strong>Resources</strong><span>Exam Bank/Links</span></a>
<ul class="sub-menu">
<li id="menu-item-994" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/exams/">Exams and Quizzes</a>
<ul class="sub-menu">
<li id="menu-item-998" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/anth201/">Anthropology 201</a></li>
<li id="menu-item-1512" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/cpsc217/">Computer Science 217</a></li>
<li id="menu-item-999" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy201/">Geology 201 GLGY/GOPH I</a></li>
<li id="menu-item-997" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy311/">Geology 311 Mineralogy</a></li>
<li id="menu-item-996" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy323/">Geology 323 Geochemistry</a></li>
<li id="menu-item-2489" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy341/">Geology 341 Structure</a></li>
<li id="menu-item-2499" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/goph355/">Geophysics 355 Exploration</a></li>
<li id="menu-item-1754" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy381/">Geology 381 Strat & Sed</a></li>
<li id="menu-item-2064" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy381-final/">Geology 381 Strat & Sed Final</a></li>
<li id="menu-item-1426" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/alberta-class-5-gdl-quiz/">Alberta Class-5/7 GDL Quiz</a></li>
<li id="menu-item-1472" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/canadian-citizenship-test/">Canadian Citizenship Test</a></li>
<li id="menu-item-1069" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/other/">Other Types of Quizzes</a></li>
</ul>
</li>
<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/links">External Links</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://secure.sanuja.com/"><img src="http://sanuja.com/lock_24.png" height="12"> Secure Access</a></li>
</ul>
</li>
<li id="menu-item-990" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/science/"><strong>Science</strong><span>Geology/Computer</span></a>
<ul class="sub-menu">
<li id="menu-item-991" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/">Introduction</a></li>
<li id="menu-item-3038" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/computer-science/">Computer Science</a></li>
<li id="menu-item-3026" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/earth-science/">Earth Science</a></li>
<li id="menu-item-1722" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/field-geology/">Field Geology</a></li>
<li id="menu-item-987" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/funny/">Funny Science</a></li>
</ul>
</li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-ancestor"><a href="http://FULL_URL/contact"><strong>Contact & Feedback</strong><span>Please Leave a Comment</span></a>
<ul class="sub-menu">
<li id="menu-item-2965" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-577 current_page_item"><a href="http://FULL_URL">Subscribe to Newsletter</a></li>
<li id="menu-item-1286" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/forum/">Forum</a></li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="menu-bottom-shadow"> </div>
</div>
<div id="content" class="clearfix hfeed">
<div id="content-main" class="clearfix grid_16">
You have to use the exact location of each file and replace FULL_URL plus whatever comes after that. For example, I have https://sanuja.com/blog/about/ instead of http://FULL_URL/about/ in the file I use.
Editing phpBB
After a successful install of phpBB, open overall_header.html and overall_footer.html file using cPanel, FTP or other back-end file access method in the following location:
…YOUR_INSTALLED_FOLDER / styles / prosilver / template /
The prosilver is a default theme that comes in the phpBB software bundle. You may edit any other theme and/or copy the theme for backup before editing it. Which ever the theme you decide to skin, find the template folder because that’s where we will find,
- → overall_header.html
→ overall_footer.html
In the overall_header.html locate the the area in which the phpBB begins it’s theme and paste the code just above it. I entered it in the first line after the body of the header file;
<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
For the overall_footer.html repeat the same process except make sure all your div tags are closed properly. I found two divs not closing at the end causing the entire foot menu to get stretch. Of course, you add the footer code from WP at the appropriate place in the footer file. I added after the following code in the footer file;
<div>
<a id="bottom" name="bottom" accesskey="z"></a>
<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>
Copy the information for the skin head as instructed above. If you have a different theme, then go to the source code of a loaded page and find the CSS containers for header and footer.
Summery
For those of you who tying to implement skins across WP and phpBB follow the following guidelines (with any theme):
- Install WordPress and phpBB on your server (recommend using two different folders).
- Make a backup of each system before editing the code.
- Create a page with no side bars (recommended, but may use side bars).
- Load the page/post on a browser and view the source code.
- Look for any div elements; where do they start, where do they end and what do they contain.
- Only copy the header data from WP to import into overall_header, vise versa. When copying, copy the information within div elements with full URLs to prevent 404 errors.
- Use the documentation for the new system (in this case phpBB) for it’s outline files.
- Paste the data copies in step 5 into the appropriate location in the new system and save.
- Clear cache; on server/system, browser and any others that would store cache files. I would clear the cache after completing on each and very single step. I recommend updating large scripts in segments, which will reduce the possibility of a major code error.
References
- Special thanks goes to Syahir Hakim, Kenneth Odle and Prasanna SP of Graphene Support
- Graphene Theme, phpBB