Blog - Cosmic Whispers Design

Customize in WordPress

I recently had a really great question on an editor’s group I belong to. The questioner is managing her own WordPress site, which is great, and should be easier than it is, I think, but changes aren’t always visible to all users, I’ve noticed.

When Features Move . . .

The questioner just wanted to change the copyright year for the content on her site, that year or set of years that you often see at the bottom (the footer) of the site layout. Unfortunately for her, WordPress had made a change over the last year or so, I think it’s been, to move a lot of layout settings to a new feature called Customize.

Customize is nice because it shows all of the theme’s features and functions (menus, widgets, color options etc.) in one place, while also showing a mockup of what the site looks like (you can see what your page looks like with the new settings before making those changes visible to the public—but you can’t change the content of pages or posts in this space). This is a feature that gets closer to what a page builder or visual composer tool can do, where you can edit all of a page’s content while looking at it as if you were a visitor rather than using a behind-the-scenes editor screen.

If you’re a WordPress user who set up a static CV-type site and then didn’t make changes for some time, you can end up missing out on any announcements telling you that customizations would be going to a new “system.” In the case of our questioner, I just gave her the path on the WordPress dashboard to get to Customize (Appearance/Customize), and she figured out the rest by going through the options on the left panel. Problem solved!

The Challenges of Evolution

As WordPress has evolved in the past several years, I have noticed it building up individual features (widgets come to mind) and then finding them a bit clunky for non-geeks to work with. I see them slowly working their system closer to some of the drag-and-drop page builder content management systems like SquareSpace or Wix. My guess is that the downside may be a loss of flexibility for theme designers and users looking to make specific customizations that might not be accommodated by a system that “assumes” too much to start with.

I still like the overall balance of ease-of-customization and customization possibilities with WordPress, but I am also curious about what we might lose in their evolution toward what looks to be a full visual composer format. I like to learn new systems, though. 🙂

We shall see!

Squarespace vs. WordPress

Visual Design

I’ve been working with the WordPress.org content management system to design websites since at least 2012. I began with my own and my husband’s jewelry site. I’ve been happy with the ability to control some of the tech aspects without having to learn PHP code to design from scratch. After I discovered Studiopress premium themes, I had plenty of clean, well-designed sites to choose from (the quality of free themes varies too much). I also found that I had more choices and control by using the .org version of WordPress and setting up my web hosting and domain registration at other locations.

I stayed away from WordPress.com because a) “free” came with ads I had no control over, and b) fewer themes and plugins to work with. The business premium version (commerce-equipped) is rather pricey for what you get in my opinion, because you still have to have a certain amount of geek to you to use the back end features to create page layouts and edit content. You are better off comparing prices for different web hosts, picking one, and then using the WordPress.org software as your basic website management system. Most web hosts make it easy to install WordPress.org for your website.

Page Builders

But WordPress is not the only content management system on the planet. There are simpler ones called “page builders” that make it a bit easier to make changes to the site without all that extra “backend” stuff. You just have to pick a plan that has some of the features you need (security enhancements, search engine analytics, ecommerce/shop features, photo galleries, etc.).

Some page builders are better than others, though (have more features, easier to use). Weebly and Wix are common page builders. I haven’t been that impressed with the options available or the quality of the layouts for either one of these, but some folks swear by them and some web hosts use Weebly in particular as a basic website builder for their customers. You’ll just see very simple layouts and not as many choices for colors or site feature layouts.

Separate page builder systems are also available to work on top of WordPress to make it easier to edit pages while you can see the final layout at the same time (a “visual composer” view of things). Sometimes these products are plugins, and sometimes they are theme framework systems.

And speaking of page builder-style systems, WordPress is moving swiftly in that direction themselves with their new block editor, which came out a year or so ago, I think. The “blocks” of various sizes and types and can be nested inside of each other to make groups of elements, very much like traditional page builder systems. But you still have to play with these features in a separate editing screen, except for a few things on the home page.

I have been finding that some of my site design clients get overwhelmed with WordPress, though. The new block editor adds even more pressure to figure out block layouts for text and images or product descriptions and testimonials. WordPress has plugins now that offer “readymade” layouts (Atomic Blocks is one), but users can still find the system a bit much to keep track of.

