Open/Close Navigation

How to Setup an Editable Client Site with Cushy CMS

If you design websites for clients you know that most clients these days want the ability to update the site themselves. Fortunately content management systems make this possible. It’s easy to setup fully-editable sites using Light CMS or WordPress, but these don’t always solve every problem.

Each client has there own unique needs and there may be times when the client just needs a small website with few pages.

For situations like this Cushy CMS is an excellent option. With Cushy CMS you can easily give clients the ability to change content on any page without extra complex details.

In this post I’ll walk you through the process of setting up a website for a client that allows them full editing power. The basic version is of CushyCMS is free so everything we’ll be doing here is using the free version.

For the purposes of this tutorial I decided to get a template from Theme Forest to use as the client site, and I’ve uploaded it to my site – of cours in the real world this would be at the client’s URL, but for this tutorial we’ll just keep it at this domain. The template I’m using is Clean Biz.

Clean Biz Theme

Throughout the tutorial there will be many screen shots. If you want to see the full-size version, click on the screen shot.

Step 1: Create Your Account

If you have never used Cushy CMS before, you’ll need to create an account. With the account you’ll then be able to set up clients as “editors” and assign them the rights to edit their site. Creating the account is very easy, just go to the sign up page and enter your name, email and password.

Step 2: Add Site

Once you’re logged in, you’ll see the options to add a site or add an editor.

Cushy CMS

To start with, we’re going to add the site, so click on the “Add Site” button. On the next page you’ll enter the client’s URL and their FTP data. If you don’t have this information, you’ll need to get it from the client before you can get everything set up. Next to the “Path” field, click “Choose” and find the root folder. When you’re done, click on “Add Site” and it should tell you that it was a success.

Cushy CMS

Step 3: Assign Some Pages

Now that the site has been successfully added, we’re going to assign 3 pages that the client will be able to edit. Of course, you can do more or less depending on the clients needs. We’re going to assign the home page, about page, and services page. To do this, click on the link that says “Assign pages to site” (below the domain).

Cushy CMS

To do this you’ll enter the full URL of the page, give it a name that the client will understand, and select the path to the specific file as it is located on the server.

Cushy CMS

Now, repeat this step for however many pages you want to assign. In this case, I have done this for the home page, about page, and services page.

Step 4: Assign Editor

Now that we have the site and pages added, we’ll need to give the client access to these pages. As the designer, you’ll have access to everything that you set up, but you’ll be able to assign each client to specific sites. So if you have multiple clients using Cushy CMS, you’ll be able to access all, but they’ll only be able to access their own sites and pages.

After you complete step 3 you’ll be on a page that looks like the screen shot below. Click on the green button for “Add Editor.”

Cushy CMS

Here you’ll enter the client’s name and email address (they’ll be emailed the login information) and choose which sites and/or pages the editor will have access to. In this case we’re choosing all three of the pages that have been set up. When you’re done, click “Add Editor” at the bottom of the page.

Cushy CMS

After you’ve added the editor, you will see a message stating that it was a success. Now click on a link to one of the pages below. You’ll get an error message telling you that no editable elements have been defined. Cushy CMS works very simply. If an element, such as a div for example, has a class of “cushycms”, it will be editable. Nothing else will be editable. So, since we’ve uploaded a standard template we need to also add some classes to each of these pages to allow editing.

Cushy CMS

Step 5: Add cushycms Class

We’ll open up the index.html file and add a class  (class=”cushycms”) to the content div that contains all of the content in the main area of the page. You can also add title elements to make it more organized when editing, so we’ll add title=”home content”. Make sure that you add the class to an element that contains everything that needs to be edited. You can add multiple classes per page.

Cushy CMS

We’ll also do the same thing for the about page and the services page, and we’ll upload all of these pages to the server. I’m also going to add the class=”cushycms” to the sidebar of the services page so that we’ll be able to change the photo. (click on the image below to see a larger version). Now that the class has been entered, we’ll be able to edit anything that is in the content div. Back in Cushy CMS, click the try again button.

Step 6: Edit the Content

Now, we’ll select the services page from the list of pages that have been set up, and you’ll be able to edit.

Cushy CMS

You’ll notice here that it keeps the h2 tags and paragraph tags in tact. All of this is editable. New headers can be added, bold or italics can be applied to text, links can be added, etc. The basic functions you would expect are all there.

We’ll change the h2 tags to give specific information rather than Service 1, etc. We’ll also apply bold to a few words and insert a link.

Cushy CMS

When you’re done, click publish page.

Here is what the services page looked like before the edit:

Cushy CMS now interacts with the server and the changes will take effect. Below is a screen shot of the page after it has been edited.

Cushy CMS

Step 7: Change the Photo

It’s also nice for clients to be able to change photos from time-to-time, and since we added the cushycms class to the containing div, we’ll be able to update the photo in the sidebar of the services page.

So, we’ll choose the services page from the dashboard and we’ll see something like the screen shot below.

Cushy CMS

Now if you click on the image to select it, and click on the button to add or edit an image (it’s a picture of a little tree next to the “insert table” option), you’ll be able to upload a photo to the server and add it to the page. Alternatively, if the image you want is already on the server you won’t have to upload it.

Cushy CMS

Click on the upload tab and browse to find the image that you want and click “send it to server.” The image is now uploaded and plopped in that spot of the page. Choose a width and enter it, the height will automatically be adjusted (or vice versa). Click “ok” and you’ll see the change.

Cushy CMS

We’ve now been able to update the text and the photo of the page.

Cushy CMS

In this case I have worked through the process while being logged in as the designer, but the client would be able to do the same things after they get their login information by email. So now they have a small website that they can easily maintain on their own without any technical knowledge.

At the Cushy CMS homepage they also have a brief video that walks you through the process, so be sure to check that out if you have any interest in using the CMS.

And for more helpful tutorials check out these posts:

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

Join the Newsletter

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies.

Popular WordPress Themes

More Design Inspiration

BlueHost