A Feature That Could Improve Your Website
As we progress on our client’s website, it seems as though something could be added to help viewers visiting the site. Our group is working on a website for an artist organization that features artists and holds events. One of the main purposes of the website is to bring in visitors to the events. Therefore, I think the website would greatly benefit from adding an event calendar on the home page. That way, visitors can efficiently access the upcoming events for particular dates.
One of the most popular calendars is Google Calendar Events. An advantage of this calendar is that viewers can sync it with their own personal calendars (if they use this calendar.) It is also easy for the client to update or change upcoming events. Any updates made in the Google Calendar are instantly updated on the website.
Ways To Implement This Feature
There are two ways to add Google Calendar to your website. One is to add the plug-in through WordPress and the other is to manually embed it.
To Add the Plug-in
Google Calendar Events: Here is the link for the WordPress plug-in. Download, install and activate the plug-in in the WordPress Dashboard. Then on the Plug-ins page, go to Settings. Here the settings can be customized for the calendar. It is pretty straightforward to use this method, but implementing it manually is just as simple. Here is a helpful tutorial article on rhanney.co.uk for this plug-in and other useful information.
First you need to create the calendar in Google. Then you can change the settings of the calendar and how it displays by going into Calendar Settings (under “My Calendars”). Customize the calendar as needed, then copy and paste the HTML code that is displayed.
Then in the WordPress Dashboard create a new page, add page title and paste code into page (in text tab, not visual). Anytime the calendar is updated, it will also be updated on the website.
Google Calendar Examples
Some great examples of this feature being used on other sites are listed here:
- Tangoasheville.com: This website uses Google Calendar in a simple and effective way. It has a “Calendar” page with a monthly format. There is a button that allows viewers to subscribe and share events. Then on all other pages it has a sidebar calendar list.
- www.aiaasheville.org/calendar/: On this website, the calendar is very customized visually and for its functionality. Viewers may submit events and have the ability to RSVP an event. (This website also uses iCal, so for those viewers who use iCal, the event can be synced to their own calendars.) This is a nice example of how to use Google Calendar in a customized way.
Adding A Widget
Google Calendar Widget can be a useful way to display a smaller version of the calendar, for example in a sidebar on the home page that can link to a calendar page if desired: http://wordpress.org/plugins/google-calendar-widget/.
Missing Feature Resolved
Once we get the Google Calendar up and running on our artists’ website, visitors can sync their calendars and maybe there will be even more visitors in person at the events!
Many if not most websites have some kind of image gallery or cycle, also known as an image slider. Finding a good image slider can be daunting with so many of them out there!
One of the projects I am currently working on within a group, is a website for an artist organization. To be effective, the website needs a visual representation portraying what the organization is about. A homepage slider with quality images is one effective way to do this. (The website needs visuals!) It will show pictures of artists at work, studios and events, etc.
Criteria For Image Slider
The CMS being used for this website is WordPress, so there are many options available for image sliders, especially plug-ins. First let’s look at some of the criteria required (preferred) for this image slider:
- Easy to use backend (for client to update images in the future)
- Customization options (like transitions and arrows/buttons)
Image Slider Plug-ins
Meta Slider: This slider plug-in is responsive, easy to set up and and has options for customization. It also has image cropping features, which makes it easier for implementing. There seems to be a lot supporting tutorials and guides. Here is an introduction video showing this slider’s features:
For Meta Slider Documentation and other information: http://www.metaslider.com/documentation/
This plug-in offers options and features for different sliders. Here is a screen shot of the settings menu:
The Meta Slider is free as a plug-in from WordPress and there is also a Pro version that isn’t free (from metaslider.com).
When looking for an image slider, consider things like customization, responsive design, smooth transitions and easing, allowing the viewer to navigate, among other slider features. There are many plug-ins from which to choose for image sliders. Maybe Meta Slider is the one for your next project!
So your client needs a contact form on their website. Which plug-ins should you use? What is the best way to go about it?
Criteria For Custom Forms
Before figuring out how to go about creating a contact form, first let’s consider what the important criteria is:
- Easy user interface/options
- Concise guides & instructions
- Spam protection/filtering
Contact Form 7 In WordPress
One popular contact form commonly used in WordPress is Contact Form 7. Using this contact form is fairly simple and there are instructions and tutorials to walk you through it. The disadvantage to using this contact form is that it is not very easily customizable, but if you just want a basic custom form this could be a good option.
Features of this form: Ajax-powered, uses CAPTCHA and Akismet spam filter. One thing to note about using this contact form: adding special plug-ins can enhance it. You can add a plug-in for multilingual use, simpler CAPTCHA and many more features and options.
The following is a straightforward, step-by-step intro video for Contact Form 7:
Other Plug-in Contact Forms For WordPress
Here are some other contact form plug-ins I came across:
Visual Form Builder: This contact form has different pricing plans (none are free) but it has many options and features.
Build Your Own Contact Form
If you feel comfortable doing some PHP coding, there is also the option of creating your own contact form.
Why would you want to make your own? It keeps the code lighter and more efficient. It’s also good to know how things are working. You can feel good about the fact that you are the one who created it, maybe even learning something in the process.
You just need to know a little PHP (or feel comfortable using it/learning how to use it). I won’t go into that here, but I have provided some articles that offer tutorials on how to do that.
- There is an excellent article on how to build your own simple contact form and why at wpmudev.org.
- Here is an example of creating your own contact form without a plug-in from Brag Interactive.
Here is a link to general information on WordPress contact form plug-ins.
More articles about contact form plug-ins:
When designing a website for a client, a designer needs to make many decisions. One decision is whether or not to use a template and just modify it to suit the client’s needs or create the template from scratch. What’s the best choice?
I believe that it is best to create your own. Here are the reasons why: If you design your own, you are more familiar with it. You don’t get lost in an ocean of unfamiliar code and have to spend time searching through it to find something. Also, there could be errors in someone else’s code. Trying to find the error in unfamiliar code is inefficient and time-consuming. It may be better to just make your own.
Integrity is another good reason to create your own. Design it the way you feel works best for the client. This makes it custom and that means you can feel proud of the work you did. Custom work sets you apart from other designers and clients can feel confident that you’ll spend the time treating their project with loving care. Not that there is anything wrong with getting inspired by other designers, but it is beneficial to create your own template rather than modifying a pre-made template.
Sometimes it helps to get a little inspiration that will awaken the design muse within you, a little nudge to get some ideas brewing. Here are some resources I have found to get going:
Inspiration For Design & Layout
The following websites use WordPress, are nicely designed and have great functionality:
Inspiration For Cool Tricks & Added Features
- http://viewportindustries.com/digest (for responsive layout)
- http://www.heymonkeydesign.com (for just all around goodness!)
Resources For Great Templates
If you do decide to base your website design on an existing template and then modify it, here are some good template resources that may be useful:
- “Gridly” by Eleven Themes is a nice grid-based WordPress theme for portfolios: http://www.eleventhemes.com/gridly-theme”/
- “Responsive Theme” by CyberChimps is very popular (with over 1 million downloads!) http://cyberchimps.com/responsive-theme/
Tutorials To Design Your Own Templates
- This is a great beginners Tutorial from Tuts Plus: http://code.tutsplus.com/tutorials/wordpress-theme-development-training-wheels-day-one–wp-22482
- Another Tuts Plus tutorial from static HTML to adding navigation: http://code.tutsplus.com/tutorials/creating-a-wordpress-theme-from-static-html-adding-navigation–wp-34032
- This is a good tutorial for creating a WordPress theme: http://www.wpexplorer.com/create-wordpress-theme-html-1/
- This is a list of tutorials on WordPress, from beginner to creating themes: http://www.creativebloq.com/web-design/wordpress-tutorials-designers-1012990
Free Template Sample
“Spacious” by Theme Grill (This one has a nice responsive layout): http://demo.themegrill.com/spacious/
I suggest this one because it is responsive, which is becoming more important these days in order to be viewed correctly on many types of devices (mobile, iPad, etc.). Secondly, I find this layout visually appealing. It is versatile for many kinds of businesses and clients. Also, the code is not very bloated; it has a lot of layout options and a nice slider. Here is an image of this template’s demo:
- This website includes a list of tutorials for creating a WordPress theme: http://rockablethemes.com/wordpress-themes-tutorials/
- Here is a helpful tutorial for creating a portfolio website in WordPress: http://line25.com/tutorials/how-to-build-a-basic-portfolio-wordpress-theme
Here are some sites that list free WordPress templates with responsive design:
Which Open-Source CMS to Use?
After learning about php-based Content Management Systems, I have come to the conclusion that I prefer WordPress. This is the CMS I want to be most familiar with due to being so widely used. (Many clients may ask for it or be familiar with it already.) The reasons and criteria for my choice include the following:
- Easy and user-friendly dashboard/interface
- Many plug-ins to choose from (over 30,000)
- Easy installation (that is an important factor to me!)
- Easy for designers to communicate to clients for admin functions and features
- Good SEO capabilities
- Easy Customization
- A lot of support documents, guides and tutorials
Good For Designers
I believe most designers should learn WordPress because it is so widely used and because it is a great way to really learn how CMSs work. I also believe it is good for designers to learn other CMSs but that if a designer is familiar with WordPress, then learning other CMSs, such as the more complicated and robust Drupal, would be easier.
Here are some interesting articles comparing WordPress, Drupal and Joomla:
Another reason I believe WordPress is so popular is because it is easy for the client to update content without having to know code. Many businesses choose WordPress for this reason. The interface is intuitive. WordPress can be used for simple websites or it can be used for websites that are more complex, such as for shopping carts and social networking. Some well-known brands using WordPress include:
- The Wall Street Journal
So, to start with I’ve decided to choose WordPress and when I feel ready to expand my knowledge and skills, I’ll learn other CMSs like Joomla and eventually Drupal.
GetSimple is a Content Management System (CMS) that is based on XML (Extensible Markup Language) as oppose to SQL (a relational database) that many other CMSs use. If you are designing a simple website that won’t have things like a blog, e-commerce, lots of posts and pages, just an easy to navigate website, then this is a good CMS to use.
I rate GetSimple as being a great CMS because it is easy to use, with easy set up and a user-friendly interface/dashboard. Also, creating themes is pretty straightforward too. It’s the way to go when creating a simple website.
I give it 5 stars! ★★★★★
GetSimple is easy to install. One of the reasons for this is due to the fact that it does not require use of a MySQL database. According to the GetSimple website, it takes five minutes to set up!
To install GetSimple:
- Download GetSimple (http://get-simple.info)
- Upload the contents of that folder to your server, where the root of the site is going to be.
- Open your web browser and navigate to that folder (GetSimple/admin) which takes you to an installation screen for set up. Then follow directions from there (such as setting up a username and password.)
That’s it. It’s installed!
Here is a tutorial for creating a theme in GetSimple: http://get-simple.info/wiki/themes:creation
It can be done basically by using one document: “template.php” which contains the html for the website.
Editing content is easy! Using the built in editor in the dashboard makes it very simple to add or change text, images and other content, including headings and some text styling.
Editing Components is also pretty straightforward, for example adding a sidebar, a footer, image slider or contact form.
Backing Up Process
GetSimple also features an easy to use Backup function. It automatically archives every page in the website whenever a change is made. There is a backup tab that provides a way to restore the site before the last change was made.
When To Use GetSimple For Clients
If you are designing a simple website that won’t have things like a blog, e-commerce, lots of posts and pages, just an easy to navigate website, then this is a good CMS to use.
Maybe you are designing a site for a client who has about ten pages on their site. They just want to be able to change some of the content on occasion, like changing out an image or updating some of the text. The site won’t have use an e-commerce and doesn’t have a huge amount of content. This is the perfect example of when to use GetSimple.
It is very easy to use and beautifully designed:
Another useful features of GetSimple is the support and documentation provided that is easy to follow and understand when learning how to use it. There is even a theme tutorial here: http://get-simple.info/wiki/themes:tutorial that shows how to set up a theme.
For more information, here’s a great article on GetSimple: www.drivingpeace.hubpages.com
WordPress is one of the most popular CMSs currently. One reason for this is because editing content doesn’t require coding knowledge. It’s great for businesses who have a website whose content changes over time and that can be updated frequently.
I rate WordPress as being a great CMS when the website requires many functions and uses a lot of content, data and plug-ins. This is a good CMS to use for e-commerce, social networking, blog or just for a simple website.
I also give WordPress 5 stars! ★★★★★
Installing WordPress is especially easy if using the one-click install through a webhost but it can also be installed fairly simply using a local server:
To install WordPress:
- Download & Extract WordPress
- Create database and user
- Set up wp-config.php file
- Upload files to web server
- Run the installation script
For a step-by-step guide on installing WordPress: https://codex.wordpress.org/Installing_WordPress
Creating a theme in WordPress can be a bit daunting. It does take some time to learn but is important for designers to know how to create themes for client websites.
The following is just a little information about templates in WordPress:
A theme uses an assortment of template files, stored in the theme folder. Often there are many files such as:
There are also files with loops for things like blogs, posts and pages:
Of course, there is also the important stylesheet (style.css). To learn more about templates and themes for WordPress, here are some articles:
Editing content is easy in WordPress too. Through the dashboard, text and images can be easily added or changed as needed.
Backing Up Process
To back up your website when using WordPress, there are different options from which to choose:
- Web host backs up data (or provides software for backup)
- Back up your database (using cPanel or phpMyAdmin)
- Use WordPress Database Backup Plugin
- Copy files to your desktop or on your computer (using an FTP client)
(The most important file to back up is the wp-config.php file.)
When To Use WordPress For Clients
WordPress is popular because it is easy to edit content, has an enormous amount of plug-ins to choose from as well as many themes. From robust websites with a lot of features, to a simple website, it is easy for clients to edit content. This is another reason why so many businesses use it.
The dashboard is a comfortable, elegant, user-friendly interface that is easy to understand and navigate.
Image source: http://codex.wordpress.org/File:dashboard.png
WordPress has a plethora of plug-ins to choose from which is one of my favorite features. Currently, there are 30,284 plug-ins.
I would use either one of these CMSs for a client, depending on the clients’ needs. If the website was small and simple, then I would say GetSimple would work fine. WordPress is great for simple websites too, but is great for websites that have more complicated structures and features. So I’d use WordPress for most websites and GetSimple for the quick, simpler websites for my clients.