Squarespace

Since I find other page builders too restrictive and lacking in aesthetic design, I thought I’d look at one that has an excellent reputation among artists—Squarespace. I’ve always been impressed with the beauty of the layouts when I see that someone has used Squarespace, but I wondered what restrictions there might be to this system.

Squarespace is like WordPress.com in that it is both a content management system and a web host at the same time. You can’t go over to GoDaddy or Hostgator and get a Squarespace website (but you can get a WordPress.org one, though). Squarespace is a one-stop shop (except for website name registration). This is simpler, of course, but not necessarily cheaper. WordPress.com offers some more features for a $25/month ecommerce business plan than Squarespace does for the same level ($26/month).

Editing text is easy to do right on the displayed page

The main advantages of Squarespace seem to be the beauty of their theme layouts and the ease of customizing right on the page as your customer would see it. Insert new images, add or edit text blocks without going to a separate screen. You still don’t have as many theme or plugin feature options as the whole WordPress.org world, but it’s a lot less complicated to work with. I can see that my tutorials with Squarespace will be shorter and simpler for clients. Also, updates to the system are invisible; you don’t need to make a point to manually update separate themes or plugins, for example, because Squarespace owns all the parts.

So, WordPress.org for some cost saving options and lots of control over all aspects of your site; Squarespace for a one-stop site design space with automatic updates and an easier editing interface.

I won’t be abandoning my WordPress.org home since I want the flexibility that the system provides. In a budget pinch, one can also use something like GoDaddy’s basic page builder with a short tutorial. I can see using Squarespace as a more aesthetically pleasing option for clients who want an easier way to take care of their own sites.

Let me know what your favorite website building tools are. I’d love to know!

Atomic Block Layouts

Visual Design

I know some folks are still yearning for the simplicity of the classic WordPress editor and maybe even the use of widgets to create containers to put bits of content in (I always found widgets a bit awkward and restrictive depending on the theme).

With the new “Gutenberg” block editor, I’m slowly discovering a new kind of simplicity that restricts the number of external plugins I have to use to create different content layouts. I can use special layouts to put structures like testimonials, team members, media and text combinations or product/service descriptions directly onto a page. Granted there are plugins with fancier features and premium goodies, but I’m liking the simplicity of these layout alternatives, which can be simply added to the page or post itself.

Atomic Blocks

In order to take advantage of the new WordPress block editor functionality and extend it beyond the very basics, we do still need one plugin. It’s called Atomic Blocks, and it manifests in a couple of areas in the editor interface. After you install and activate Atomic Blocks, a whole new collection of blocks appears in the basic block library.

In the Block Library

The basic block library is what you access whenever you hit the plus button. WordPress has some basic blocks in this library, and other plugins have added their own block functionality. Just hit the encircled + in the top left of the WordPress editor for a page or post, or where they appear at the top or bottom of another block when you move your cursor around.

The preset blocks are organized into categories (not always that intuitive, by the way, so look around), and the ones you used recently get into the “Most used” section automatically. When WordPress first introduced the block editor, there weren’t many of these, but plugin developers have created their own to make it easier to insert functions (like Ninja Forms, for example). By the way, I created the above side-by-side screenshot display using a block called . . . “Columns”! I’ve been struggling to build tables (there’s a block for a traditional table with a header row, also) for several years with the classic WordPress editor (even the plugins weren’t that great). It’s so nice to have a basic functionality like this more easily and freely available, and also able to adjust to different screen sizes.

Atomic Blocks in the Library

Here you can see the AB Layouts function button (which is also at the top of the editor screen—more on that in a minute), along with a number of individual functional blocks. Note that each of these is focused on an individual structure or function; for example, the AB Testimonial just gives you an individual block to put one testimonial in—it doesn’t structure multiple testimonials into a group display or slide show.

This set of block functions allows you to build truly customized layouts, starting with the AB Container and then adding other blocks inside it. So you can build your own testimonial layout if you want to explore AB Blocks’ nesting capabilities. I also like being able to make buttons automatically. I used to have to do my own HTML to create button shapes and sizes.

AB Layouts Selector

