Cozmoslabs » CMS

Front-end interface portability between CMS – the next BIG step in web-development?

Cristian — Sun, 21 Sep 2008 10:49:56 +0000

I want to talk in this post about front-end interface that could be used without any modifications (or just with basic configuration) between different Content Management Systems (WordPress, Joomla, Drupal, Expression Engine and a million more) and how this could help the developer. I know it sounds far fetch but bare with me for a minute.

I’ve been reading a lot lately about Child Themes in WordPress and how easy is to create a new theme from scratch just by building it on top of a theme framework. Ian Stewart’s blog has been a real inspiration for me in the last two months since I’ve discovered it and really brought an “AHA” moment for me. He’s been developing his Thematic theme framework for quite some time and it’s really powerful, but most of all useful.

Now, with the introduction of WordPress 2.7 in November designers will be able to overwrite any of the master theme files, opening a hole bunch of possibilities for the professional WordPress designer.

A similar concept resides in the relatively new Magento eCommerce system. Although this is a lot more complicated then a WordPress theme the same basic idea is found behind it’s template system: you can build on top of a base theme, and not duplicate and modify a theme.

If the differences between building on top of a base theme and modifying the base theme are small, the implications are wide.

You see, Magento gives you the ability to load multiple themes at once, allowing you to swap between a default store design and temporary event/season-specific ones — All at the command of a few key strokes, which is a big selling point for a online shop.

What WordPress Child Themes give you is the simplicity of updating your theme without loosing any customization you did on it in the process. That is not such a big thing if you have 1 blog, but what if you have to take care of 100 blogs for your clients. Now that’s a challenge!

These are two examples of CMS that use the Object Oriented methodology borrowed from programing to develop their template system.

Because they are both in active development and big players on the open-source CMS market I will take an educated guess and say they will start a trend that will slowly be adopted by other CMS. I will take this further and say this will remove the images and css (the front end) from the base template and position them outside of the code that usually comes with a theme. Now all we have to do is have standard XHTML declarations and we can achieve portability between platforms (you guys still remember css Zen Garden right?).

I realize there are a lot of differences between any CMS out there but it’s not impossible. It’s been realized with a lot more complicated software products (OpenID, Meebo and many more) so it can be done with a few XHTML and css files.

In the end the advantage won’t be in using Joomla! themes in WordPress or the other way around, but by providing developers with a standard platform on which they can create their themes. This way one would spent more time creating a quality theme instead of trying to stay up to date with 3-4 CMS at a time.

Although this might never happen, for now we can be happy with theme inheritance and it’s advantages. Who knows what the future holds for us!

Use WordPress as a CMS with Thematic – Part2

Cristian — Sun, 14 Sep 2008 06:44:20 +0000

Photo by solarnu

In Part 1 of the tutorial we’ve discussed about:

Installing WordPress
Creating a Child Theme
Implementing out blog design
Css tricks
The functions.php file
Setting up WordPress and adding pages.

Now we take over from where we left and make the web-site fully functional. In order to do that we’ll use a few plugins to help us create a nice, functional and easy to use interface. The plugins we’ll use for this project are:

cFormsII – for our contact form
Nextgen-Gallery – Easy to use with great out of the box functionality
WP Super Cache – Since this is a static web-site we’ll use this plugin to make the site load in a snap

1. CForms

The plugin description says it all: “cforms is a highly customizable, flexible and powerful form builder plugin, covering a variety of use cases and features from attachments to multi form management, you can even have multiple forms on the same page!”

As you can see this is a really powerful tool, especially if you need just a simple form, but the real advantage of it is that you can easily configure the way your form is displayed, as you can change the css directly from the administration panel. This, correlated with the fact that it has over 20 ready made css templates to accommodate a verity of designs saves us precious development time.

Cforms comes with a ready made standard form that you can either modify or just use it as it is. Since the web-site was developed for a Romanian client I had to make a few changes, mainly translating the form from English.

If I take it from top to bottom these are the steps I followed to create my form:

Translate the Field Names on the form
On the “Redirection, Messages, Text and Button Label” section I’ve translated the Submit button, required and error messages
On the “Core Form Admin / Email Options” changed the “Admin email address(es)” to that of the person who will receive the email
On the Styling tab I’ve selected my css template of choice and modified some of it’s default styling to better fit my needs.

