Articles – DrawYourPets Blog

Squarespace vs WordPress.com vs WordPress.org

Screen Shot 2016-04-11 at 6.12.35 PM

Squarespace, WordPress.com, and WordPress.org are three very different content management systems. You’ve probably heard of WordPress and Squarespace, but you don’t know the differences between the two, let alone the differences between WordPress.com and WordPress.org. In order to give you a better idea of these differences, I will evaluate the three systems based on their cost, usability, and development/maintenance, and will also give you a personal account based on my experiences with all three.

1. Cost

WordPress.com – WordPress.com is known for being free. Without paid upgrades, however, a WordPress.com site will have limited capabilities, including a standard domain name and a static theme. Therefore, assuming that a user will want to upgrade, the pricing is as follows:

Unique Domain Name – $18/year
Storage Space – From $20/year to $290/year depending on GB amount
No Ads – $30/year
Site Redirect – $13/year
Custom Design – $30/year
Plugins – Must register with WordPress VIP, which starts at $2500 / month for up to 5 sites.
Monetization – Must split ad revenue with Automattic

WordPress.org – WordPress.org is known for being self-hosted, which means it is not free for a basic plan. However, hosting can be done for a fairly low cost through a hosting company and then the following pricing remains:

Unique Domain Name – $10/year (Depends on Plan Through Hosting Company)
Storage Space – Free
No Ads – Free
Site Redirect – Free
Custom Design – Free (Depending on your knowledge of WordPress tools + coding)
Plugins – Free
Monetization – Free (Receive %100 Revenue)

Squarespace – Squarespace is initially the most expensive, with a basic plan starting at $98 / year and a business plan starting at $288 / year. However, these plans also include hosting and support (unlike WordPress, where support is limited to online forums and paid subscriptions to a pro version). This can save quite a bit of time and frustration.

2. Usability

WordPress.com – WordPress.com is actually very similar to WordPress.org in terms of usability. You can choose from hundreds of themes, paid or unpaid, and insert your content while making minor style adjustments from the dashboard. However, you will be constricted to the options that your theme provides. Even with a custom design upgrade, you’re still only allowed to edit fonts and customize CSS (not the HTML). While some support videos are available on youtube, you’ll need to specify that you’re using a .com website in order to learn more about using the WordPress.com platform. One benefit to the dashboard at WordPress.com is the ability to toggle back and forth between desktop, tablet, and mobile sizes.

Screen Shot 2016-04-12 at 3.46.09 PM

WordPress.org – WordPress.org allows you to make modifications to your site through the dashboard or “frontend.” There are more options available in the dashboard because of your ability to install plugins (for example Jetpack, Ecwid Store, Contact Forms, Marketplace, and the Plugins panel itself are all visible in my WordPress.org dashboard, since WordPress.org supports plugins). Getting used to the WordPress.org platform really just takes time – you will learn by experience and there are many support videos to help you along the way. WordPress.org also gives you the ability to edit CSS directly through Appearance –> Editor, and then you can create a child theme for any other changes to your site files.

Screen Shot 2016-04-12 at 3.48.59 PM

Squarespace – Squarespace is somewhere between WordPress.com and WordPress.org as far as freedom and capabilities in the dashboard. Unlike WordPress, where style changes are made through the dashboard or backend, Squarespace allows you to make changes right there on your site by using a drag and drop interface. When clicking on the small, grey balloons on the left side of your editor, you will be presented with multiple options, including the option to insert an image, text, space, form, audio, video, grid, line, map, and much more.

You can also create custom CSS for the site and inject CSS into a particular page, but there is no way of managing your HTML and CSS files in the backend unless you register for Squarespace development. This leaves you very constrained to the design that your template provides. For example, it’s better to find a template that would allow you to insert three images side-by-side rather than (trying to) create this effect by using the dashboard. Squarespace, however, does provide helpful support through videos, email, and live chat, which is available from 3:00am – 8:00pm eastern time (Monday-Friday).

screens

3. Development/Maintenance

WordPress.com – When it comes to your basic WordPress.com plan, development is essentially nonexistent. You are not allowed to use a child theme and even with upgrades, you still can’t make any changes to your files in the backend since WordPress.com does not provide FTP access. In fact, even uploading your own theme is off limits in WordPress.com – you can only select from the (roughly) 380 themes that are provided by WordPress and certain development companies. However, you can edit the HTML of an individual page, and then use an inline style to make the change that your editor wouldn’t otherwise provide.

WordPress.com compensates for their lack of customization by providing automatic maintenance to your theme, so there isn’t any need for running updates and installing new software – everything will be kept up to date on its own.

WordPress.org – WordPress.org provides a dynamic environment for development – it supports FTP, themes, child themes, and allows you to modify your HTML, CSS, and PHP files without even leaving the site. With WordPress.org, you can take an existing theme and use a child theme to completely modify your website’s appearance.

The downside to this freedom is that you’re on your own when it comes to updating plugins and themes. Also, as a theme upgrades to a newer version, it’s possible that your child theme may become obsolete. This is why many web design companies charge maintenance fees for a WordPress.org platform.