Layouts allow you to let the AB people build some common nested groups of blocks into preset layouts (they keep adding more when they update the plugin, I’ve noticed). Just choose either the Layouts button on the top bar of the WordPress editor screen, or hit the plus symbol and choose AB Layouts from the Atomic Blocks section. The Layout Selector has three tabs: Sections, Layouts, and Favorites. Favorites is empty until you click on the heart at the bottom level of a layout, when that layout will be added. Below is a three-image overview of the Sections tab first, then more specialized layouts in the Layouts tab.

Each of these layouts has settings that show up in the right panel of the WordPress editor to help you customize the functions available (like colors, column sizes, etc.). I like this system because it helps me learn how to make my own custom layouts and provides some more common possibilities without having to re-invent the wheel.

I have noticed that one can get a bit lost in the “nest” of blocks-within-blocks where clicking in just the right spot to get the controls of a block becomes difficult. Keep in mind that you can always go to a specific level in a nested group of blocks by clicking on that level in the breadcrumb trail at the bottom of the WordPress editor.

Note the series of terms separated by arrows: click on one to see the top left controls for different block levels.

In the image, I selected an individual image block in the Columns block. By clicking on Column or Columns, I could move out to see the top left controls and right pane controls for each level.

What About Page Builder Themes?

Page builder themes are cool. They’ve been around as an alternative for the original very basic WordPress editor for a number of years. They give you a set of elements (like the blocks here) that are already set to look like the way the WordPress post or page will look when you view it. More intuitive, yes, but often with more restrictions (only certain sizes and shapes to fit into a group of predetermined layouts). The better ones are also not free of charge.

I don’t use free themes or page builders in any case because I like the clean code and layouts of premium theme creators. I use Studiopress themes. They have made a commitment to work with the basic WordPress interface without creating a true page builder environment. Again, I like the simplicity of their approach.

But you may not, and there are many other site designers who want something with its own page builder interface. I’ve heard lots of good things about Elegant Themes, and especially their Divi theme, which a lot of professional WordPress site designers use. Pricing is similar to what I invested in Studiopress themes (over $200US). Great if you are designing as a business and have lots of sites to create.

If you only have one site of your own to take care of, though, that kind of investment may not be practical. So if you just want to play with all the possibilities in the WordPress block editor, then AB Blocks and Layouts are an extremely cost-effective way to access block functionality. I hope my little intro has allowed you to get started if you lean in the site DIY direction.

Of course if you’d like to invest in an individual tutorial with me or want me to build your site, I’d be happy to oblige. Just let me know!

Update, Update, Update!

Troubleshooting

I’ve been doing some small-scale troubleshooting jobs for small business and nonprofit organization clients, and I’ve noticed a frustrating trend.

I get called in to look at a display problem for a website. Something seemingly small but weird, like time zone information not working on the calendar page, or images not laying out properly for a team area.

As usual, I ask for a user login to see what’s going on “under the hood.” And there’s almost always some issue with plugins or themes not getting updated.

The Client Training Piece

Although the WordPress interface is relatively friendly to non-coders and non-designers, I have detected a definite lack of education by designers for their clients after they perform their “magic” on a site. Clients are often a bit intimidated by the WordPress dashboard and all those plugins that do need updating. After a couple of years, the child theme itself may need updating as well, but if it doesn’t notify the end user, nothing will happen. Unfortunately, the original designers don’t often hang around to fix things (or they may offer to do maintenance and the client declines). Either way, problems begin to accumulate and end up getting to the point where something important (like an event calendar in my example) doesn’t work right.

That’s where I can come in to fix things, if I can figure out the origin of the error (not always obvious). Sometimes, I’m faced with a theme and/or plugin that didn’t come with the structure for reminding the client about regular updates.

Blocked Path to a Solution

In one case, I faced an unfamiliar page builder plugin that ran an entire site. Great intuitive page editing interface, but it was still at version 5.01 when the update it wanted to do was 6.01. Rather scary. In this particular case, the update required an additional fee to process, unless you had the licensing information from the installed theme framework. But that theme framework itself had never been updated as far as I could tell, and its website didn’t have any information on how to update the plugin for free. The designer had shown the client the basics of updating in the dashboard, but the theme developer never sent notification or a link on where or how to update the theme itself or some of its more powerful plugins.