The rest of the options you can leave unchanged unless you want something in particular like CAPTCHA, or “Tell a Friend” functionality and even “Database Input Tracking”(all submissions through the form will be stored inside your database and you can see them on your dashboard.)

Have a look on how the form turned out in the end here.

2. Nextgen – Gallery

This is really a good plugin. It has a lot of out of the box functionality that you probably don’t want to change.

What I liked about this was how easy everything was to set-up. Upload and activate the plugin, upload the pictures, enter the tag (if I would have used text instead of an image some odd things would have happen ) in your post or page and you’re done(the thumbnails are created automatically ). Fast and easy. This way my client can add it’s own photos without the need to edit them for the web since all that done on the server side.

The only thing I had a problem with it was that on IE6 the thumbnails were displayed some place on the left side of the site. To fix this all I had to do was to modify inside nggallry.css (you can find it in the plugins/nextgen-gallery/css folder) the .ngg-gallery-thumbnail img selector, and comment out position:relative; declaration (or just delete it.)

Have a look at the gallery in action.

3. WP Super Cache

Since we have static pages there is no need for WordPress to load each time a page is requested. This plugin generates static html files from your dynamic WordPress blog. After a html file is generated your web server will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.

These plugins made from our simple WordPress blog a decent CMS. It gives you the advantage that it is free and really well documented, and it gives to your client a simple to use CMS without any headaches.

You can even give your client just an editor’s account so I doesn’t have to see every settings page and get lost in them. Also if you do this don’t forget to give access in the Nextgen – Gallery to editors as well!

Finally I’ve tested the site on Firefox 2, Firefox 3, Internet Explorer 6, Internet Explorer 7 and Safari 3. Of course it didn’t work on IE6, and I had to add a few hack’s to the style sheet, but most of the problems you can find them well documented online.

The only thing remaining is moving the web site to the client’s server, although we’ll discuss this in a different post some time in the future.

This was a simple project that could have been done using just HTML, CSS and Javascript in a mater of minutes once you have the template ready, but this was not the point. The reason I used WordPress was to find out more about this platforms capabilities and offer to the client a easy way of changing the content on the web-site.

In the end you can do almost anything with WordPress that you can do with a more advanced CMS, as there are over 2,936 plugins and counting over at wordpress.org, all you need to do is just a little digging

Use WordPress as a CMS with Thematic Theme- Part1

Cristian — Sun, 07 Sep 2008 08:30:28 +0000

This will be a two parts tutorial in which will use WordPress as a CMS with the Thematic WordPress Theme Framework.

Requirements:

WordPress
Thematic Theme framework
A ready made layout design
Coffee ( preferably hot with cream and no sugar)

We all know how powerful WordPress can be. A lot of people have done this before me, building static websites on WordPress, and using it as a CMS so there is a lot of information out there. (people have written about this here and here and probably countless other places ). What I tried to do is use the power of the Thematic WordPress Theme and simply create a nicely designed static website.

Before we start here is the project after this stage: Kraft Auto , and here are the things I wanted to implement:

simple and easy CMS for the client to use (big points for WordPress in ease of use)
fast implementation of the web-site (since I’ll use a child theme based on Thematic that means I don’t have to create the theme from scratch, just part of the css)
a simple contact form (in part 2 of the tutorial)
a photo gallery (in part 2 of the tutorial)

1. Installing WordPress

This was the easy part. I’ve downloaded the latest version of WordPress and installed it in a folder on my test server (in this case cozmoslabs.com/projects/kraft2/).

If you don’t know how to install wordpress yet, it will only take a minute… literally. http://codex.wordpress.org/Installing_WordPress . The guys over at WordPress are a little modest and claim that it takes 5 minutes… but you can do it in one .

Once this is out of the way, and we are one minute into the project, we upload the Thematic theme to our server inside our theme directory and start the real work (for more information about installing a new theme have a look here).

2. Creating a child theme

We need to keep things simple for us. This is were Child Themes come into place. Not having to write the HTML for your theme speeds things up and keeps everything nicely organized.

To create a child theme we need to make a new folder with our theme name inside the theme directory (in our case “cozmoslabs.com/projects/kraft2/wp-content/themes/kraft”).

Inside we will create the flowing files and folders:

sytle.css – will contain all our css that will overwrite the basic css found in our theme framework
functions.php – this will help us add extra HTML code, include some javascripts, and create the menu.
home_banner.php – this holds a static piece of HTML that will be included inside functions.php, but I’ve kept it outside so I don’t have to much going on inside functions.php
/images – this folder will hold all the images associated with our theme
/js – this folder holds all the javascripts related to our theme. In this case it holds slideshow.js, a javascript that will enable me to create the slideshow banner that exists on the home page. We will also have to have the jQuery library in order for this to work, but that is already loaded with Thematic that uses it for the Slideing Down admin pannel. Please note that WordPress already comes with the jQuery library and is located inside the “wp-includes/js/jquery” folder.

Once we’ve created our files is time to link our theme to inherit Thematic. We do this adding the folowing code to the style.css file:/* Theme Name: kraft Theme URI: http://cozmoslabs.com/ Description: Built on Thematic Theme Author: Cristi Antohe Author URI: http://cozmoslabs.com/ Template: thematic Version: 0.1 . All Rights Reserved . */ @import url('../thematic/style.css');

The most important part is “Template: thematic” as it tels WordPress from were to inherit every thing. Next we have to import the Thematic style.css in our theme. We do this by adding this line: “@import url('../thematic/style.css');” .

Now that we have created our child theme is time to activate it from our admin panel, under the Design tab. Verify if everything is in place by visiting your site. If it looks just like Thematic then it works!

(For a more comprehensive tutorial on how to create a child theme try this article over at op111.net)

3. Implementing our design

I won’t get into a lot of details regarding css and html since this is outside of the scope of this blog post, but I will try and give as much information as posible on certain problems that I encounterd developing the theme.

In order to add our css to the Thematic HTML we need to know what’s underneath. You can view the source HTML of your web-site in Firefox by clicking “View/Page Source” (or Ctrl + U). This way you can identify the different classes and id’s that are responsible for stilling the page.

Another way to do this is by useing the WebDeveloper plugin for FireFox. You can display the different elements information like class, id, width, children, ancestors, and much more.

The main id’s in Thematic that you will probably target with css are: wrapper (I’ve given it a fixed width for this project), header (holds the top part of the site, including the menu), branding (resides inside the header div and holds the blog title and description), access (holds the menu div), main (holds the information on the right and left side of the template).

4. CSS trick’s I’ve used

In order to get around some things that normally one shouldn’t worry about if you are developing your own HTML and CSS, I’ve used a few trick’s to make my life easier:

display:none; – I don’t need the blog description to show up in my theme, and since I can’t remove it from my theme I used this to hide that div and the description.
text-indent:-3000px; – I’ve used images for the Logo and menu, so I needed to either create the menu by hand using functions.php file or find some way to use the menu as it was and stile it with css. By using a negative text indent the text moves to the left by 3000px and it’s out of our field of view, and we can add background images to our menu and blog title.
Image roll over with css – I’ve targeted every menu element by it’s id and added background images to it. This in correlation with the negative indent resulted in the menu you see on the page.

Please note that the display:none and negative indent methods are categorized by some as Black SEO, and the misuse of them (hiding text from users just so one would rank higher in search engines) can lead to being penalized by search engines, be we shouldn’t have any problems since the text we are currently hiding is shown with images. This is a long debate so I just thought to let you know.

5. The functions.php file

This is the reason it is possible to have a child theme, since just CSS would not suffice under any circumstances to create a complex theme without modifying the source files. In my case I used this file for the flowing things:

The main banner on the home page
Displaying the header title in the inner pages
And to include the slideshow.js file for the home banner

There are a lot more things one can do with the functions.php file but all I needed were these three. Here is how it looks:

function secondary_header()
{
if (is_front_page())
{
include('home_banner.php');
}
else
{
?>








As you can see I’ve used some wordpress functions from it’s API to check if it’s the front page, in which case I include the home_banner.php file that contains all the HTML for my home banner, and if that’s not the case I’ve used wp_title() function to print the current page on which I’m on.
TIP: when using wp_title() function make sure you add as parameter nothing… well I mean this: wp_title(‘”). Otherwise there will appear arrows (») in front of the title.
The add_action() function binds my code to different parts of the site, depending of your needs and the Theme you are using for your child theme. In the case of Thematic there are a lot of custom hooks and filters that you can use to create just the look you are after.
6. Setting up wordpress and adding pages
The hard part is out of the way, and now we can start adding content to our pages. But first we need to create them.
Create all the pages you need by going to Write/Pages.
I won’t use the blog part of WordPress for my site so no need to use it. Go over to Settings/Reading/Front page displays and select “A static page (select below)“. Select Home for your home page and underneath where it says “Posts page:” leave that unchanged.
If every thing works out you should now be able to see your web-site with everything working fine.
As you can see there isn’t much to do in order to use WordPress as a CMS… and the only thing that is time consuming is developing your child theme.
Coming up in part 2
I will try and finish the web-site in part 2, use some plugins for a contact form and a photo gallery, and maybe talk a bit about copywriting for clients.
If you read this article, start developing your theme and have questions or comments don’t hesitate to ask them. I’ll try my best to answer them.


Related posts:
Installing WordPress Child Themes and Customizing the Byty Theme
10 design tips for your custom wordpress theme built with thematic
Use WordPress as a CMS with Thematic – Part2

Before I go on vacation, more Thematic madness!

Cristian — Fri, 15 Aug 2008 11:27:27 +0000

I’ve mentioned in my previous post about Thematic that I want to implement a static web-page using WordPress and Thematic as a CMS, so here’s a sneak peek: www.cozmoslabs.com/projects/kraft2 . It doesn’t have a lot of content yet, I still have to install a form builder, a photo gallery, create some more pages and perhaps a video with the clients Auto Shop, but the main template is done. And again it was so easy to implement.

I have to say this is not a child theme, because I made small changes to the header file of the Thematic theme . Other then that, the needed changes for the thematic_belowheader ( for the slide show ) hook were done through functions.php file.

I have to say I can’t wait for WordPress 2.7 to implement full theme inheritance. Things will really take of then.

Away on vacation!

Finally some well deserved time off. It’s been a really interesting year for me and things appear to become even more interesting.

I’ll be away until the first of September so expect a full blog post in the first week after my vacantion on how I’ve used and implemented WordPress and Thematic as a CMS for KraftAuto .

Until next time, have fun!

Joomla! 1.5.3 FTP layer and upload problems (update)

Cristian — Wed, 13 Aug 2008 10:25:06 +0000

I’ve encountered a really nasty problem with a Joomla! 1.5 installation for a client of mine. It has to do with the default PHP upload function.
The problem manifested like this: Upon uploading and installing a plugin, because the server was using PHP 4 I needed to make some modifications to the plugin php files since it used the array_combine() function that was supported only in PHP 5. So far so good until I realized I couldn’t change – rename – delete – change the permissions on the files I wanted, because my ftp user didn’t have any rights.

Apparently the reason behind this is that when I installed via Joomla! that the “owner” of the created folders/files etc. is being set to “nobody”.

This was really annoying mostly because if I would try with the ftp layer I have problems just installing anything (templates, modules, plugins, components) but if I disable ftp I can install but then i can’t change the permissions via ftp which will allow me to edit any files.

Searching the Joomla! Forums I came across this post . I couldn’t find a really good solution so I’m not certain what to do now.

The apparent solution would be to make the modifications to the plugin on my local server and then upload them. All this for a copy-paste of code in a file online.

Also tried to install from a directory on the server without any success.

I haven’t finished the client’s website but I’ll have to find a solution although I don’t have high expectations and probably will have to make the modifications offline.

Update

After some fiddling around with the settings I managed to find a suitable solution. Basically I’ve set up the FTP layer and installed the component.

1. Setting up the FTP layer in Joomla!

The tricky part here is finding the root of the website. Also the /tmp and /log folders also needed to be exactly specified or it won’t work ok.

The settings for me wore :

Path to Temp-folder: /home/account-name/public_html/tmp
Path to Log folder: /home/account-name/public_html/logs

For the FTP settings I used an account that has full ftp access higher then public_html . In this case :

FTP Root: /

2. Uploading the plugin using the Directory Install

Installing directly by uploading the component didn’t work for me… I’ve received the following errors:
JFTP::write: Bad response
JFTP::delete: Bad response
JFTP::write: Bad response

So I decided to try and install the component using the Directory Install Option. I’ve unpacked my component on my HDD and uploaded it here:

/home/account-name/public_html/administrator/components/com_installer/com_fabrik

Please note that this is the path that you have to write in your “Install Directory:” input also.

The component installed successfully and I can now modify it’s files from ftp.

I’m relived that I got this sorted, because I believe Joomla! 1.5 to be a big step forward compared to 1.0 and it would have been a shame to spoil it with something like this. I still don’t think this is the best way to do this but it’s a start.