Squarespace – As mentioned earlier, Squarespace allows for site-wide custom CSS and CSS injection, but this does not allow you to style a particular page. There are some workarounds for this problem – for example, you might want to get rid of a sidebar, and then realize that your template only allows for sidebars on pages that are classified as “blogs”. The solution, therefore, is simply to change the pages that you want sidebars on into blog pages.

However, Squarespace does not support FTP or file editing via the backend, which can turn development and design into somewhat of a pain. By enabling Development Mode, you can develop your own template to create your specific style and alignment of elements, but you will need to create your template from scratch as Squarespace does not support “child themes” like WordPress.org does.

4. My Personal Account

Overall I was disappointed with Squarespace. Regardless of the template, I found the on-page editor to be tricky to use and frustrating. Here are 3 examples of things that didn’t make sense to me:

Command + z only works when you’re acting inside of a specified block of content (i.e. when you’re typing in a text area), but not when you’re moving that block of content around the page. For example, if I move a block of content (the two paragraphs about Squarespace) to the outside of the page by mistake,now everything is shifted to the left side of the page. And if I didn’t save recently, I have to try to find a way to recenter the content, which can lead to more mistakes for a beginner. Besides that, the content is also out of order.

2. You can insert images, but not side-by-side. Even though Squarespace is known for being a drag-and-drop interface, you really can’t drag and drop things wherever you want on the page. In fact, your freedom to customize the page organization is mostly dependent on whatever template you choose. So if I really want to place images next to each other, I will need to create a single image in photoshop or illustrator with the images just as I want them and then upload that file. This is actually an advantage for graphic designers, but a disadvantage for developers and most likely for the average user. (Also it’s bad for SEO).

3. Drag and Drop doesn’t work as expected inside of a specified block of content. For example, I notice on my homepage that the image, block of text, and contact form have too much white space in-between them. It would make sense to allow the ability to adjust the white space between two elements that are both in the same block of content. But when I try to move the image closer to the text, the only option that I have is to place the image in the upper-left-hand corner of the paragraph, where I can’t control the padding and it doesn’t respond the way I’d like it to.

So if I’d like to achieve the effect that I was originally going for (less white space in-between the image and text), I’d need to assign custom CSS to the image and then use margin-right: -90px, which is bad because it causes overlap when the page responds.

Squarespace does provide good support through their online chat and email services, but it fails in the area where it claims to separate itself from other the content management systems, which is allowing a user to design a website without prior knowledge of development. Sure you can design a site by using whatever template you select, but in that case you might as well use a WordPress.com template (because it’s free), unless the template on Squarespace is more specific to your photography or graphic design style.

Between WordPress.com and WordPress.org, .org is usually the better option. If you don’t care as much about customization, are happy with the available themes, and have lots of money to spend, then WordPress.com is a good solution. Some popular clients of the .com VIP plan include NBC Sports, CNN, UPS, Time, and Dow Jones. But if you’re looking to write a theme from scratch or make adjustments to an available theme, WordPress.org is by far the best option.

The setback to .org is that maintenance can become an issue, but like anything else, staying organized and up-to-date depends on the effort that you put into it. There really is a plugin for just about anything – even for maintenance, and plugins create workarounds for whatever knowledge you might lack in coding (saving time in the process). WordPress.org is usually the best CMS of the three.

Best Tutorials for Customizing WordPress Themes

ori

After researching this topic, I have learned that there are two ways of creating a custom WordPress theme:

– writing a custom theme from scratch
– creating a child theme

I have yet to try these methods, but I have found that there are great tutorials that teach both styles. Here are the five best tutorials for customizing WordPress themes.

1.) How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

The first tutorial that I found was written by Ian Stewart in 2009. The tutorial walks you through a 12-step process using thorough descriptions and explanations for each step. Stewart, for example, will give you the code for the HTML structure and then explain the various classes for each tag / how they create your desired structure. Rather than just copying and pasting the code into your text editor without really knowing why, you’re given a good explanation for each step throughout this tutorial.

If there’s any drawback to this tutorial, it’s that it was written nearly 7 years ago, so it’s hard to know if all of this code is still valid, considering how fast things change in website design.

2.) How To Create and Customize a WordPress Child Theme

This tutorial begins by saying:

“When trying to make changes to a website, a staggering number of people opt to edit their theme directly. This means that they are changing or adding files in their current theme’s folder, which creates a number of problems.”

The greatest of these problems is that any modification made to the theme via direct edit will be lost once the theme is updated by the developer. If the user is not able to keep their theme up to date, then their security can become at risk.

A better option is to create a child theme, which allows you to make a number of changes to a website without touching the original theme files.

The tutorial goes on to explain more about child themes, such as how they relate to a parent theme and how they have the ability to change its style, function, layout, and template. You can customize a parent theme beyond recognition just by using a parent / child theme relationship.

Another advantage to using child themes is its simplicity – you only need a folder, style sheet, and a functions.php file.

But using a child theme isn’t always the best option. If you only want to change something minor on your website, such as a color or font, it’s probably better to use a CSS plug-in. Child themes are better for large changes like design overhaul and multiple template changes.