While the client went to work on trying to re-contact the original designer, I tried a number of different things to fix the time zone problem they were having with their calendar, but none of my efforts worked. This was a “deep” problem, and I knew it would be dangerous to simply try to modify the underlying code of the theme itself. I made sure all places where the time zone should be set were set correctly, but the calendar still didn’t display the right time! It was a real conundrum for me, since I didn’t happen to use that particular theme framework (it was designed specifically for nonprofits).

After several weeks of experimentation, the client finally got the original designer to take a look, and voilà, all was fixed! Turned out that the theme needed a major update(!), one that included dashboard access to a number of the built-in plugins and their updates. Why the designer or the theme developer hadn’t set it up this way in the beginning, I’ll never know.

The client had no way of knowing why their attempts at updating some of their plugins never created results because there was no error message—the update just didn’t happen, and the update notification in the plugin simply continued to say that one needed a license to do the update.

Updating Setup Is So Important!

So, if you are a designer, please make sure your theme framework pushes regular updates into the WordPress dashboard for the client to activate, and that it includes information on linking to updates for included premium plugins.

Old themes and plugins are both frustrating and dangerous from a security standpoint. Let’s make sure regular updates are easy to do. Thanks so much!

The Web’s Mobile Imperative

Keeping Up with Tech

You may have heard something about being “mobile responsive” with your website design. It used to be more of an option, but now that the majority of sales transactions take place with a phone or tablet, having your website be easy to see on smaller screens is a must.

Consequences of Not Considering Mobile

I’m sure you’ve seen older site designs on your smartphone that have teeny-tiny type and force you to zoom in to fill in a form or click on a button. Kind of annoying, really. You may also have a brick-and-mortar business that does most transactions in person and may think that mobile should matter less.

Well, it does matter for every business, because with a frustrating mobile display, your online visibility will be less, and visibility to search engines is important for your visibility to potential clients, local or remote.

And if you want any payback for your effort in building that website, having Google pay attention to you does make a difference. They downgrade priority to non-mobile-responsive sites now.

How to Get Mobile Responsive

Fortunately, being mobile responsive isn’t super-hard with WordPress.

For me the best option seems to be to use either a frequently updated free theme, or a reliable paid theme (I recommend StudioPress themes—and they don’t pay me to do that. :)). Most professional themes create instructions to line up your information correctly automatically for smaller screens.

Be careful with those basic website builder features offered by web hosting services, though. They often have more basic code behind their pages that isn’t naturally mobile responsive. Some parts of the pages may work OK, but things like standard HTML tables might not adjust (I’m happy to tweak these issues if you need me!).

If you have any mobile devices, it really is worth your time to check and see what your site looks like and decide if you need some tweaking or a better theme to make the mobile transition a smooth one.

If you need any help, just let me know. 🙂

Plugin Plugs: Basics 2020

Plugins

As I go about making some changes in my sites, I see that an update is in order for my favorite basic plugins. We are constantly evolving, humans and software. 🙂

Caveat reminder: I’m writing primarily about plugins available for self-hosted WordPress.org installations. If you are on WordPress.com, some of these will not be available.

Lots of plugins are free, at least for a basic set of features, so don’t dismiss one because it has a premium version. Just keep in mind that some freemium products have more functions at the free level than others. It pays to compare. I search on the function I want and the term “reviews” to get a feel for what the “best” plugins are. Keep in mind that the quality of review sites varies; some just copy the promotional copy from the product’s site, and some have affiliate relationships that make their analysis biased. I try to get more than one perspective.

Spam Comment/Trackback Control

I used to use Akismet, which is provided by Automattic, the company that owns WordPress. You can pick whatever level of support you want to give to Akismet, or if you are just running a personal site, you can activate it for free. It actually does good work in keeping spam comments off your site. I don’t have a ton of followers and commenters yet, so I didn’t get to fully test Akismet.

I decided this month to try out a free plugin called AntiSpam Bee as an alternative to Akismet, and it has a nice, clear interface for settings. It is officially free for both personal and commercial use (no guilt trip to pay for my small businesses like Akismet). I’ll let you know if it works out for the long run.

Keep in mind that if unlike me you have lots of blog followers and commenters, you may need something more robust than AntiSpam Bee, and it may be worthwhile to pay for the service in order to get advanced management features.

Jetpack

This is a large suite of features packaged by Automattic and automatically available on their WordPress.com sites. They also offer them for free to self-hosted WordPress.org sites. I find some of Jetpack’s features useful, but most are very basic and some have weird glitches when used with certain themes, so try them out first and see how they work for you. They also offer premium enhancements for a fee.

Jetpack covers the gamut from basic security and speed features to extra widgets and comment options. Some folks have complained that Jetpack is too “heavy” (that it slows down the loading of your site content). That may be true if you just turn on everything. I use only seven of the options on my own sites, partly because I have other plugins for some of the functions. So, be selective based on your site traffic and needs; you don’t have to use everything.

In my review of plugins this year, I did consider letting go of Jetpack, but there are some features that I like to have regular access to that don’t have alternatives (like visibility options for widgets and a simple follow-by-email option that I don’t have to manage). And I didn’t notice a speed difference when using the Jetpack features I had turned on.

For an intelligent analysis of the pros and cons of Jetpack, check out Chris Lema’s article on the subject.

Analytics

Jetpack does a decent job of tracking your site visits and providing some more specific information on your site traffic, but it’s definitely basic. You can pay Automattic for a real connection to Google’s powerful and detailed information if you want to, or you can go get MonsterInsights for free. MonsterInsights pulls its information from Google (you will need to connect to a Google account and put a little bit of code into the header section of your site—let me know if you need help with that) and serves up a spectrum of information on visits, views, and sources of visitors to your site.

Forms

I like Ninja Forms. I understand that Gravity Forms is even better, but it doesn’t start with a free version, and so far, I’ve found the free version of Ninja Forms to have just about everything I need in a basic forms plugin, with the ability to edit and add fields, set up post-submission messages and payment buttons for Paypal, etc. You can also use the basic form functionality included in Jetpack for simple contact forms, but if you want to do anything else, you’ll need something more, and Ninja Forms has it.

Backup Software

BackWPup is a freemium plugin that automagically takes care of backing up my post-and-page database and all the other structures in my website on a weekly basis. I back up to Dropbox and it works great. They also back up to lots of other storage places, although some (like Google Drive) require you to upgrade to a paid version.

I also use the free version of Updraft Plus for some sites I run that do use Google Drive for storage. Updraft does save backups to Google Drive for free, but restoring a backup, although ostensibly free, takes a long time. I have a feeling that if I paid for the premium version, this would not be the case.

Caution: If you use a page layout program/theme framework that doesn’t use WordPress’s basic functionality, you may run into trouble trying to restore your site from a backup, so check with your theme framework provider.

Search Engine Optimization (SEO)

Yoost and his team, the intrepid statistics geeks at Yoast SEO, have developed a system for search engine optimization (SEO) that has quite a reputation as the go-to plugin for making sure Google sees your site and tracks it to your benefit. If you are not running a business that your website supports, this plugin is likely not necessary, but if you do have a business site (even a small one), then, yes, Yoast can help you improve its search-ability. They have a nice setup wizard and great tutorials to get you up to speed.

You don’t have to be a slave to their somewhat mechanistic perspective on writing copy, but remember that they are teaching you to write for the search bots as well as for humans.

Optimization/Caching

If you don’t have a built-in site optimizer like the one I have with my favorite web host Siteground, then try out WP Super Cache. Caching your content is important so that loading times on your site will be faster for users who are navigating around to different pages, especially if you use large images. The caching program temporarily saves up the pages you’ve already looked at and can quickly serve them up again as you go around a site.

I’ve been using WP Super Cache for several years with its basic settings. They work well, but I’ve had glitches with my theme display if I try to add more complex settings such as the ones in the CDN (content distribution network) section. Try out the different settings, but check your site before you walk away to make sure everything still works. For more on the CDN process, try this article from Cloudflare.

I’ve also had to tweak the settings for my Siteground optimizer. Check your caching plugin first when you see problems in site function or display; that’s where I have most often found conflicts.

Expanding Your Options

If you want more on plugins and other capabilities WordPress-wise, from simple widgets and themes to major features like course management and ecommerce tools, Chris Lema is my go-to guy for fair and clear comparisons of anything WordPress. He also writes regularly about lots of other cool geek and sometimes non-geek stuff. Check him out.