Like in the previous article, the author provides you with the code and then give a thorough explanation for each step. However, since this article was written in January 2016, you can rest assured that everything is current and up-to-date.

3.) WordPress Theme Tutorial – Youtube Playlist by LearnWebCode

One of the most important things when looking for a Youtube tutorial is how well the instructor communicates. Since none of the information is written down, poor communication becomes a problem with a video series.

This tutorial by LearnCodeWeb does a good job of providing thorough explanations in plain English. The tutorial currently has 286,882 views and 2212 / 2252 likes (98% likes), and based on the reviews in the comment section, it seems to be doing a good job.

LearnWebCode is said to have “awesome language skill” and is a “gifted teacher.” Obviously there is no guaranteed response for your questions on his tutorial series, but some of the questions have been answered by other users.

4.) WordPress 101: Create a Theme From Scratch – Youtube Playlist by Alessandro Castellani

This tutorial by Alessandro Castellani also has a very high rating with 809/821 likes (99%) and over 65,000 views on the first video in the playlist.

There are 22 videos in total, which cover everything you will need to create a custom WordPress theme. However, you will need to have a basic understanding of HTML, CSS, Javascript, and PHP to begin.

Also, as you may have noticed by his name, Alessandro is from Italy, so his accent can be a bit distracting. But his knowledge is excellent and he has been described as “an amazing teacher” by viewers.

5.) How to Create a Child WordPress Theme

In this article for WPmudev by Daniel Pataki, you are provided with reasoning for child theme usage and a step by step process with explanations.

There are also explanations on child theme mechanics (how child themes actually work), notes/instructions from theme makers, and a bit on modifiable functions.

This is a fairly short article but it’s direct and to the point, and it’s nice to have something directly from a WordPress developer with years of experience.

5 Articles On The Best Free WordPress Themes

It’s easy to find a list of free WordPress themes on the internet, but finding an article that objectively ranks their features and functionality is a bit more difficult. In order to spare you some time searching for these articles, I have done a bit of research myself and have provided a summary of the best five articles about the best free WordPress themes on the Internet.

1.) 50+ Beautiful & Free Responsive WordPress Themes to Build Awesome Websites 2016 by Colorlib

This article starts out by explaining how users love WordPress themes because they’re easy to set up and can be readily used for blog, personal, corporate, and portfolio purposes. Of course, because of their increased popularity, high quality WordPress themes have become harder and harder to find. That’s why Colorlib has created their top 50 free WordPress themes and has included their reasoning for why these themes are on the list, for example because of their style, plug-ins, and other included features.

codeinwp_post.d0dl8of84w840wooow804ow4o.26qeyncemmo0w4w4sgokogcgw.th

2.) 40+ Best Free WordPress Themes for 2016 by Adelina Tuca

Adelina Tuca explains how bootstrap has become the most popular framework for front-end web development, as it provides a free collection of tools for creating websites and web applications. Bootstrap lets you utilize HTML, CSS, and Javascript to develop a responsive website that can fit mobile / smartphone sizes.

In the past year, however, this framework has been expanded to include smart watches and TV screens, which means that WordPress themes now need to take these sizes into consideration. The list provided in this article includes the themes that include these changes, and provides a description of each of their unique styles and features.

3.) 96+ Best Free Responsive WordPress Themes 2016 by Fresh Design Web

FreshDesignWeb suggests searching for the best responsive WordPress themes available on the internet when looking to create your website. It states that you will most likely be inspired by a website for a corporation/business/blog in your line of competition.

It goes on to describe each theme in detail, explaining what the style says about you and your product or business, and what features and plug-ins are included with each theme. Some of the descriptions are shorter than others, but this is still an incredibly thorough list and is well worth your time to read.

4.) 47 Best Free Responsive WordPress Themes 2016 by Designs Crazed

Designs Crazed observes that WordPress is the most popluar CMS of this generation, with most frameworks enabling browsing on tablets, smartphones, laptops, and more. This article by Designs Crazed includes frameworks that support these platforms and also includes those that support browsing on androids and IOS.

The list also takes readability and well documented website code into consideration. Themes built specifically for magazines, portfolios, eCommerce, fashion, travel, corporate, and bbpress forums are all exemplified throughout this article.

5.) 53 Best Free WordPress Themes 2016 by Brenda Barron

In this article for AThemes, Brenda Barron points out that free themes can be risky because they aren’t always well supported, and they might be created by inexperienced developers.

Therefore, this article focuses on high quality designs that also offer tangible support. Like in the previous articles, Barron also provides an explanation for each theme’s unique style and features, and what that says about the owner of the site.

While these articles all contain links and descriptions to high-quality, free WordPress themes, there are other places that contain just lists without any description. Here are two more sites that contain lists only:

WPExplorer
ThemeIsle

Personally, my favorite theme for an eCommerce business site is Storefront because of its visual simplicity and direct incorporation of the WooCommerce plug-in. Storefront was developed by WooThemes, which makes it specially designed for eCommerce purposes. It has a lean and extensible codebase, which also makes it easy for developers to customize and extend.

That ends my collection of articles on free WordPress themes. In total, my collection includes over 300 free WordPress themes, many that are described in detail in each of their respective articles!