5 JavaScript Features You Must Know to Develop in Gutenberg

Published in WordPress.

In 2016 Matt Mullenweg told us:

I’m going to give you some homework: learn JavaScript deeply (…) because it’s the future of the web.
Matt Mullenweg (on YouTube)

I don’t know if you followed his advice three years ago, but if you didn’t, you can’t postpone it anymore. The official release of the block editor has forced many developers to get up to speed with JavaScript. The language is becoming more and more relevant within WordPress and, if we do not want to stay behind, we must improve our skills with it.

In the past I wrote a post about what you can achieve using vanilla JavaScript, without libraries like jQuery. Today I want to go a step further and explain some of the novelties that are in the new versions of JavaScript and that are shocking the first time you see them. I think it’s important that you know them, because they’re present in all new JavaScript projects (including Gutenberg, of course).

Let’s learn JavaScript with Gutenberg!

#1 – Destructuring Objects and Arrays

Let’s suppose we want to see how the interface of editing a paragraph in Gutenberg works. If you’ve read our previous posts on Gutenberg, you know we have to look at the edit component of the relevant block. In our case, this component is ParagraphBlock and the first thing we’ll find in its render method, line 127, is this:

What is all this? Well, let’s start with something easier. Imagine you have an object like the following:

Destructuring objects and arrays makes it possible to unpack values from arrays, or properties from objects, into distinct variables:

With a single statement, we were able to recover the id, title, and content of our post. And this is precisely what Gutenberg was doing in our first snippet: we pulled the attributes object, the setAttributes function, the isRTL attribute, etc. of this.props.

A little more confusing, but equally interesting, is the possibility of extracting attributes from nested objects. That is, starting from an object such that:

we can retrieve values in post as well as values in a nested object, such as id or name in author:

Now pay attention: every time we destructure an object, the variables we create have the same names as the attributes we’re pulling. This begs the question: what would happen if we want to recover multiple id attributes from different nested objects? For example, in our case, both the post and its nested object author have an id, so…

can we pull these two values out? The solution lies in aliases:

That is, we can specify the attribute we want to pull (for example, author.id) and the name of the variable that will hold its value (authorId) all at once.

Finally, let me tell you that destructuring also works with arrays:

as well as function parameters. That is, if one of the parameters in our function is an object, we can destructure it in the function definition itself:

Pretty handy, huh?

#2 – Arrow Functions

Another fairly common example. If you take a look at captions the Gutenberg image blocks, you’ll see the following on line 693 :

What is the value in parentheses? Why is there an arrow? What is that about setAttributes with curly braces inside? Argh!!

Well, let’s decrypt this step by step. When you see an arrow like =>, you just met an arrow function. An arrow function can be extremely similar to classic functions, but they use a slightly different syntax:

The main advantage of arrow functions is that they can be further simplified, making the code even more compact. For example, if your function has a single instruction, you can save the curly braces and the return keyword, since the function will automatically return the result of evaluating its only statement:

Another simplification that we can make are the parentheses in its argument list. If we are writing a function that has a single parameter, the parentheses become optional:

#3 – Spread and Rest Operators

Back to the paragraph block, take a look at line 64 :

What the heck?

Well, let me introduce you to the spread operator: ....

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Let’s start with the simplest example. Suppose we have an array with a certain number of elements and we want to put it inside another array. We can achieve this with:

With it, we are “expanding” (hence the operator’s name) the elements of one array (list) within the other (result).

This also works with objects:

Now look at the following example (which is a copy of the Gutenberg example with which we have opened this section):

If I am expanding two objects that have properties in common, the resulting object will contain the union of properties of both objects and, for every “repeated” property, it will contain the value of the object on the right. Thus, for example, the title attribute that is repeated in both objects, contains the value of the object newAttributes, while the other attributes (author on the one hand and words on the other) appear in the result with the only values they could contain.

#4 – Template Literals

Template literals are widely used in Gutenberg. You can see an example in the following index.js, line 133:

Or, even more complicated, inline 136:

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called “template strings” in prior editions of the ES2015 specification. Here you have another example similar to the first one we’ve just seen:

Now, what was happening in the second example? Basically, we are creating an object with properties whose “names” are dynamic (some use a variable, other use template literals). Let’s see this with a shorter example:

Easier than you expected, isn’t it?

#5 – Bye bye for and while

Finally, I would like to end this post with a couple of functions that are very useful for working with arrays and with which you should already be familiar. Both can be found, for example, in the block of Gutenberg columns. Indeed, I am talking about map (line 136) and reduce (line 119). Let’s see what each of them is for and how you can use them.

The map method creates a new array with the results of calling a provided function on every element in the calling array:

Basically, it’s a method that runs through all the elements of an array (that’s the for statement) and applies a function in each element (the “body” of the classic for).

The reduce methodis very similar to map, but instead of returning an array whose elements are the result of applying a function to the original elements, it returns a single value. That is, a method that allows you to apply a function to an accumulator and to each value of an array (from left to right) to reduce it to a single value. For example:

Wrapping Up

As you can see, new versions of JavaScript add constructions that allow writing code more efficiently and comfortably, but its syntax can be confusing at first. I hope that today’s post has helped you understand what’s new in JavaScript and how to use its new structures and functions.

I really like the way JavaScript is evolving, as I think it allows you to write better and more readable code (once you know how to read it, of course). What do you think? After reading this post, are you already keen to “learn JavaScript deeply” once and for all?

Featured image by Ross Findon on Unsplash.

Understanding the File Hierarchy of a WordPress Theme

Published in WordPress.

November 6, 2018November 4, 2018 by David Aguilera Themes WordPress Advanced

A couple of weeks ago we were talking about the different types of themes we can find in WordPress. There we learned all about WordPress themes: what are basic themes, premium themes, and multipurpose themes; how to customize any theme using child themes; what are grandchild themes; and also how to create a theme using starter themes and framework themes.

Since some of you contacted me asking for more information on how to create a WordPress theme, I thought it’d be interesting to talk about the file hierarchy of a WordPress theme. In this post you’ll learn the basics of understanding what a WordPress theme looks like and hopefully have all the tools you need to create your first theme.

Before We Get Started…

Anyone can draw a house on paper, but not all of us are architects. If we’re lucky, we might be able to assemble an IKEA wardrobe. But that’s it. Why am I mentioning this? Because creating WordPress themes is no different! It’s very difficult and making something beautiful and user-friendly takes time and experience.

So, in this post I’m going to teach you “everything” you need to know to create a WordPress theme with two particularities:

We will ignore absolutely everything related to the design of the theme itself and focus only on the technical part.
We’re not going to start from scratch. Instead, we’ll use the Underscores starter theme. Why? Because it doesn’t make sense to start a theme from scratch when we have a quality skeleton that gives us some of the work done. And, besides, if that’s what you want to do, the WordPress documentation itself gives you the information you need.

Underscores, a Fantastic Starter Theme by Automattic

Underscores is a starter theme whose only goal is to provide the base skeleton on which one can develop their very own theme, offering well-documented HTML templates and some additional hacks. With it, we can greatly accelerate the creation of a new theme, since a large part of the tasks we have to do to get a theme underway are already in place.

Previous Steps

Every theme must have a unique name. Mostly because all the themes you install in WordPress end up in the wp-content/themes/ directory inside their own folder (something like wp-content/themes/twenty-seventeen/, wp-content/temes/nelio/, wp-content/themes/your-theme/, etc) and so different names are required to avoid collisions. So the first thing you have to do is decide the name of your theme and set it up.

If you go to the Underscores page, you’ll see a text field called Theme Name next to a Generate button. Simply enter the name of the theme you want (I, for example, used Nelio Software), click on the button, and a .zip file will be downloaded with your settings, including prefixes for the functions you define so that they are unique (for example, instead of having a function called setup that can conflict with the same function of another theme, ours is called nelio_software_setup).

So, now that you have your starter theme ready… install it on WordPress, activate it, and let’s get to work!

Primary File

If you open the directory of your theme and take a look inside, you will see that there are several files and directories inside it. I know it might seem a lot but, believe me, its easier than it seems.

The first file we are going to comment on is style.css. As its name and type indicate, it contains the styles of our theme. But it’s also the file that contains some relevant meta information about our theme (hence it’s the first file we need to look at):

As you can see, this file starts with a fairly long comment that seems to follow a special format. Indeed, it follows a special format. From lines 2 to 11 we see a set of Attribute, Value pairs where different properties of the theme are defined: its name, its URL, its author, a description… By default these fields are filled with Underscores information, but you are free to change them to whatever you like.

If you are wondering what this information is for…. well, it’s the one shown on your WordPress dashboard, in the Appearance » Themes section:

Meta información del tema Underscores tal y como la vemos en el escritorio de WordPress.

Functions File

Themes may also define a function file called, of course, functions.php. Normally, in this file we define the typical hooks needed to enqueue stylesheets and scripts, as well as any additional helper functions that we might need. Basically it behaves like a plugin: if the theme is active, the file is automatically loaded and whatever is defined in it becomes available.

If you take a look at the functions.php file that Underscores has created for you, you’ll see that a lot of things are already there. Let’s look at some examples of what it includes:

nelio_software_setup. This is a function that is invoked right after the theme has been loaded into WordPress through the hook after_setup_theme. In it the theme defines several properties of our theme such as, for example, the support for featured images in blog posts, a navigation menu, the internationalization domain, etc. In my opinion, the most interesting thing about this function is that it is defined within a conditional block: this way, if someone creates a child theme to customize ours, they might be able to redefine this function to adapt it to their own needs.
nelio_software_widgets_init. Underscores also shows us how we can register sidebars, which are locations where one can add widgets. As you can see, it’s as easy as invoking the register_sidebar function during the execution of the widgets_init action.
nelio_software_scripts. This is one of the most important functions of the theme, as it’s in charge of enqueuing the scripts and styles required by our theme.

Nothing fancy, right?

An interesting point that deserves special mention is the require statements that appear at the end of this file. Basically, these statements are loading some files from the inc/ subdirectory, such as inc/custom-header.php or inc/customizer.php, and they serve as a simple example on how to organize our code and keep it clean and tidy.

Obviously, nobody forces us to put absolutely all the functions and customizations we want in functions.php. If we want to, we can organize ours in smaller files for more specific purposes and then require them as needed, keeping in mind that the entry point is this file.

Templates

Okay, so far we’ve seen the basics of a theme: how to set its metadata in style.css and how to configure it and define any helper function we might need in functions.php. But we’re supposed to be creating a theme so… Where do we define HTML templates? How do we make things look one way or another?

The answer to this question can be found in the other files that lie in the root directory of our theme. Just take a closer look and you’ll see most files are named so that you can easily guess what they do:

index.php is the default template and it’s used to render any content from WordPress, unless there’s a more specific template for that content.
comments.php is the template that renders the comments section in our blog posts.
single.php is the template we use to render a blog post and, therefore, it overrides index.php for blog posts.
page.php is similar to single.php, but in this case it applies to pages.
and so on and so forth.

Nothing complicated, right? If you are curious about all the templates you can create and their names, I recommend that you look at the Codex page where they explain how to create a theme along with the page where they explain the template hierarchy in WordPress.

What’s inside a template in a WordPress theme? Well, they basically have what I’d say you’d expect: HTML to define the layout mixed with some PHP code to pull the actual data we want to render. For example, if we look at the single.php file (which is used for rendering blog posts), we’ll see the following:

Let’s see what’s happening in each line:

The first thing we see in line 10 is a call to the get_header function. This basically loads a template with some common HTML tags, such as html, head, title, body… as well as any other common parts of our website, like a header or a navigation menu. We’ll talk about it later.
Likewise, in line 37 we see a call to get_footer which, as you can imagine, serves the opposite purpose. That is, it closes any tags we opened in the header and adds some footer info.
Lines 13 to 33 do all the magic. On the one hand, we see that content will be surounded by two tags (div and main) with some special classes and IDs, and then we have some PHP to load the actual content.
Line 17 loads the WordPress loop.
Line 20 loads the template in template-parts/content.php, which contains the required HTML for rendering a post (that is, the title, the featured image, the content, and so on).
Line 22 adds some navigation links.
Line 25 loads the comments that this post might have via the function comments_template, but only if comments are enabled, of course.
Finally, line 36 adds the sidebar we defined in functions.php.

Header and Footer

In the root of our theme we also find the files header.php and footer.php. As I have already told you, they’re used to “open” and “close” the resulting HTML page we’ll send to our visitors’ browsers.

This is the header:

and this is the footer:

Again, there’s nothing fancy in here. Just some HTML code and a few PHP calls. But, anyway, let’s discuss the most relevant points of each file briefly:

Any tags opened (but not closed) in header.php are closed in footer.php.
One of the most important aspects in header.php is the call to wp_head, at line 20. This call must be done if we want plugins and the theme itself to be able to enqueue their own styles and scripts to the page.
The rest of the code in header.php defines the portion of our website that’s common to all pages, such as, for example, the heading image or the navigation menu.
footer.php is similar to the header, but in this case it loads common code that appears at the end of all our pages.
Just as with header.php, the footer.php file calls a special function named wp_footer. It’s very important to have this function in our theme, or the plugins and the theme itself wouldn’t be able to add their own scripts at the end of the page.

Good Practices

Finally, let’s talk about some good practices you need to follow if you want to create a perfect theme.

Enqueue styles and scripts. None of the templates included in Underscores adds a script or a style in the HTML code. Instead, they rely on the wp_enqueue_script and wp_enqueue_style functions. You should follow this approach too.
Theme settings. Even if we create a simple theme, chances are we’ll want to add some customization properties that the user should be able to tweak. If you want to do that, don’t reinvent the wheel and implement you own settings screen, but use the Customizer’s API.
Escape and Sanitize. That’s web design 101. It’s very, very important that all the data you print on screen is properly escaped and that any data you collect from the user is properly sanitized. If you don’t know what I’m talking about, read WordPress docs on this topic.
Internationalization. If you want your theme to be used by anyone, you have to make sure it can be translated. So get used to WordPress internationalization functions and use them from the very beginning. If you do so, your theme will be translatable in no time!
Theme Check. There’s a special plugin named Theme Check that checks the quality of your theme. Use it while developing a theme and make sure all the tests it runs pass. This is the plugin that the Theme Review Team in WordPress use so… why wouldn’t you want to use it too?

Wrapping Up

WordPress themes follow a fairly logical and user-friendly structure. Being PHP code, you can organize the code as you please, although there is a set of files that WordPress expects to be there for everything to work. I hope that today’s post has helped you to understand this structure a little more and, above all, to appreciate the usefulness of a starter theme like Underscores to create your first theme.

Featured Image by Joe LIU on Unsplash.

Learn Everything You Need to Know About the Different Types of WordPress Themes

Published in WordPress.

October 16, 2018August 31, 2018 by David Aguilera Themes WordPress Essentials

WordPress Themes allow us to completely modify the appearance of our website. By installing one theme or another and configuring it correctly, our website will be able to convey specific feelings, fit with our personal image, and stand out from the competition.

For example, a couple of years ago, we had a WordPress blog in Spanish called WPrincipiante. The theme we used back then was completely focused on the blog content, and so the front page contained our blog posts:

Shortly afterwards we decided it was time to merge all our websites and blogs into a single domain: neliosoftware, and this is what we have now:

Nelio Software Front Page 2018 — This is the front page of Nelio Software’s website in 2018

A simple page where we present our company, our customers, and our services. But we still run the blog, and you can still find it in our website:

Blog Posts in Nelio Software's Front Page — Some blog posts in Nelio Software’s front page.

So, even though in this case not only did we change the theme, but also the domain name of our original blog, you can see how much of a difference the theme itself makes. This new website looks completely different to what we had before, since it now focuses on our services.

In this post we will look in depth at the different themes that exist in WordPress and teach you everything you need to know about them so that you can configure and adapt them to your needs.

Basic WordPress Themes

Let’s start with the simplest concept of all: the WordPress theme. As I just mentioned, themes define the appearance of our WordPress site. As stated in the official documentation, a theme is a set of files that define the HTML templates that will be used to render the contents of our blog, along with other typical assets of any website such as stylesheets, JavaScript files, etc.

The default WordPress theme is Twenty Seventeen. It’s a simple and functional theme, ideal for running a simple blog with three or four simple pages (you know, contact page, privacy policy page, etc).

Screenshot of the Twenty Seventeen WordPress Theme, the latest official WordPress theme.

Some of its features include a front page with multiple sections, multiple sidebars, etc. If you want to see this theme in action, just take a look at WordCamp Barcelona 2018 website. As you can see, it’s an elegant, simple, and functional design.

Obviously, the set of options and functionalities that we find in a theme depend on the theme itself. Some themes are very powerful and versatile. Others are simpler and ideal for a niche. So it’s all a matter of finding the one that best suits your needs. There is a huge amount of themes in the WordPress.org theme directory, which can be accessed directly from the WordPress Dashboard itself:

Available Themes in the WordPress Theme Directory — Themes in the WordPress Theme Directory can be browsed from your Dashboard.

All the themes you’ll find here are free themes you can easily install and use on your website. If you’re interested in choosing one theme from the officlal repo (or anywhere else, actually), please make sure it’s well maintained by the developer, that other users are using it, and that support is active.

Premium Themes

Another option for finding an outstanding WordPress theme is to take a look at premium marketplaces. Premium themes are, in essence, the same as the ones found in WordPress.org, but with some additional guarantees: since you’re paying for them, you can expect (and demand) support and updates from the developer.

As I mentioned a few days ago in this other post, there are many marketplaces where you can find and buy a premium theme: Themeforest, Template Monster, Elegant Themes, Studiopress, iThemes… Just take a look at those websites and find the theme that better suits your needs…

Angle Premium Theme — An example of a premium theme is Angle, which can be found in themeforest.

One common feature among premium themes is the fact that they’re Multipurpose Themes. A multipurpose theme is just a regular WordPress theme with TONS of features, so that you can use it for just about anything. These themes are very useful for someone with a tight budget who wants to make sure they’ll be able to do whatever they want with their theme (pricing tables, product presentation, feature listing, testimonials, team… you name it). However, there are two big drawbacks:

Complexity. These themes include so many features that there’s a big change you won’t use some of them. This means you’ll be using a heavy and complex theme, which might generate some performance issues.
Theme Lock-in. The biggest risk we face with this kind of themes is that we start using all its features and suddenly, when we want to switch the theme, we realize we can’t because we depend on all its features. Multipurpose themes make it easy to get started, but they also make it very difficult to move forward.

Customization and Child Themes

So far we’ve been talking about regular themes, but the WordPress theme ecosystem is much broader and more complicated than that. There are some peculiarities in the WordPress theme arena you need to know to understand exactly how they work. And among these peculiarities is the notion of child themes.

As you know, one of the great advantages of WordPress is its open source nature, which means nobody can stop you from taking a look inside your theme and modifying it as you please. So, for example, if you want to embed a tracking script in the header.php file of your theme, you can do it. If you want to modify the template used to render a blog post, go ahead and do it. And if you want to add a new sidebar in the footer of your website, it’s also within your reach. All this is possible but… did you know that all these tweaks can disappear with the blink of an eye?

When there’s a new version of your theme, WordPress downloads it and replaces your current theme with the updated version. This means that any changes you made in the previous version will just vanish with the update.

To avoid this problem, WordPress introduced child themes. A child theme is an “incomplete” WordPress theme that depends on another theme (the parent theme) to work. The idea is very simple: instead of tweaking the files of the original theme, you create a new theme in WordPress and set it as the child theme of the one you want to tweak. Then, you simply redefine the files you want to tweak in the child theme and rely on the parent for everything else. This way, when there’s a new update, WordPress will overwrite the parent theme, but your tweaks will be safe and sound in the child theme.

Grandchild Themes. Is This a Thing?

Now that you know about child themes you might be wondering: is it possible to create a child theme from another child theme? And, if it is, would I ever need them?

Short answer is no. WordPress only allows a parent theme and a child theme. You can’t create a child theme of another child theme (that is, a “grandchild” theme). But, as we shall see in a few paragraphs, they’d be actually quite useful… and that’s why there are some formulas to create grandchild themes.

Starter Themes and Framework Themes

Now that we know what WordPress themes are and how we can adapt them, it’s time to spend a couple of minutes talking about how to create a theme. You can obviously create a new theme from scratch, but I recommend you don’t do so and, instead, you use either a starter theme or a framework theme. Let’s see what each of them are.

As we have already seen, a theme is a set of files (templates, stylesheets, scripts, and so on) that modify the appearance of our website. Creating a theme from scratch means that we have to prepare the structure of directories and files to make everything work. And this is time consuming and quite repetitive.

A starter theme gives us a more or less functional skeleton from which to start to create our own theme. There are many starter themes available, but one of the best known and most valued starter themes you can find is Underscores. This theme is totally minimalist and is not intended to be used on any website as it’s distributed. Instead, you’re supposed to use it as the basis for creating your very own theme.

Underscores, a Fantastic Starter Theme by Automattic — Underscores is a well-documented, simple, and fantastic starter theme that you can use to create your very own WordPress theme.

Another option for creating themes in WordPress is the use of framework themes, which rely on the mechanism of parent and child themes. In essence, a framework theme is a fully functional theme (i.e. we can install it on any WordPress site and it will work perfectly well), but its purpose is to serve as a basis for a child theme. The child theme will take advantage of the functions and features of the framework theme to adapt it and create something unique.

An example of such a paradigm is the Genesis Framework by StudioPress. As you see in the following screenshot, it’s a simple and elegant theme that we can use in any web site, but its real potential lies in the fact that it’s presented as a framework: its architecture and design encourage developers to extend and adapt it to create new themes by means of child themes.

If you take a look at the StudioPress website, you’ll see that there are plenty of themes based on Genesis. They are all unique, but their internals are quite similar, as they’re based on the same parent theme.

Themes that use the Genesis Framework — There’s plenty of themes that use the Genesis Framework.

The great advantage of this type of themes is the ease with which you can switch between them: since all child themes that use the same framework are essentially the same theme (they are still an “adaptation” of the framework theme), changing themes that use the same framework is extremely simple.

But not all that glitters is gold: these kind of themes have a big drawback. Since we are already using a child theme, we cannot create a child theme for this child theme to adapt it as we want… so, if we really wanted to do it, we would be forced to implement some workarounds to create “grandchild themes”. But this is a topic for another post…

Other Types of Themes

Finally, let’s briefly comment on three other types of themes that, although not essentially different from the previous ones, have some characteristics that make them unique and special. These are themes with page builders, custom themes, and compatibility themes.

Themes Featuring a Page Builder

Themes with a page builder are themes that include a user-friendly tool to build pages visually without any coding skills required. A well-known example (loved by many, hated by others) of this type of theme is Divi:

Divi Theme — One of the greatest features about Divi is its built-in page builder.

Custom Tailored Themes

Another option that we should consider when searching for a theme in WordPress is the possibility of asking a professional team to design a custom theme for us. In this post we have already seen how we can do it ourselves (using starter themes or framework themes), but the result we would get would probably look slightly worse than what we’d get from a professional.

Our theme, for example, was designed and created by Silo Creativo, and I hope you agree with me: it looks pretty gorgeous!

Silo Creativo's Website — Just ask a professional to help you create your next gorgeous theme. You won’t be disappointed.

The great advantage of this type of themes is that the result is completely unique and perfectly tailored to your needs, so the loading times you can get will probably be better and the end user interface will be much simpler. But the cost is a clear downside: making a custom theme is always more expensive than using one that already exists… but in my opinion, if you have the budget, it’s worth it in the long run.

Themes Compatible With WooCommerce, BuddyPress, BBPress, and so on

If your website is more than just a website with a simple blog and includes things like an online store with WooCommerce, forums with BBPress, or even a small social network with BuddyPress, then you definitely have a complex WordPress installation and therefore you need to make sure that the theme you choose is compatible with all this. If you don’t, well, you risk your site will look like crap.

Storefront, the official WooCommerce Theme — Storefront is the official WooCommerce Theme.

Many of the themes you’ll find out there (both free and premium) are compatible with WooCommerce and other popular plugins, but many others aren’t. So if your website uses any of these components, please make sure the theme you choose explicitly states its compatibility with them.

Wrapping Up

The world of WordPress themes is more complex than it seems at first: basic themes, pemium themes, child themes, framework themes, starter themes… In this post we have learned what all of them are and how we can use them. I hope all the information I shared today helped you understand a little bit more how WordPress themes work!

Featured Image by Victoria Bilsborough on Unsplash.

All You Need to Know About WordPress Themes

Published in WordPress.

August 23, 2018August 3, 2018 by David Aguilera Themes Tips WordPress Essentials

WordPress was born with one mission in mind: democratize publishing. That is, its goal is to make it easier for anyone to create, publish, and share content on the web, no matter what skills you have (or lack) related to programming, HTML, databases, and so on. And I think you’ll agree with me that, so far, WordPress has been quite successful at it: 30% of all the sites on the Internet are made in WordPress, making it clear that anyone with time and desire can publish content on the web. And thanks to its extensible architecture with plugins and themes, WordPress made it possible that anyone could create the site they wanted and tweak it as they pleased. Or couldn’t they?

Can you not lol by interstellardesignz — Damn! That’s quite ugly, isn’t it? Picture by Interstellardesignz on Giphy.

In today’s post I’d like to talk about WordPress themes: where to get them, how to set them up, and everything you should consider when choosing one for your website. Whether you’re starting a new website or you want to give your current website a new look and feel, you must know all the details I’m about to share so… let’s get started!

WordPress Themes

Let’s start at the beginning and let’s do it by reading the Codex: what the heck is a WordPress theme?

Fundamentally, the WordPress Theme system is a way to “skin” your weblog. Yet, it is more than just a “skin.” Skinning your site implies that only the design is changed. WordPress Themes can provide much more control over the look and presentation of the material on your website.
A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files.

In essence a theme defines the way in which the contents of our website will be shown to our visitors. Style, layout, graphics, organization, types of content…. all this is usually part of the theme (although, truth be told, there are some things that might be defined in a theme and should be in a plugin instead… but that’s a story for another day).

WordPress Themes can be installed directly from the Dashboard.

What IS a Theme in WordPress?

In the WordPress context, a theme is nothing more than a small directory found in the wp-content/themes folder that contains several files which tell WordPress how content should be displayed to your visitors. In the Codex you have a lot of information about them and, specifically, information on how to create your own theme or tweak an existing one.

Some of the files you’ll find in every WordPress theme are:

style.css: This is the main stylesheet. It’s specially important because, not only does it contain the CSS rules of your theme, but also a special comment at the beginning that tells WordPress some information about the theme: its name, author, website URL, and so on.
functions.php: A simple file that WordPress will load when the theme is active. It defines extra functions and features required by the theme itself.
index.php: The main template of the theme.
header.php: The header of your website, which is usually required at the beginning of all your theme templates.
comments.php: The template for rendering the comments form and set of comments in a blog post.
single.php: The template for rendering a blog post.
page.php: The default page template, which is used for rendering a WordPress page. Usually, you’ll have more than one of this, so that different pages can look different in the front-end.
author.php: A template for rendering information about the authors on your website.

I honestly think a theme in WordPress is pretty straightforward—anyone can get an idea of what’s going on by just looking at the different files used… but it’s also clear you’ll need medium/advanced knowledge if you want to be able to create your own theme. Luckily, you won’t ever be in this position: there’s plenty of options to have the right theme in your blog, and none of them involve you creating it.

Themes on WordPress.org

The most common option when searching for a first topic for our website is the WordPress.org theme directory itself. The theme we find here are all free and GPL licensed. The creators of these themes are WordPress users, just like you and me. The only difference is, they have the time and the skills to create a WordPress theme 😉

When choosing a theme from this directory you have to be careful. Some of them, such as the Twenty-something, are WordPress‘ “official” themes and, therefore, are guaranteed to be of high quality and, above all, to have updates and bug fixes in the future. But most of the themes found in the WordPress directory were made by WordPress users and enthusiasts. The quality of these themes is only guaranteed up to some extent (they’re all reviewed by the community before being published in the directory), but no one guarantees they’ll get updated in the future or that you’ll receive any support if you need it.

Premium and Professional Themes

Another common option when choosing a theme for WordPress is to look at the premium theme market. These themes are fee-based (usually around $60) and offer updates and support from the developer for six months or a year. After this period of time, the license would have to be renewed if we want to continue to have access to those updates and support.

Screenshot of Themeforest, a premium theme directory.

There are many platforms where you can search and find premium themes: Themeforest, Template Monster, Elegant Themes, Studiopress, iThemes… When you want to search for a premium theme and your budget is limited, just go there, compare the options, and select the one that better suits your needs.

One of the things I like about these websites is the filters they usually include. Unlike the WordPress theme repository, which doesn’t have too many options, premium theme directories allow you to search for the ideal theme by filtering by a multitude of criteria and, in addition, they often give you the option of previewing the theme so that you can see what it looks like in a “real environment”.

Custom Themes

The last option when choosing the ideal theme for your website is actually choosing none and ask a professional developer to create a unique theme specifically tailored to your site instead. As you can imagine, this is the most expensive solution of all, but the one that probably offers the best results.

We, for example, used to use a premium theme from Themeforest: Angle. The theme was quite good—it had a clean and elegant design, it had good support (it was created in 2014 and four years later it’s still receiving updates 😎), and it clearly saves a lot of time to its users (at least, it saved ours). But we wanted something more personal…

When we were about to launch Nelio Content, we decided to stop using Angle in our website and hire the services of our friends from Silo Creativo for the design of the logos of our new plugin, as well as the design and layout of its website. In the end, we opted to unify our entire online presence and ended up with a single unique theme designed specifically for us and according to our needs, which is what you’re seeing right now.

Things You Should Pay Attention To When Choosing a Theme

Okay, now that you know where you can find a theme that meets your needs, it’s time to talk about everything you need to consider to make the right choice. “I find this theme beautiful, I love it” is not enough. When choosing a new theme, you must be aware of the issues you might encounter with it in the future. Because, yup, there will be issues…

Ponder michael fassbender — Before choosing one theme or the other, there are a few things you should know and ponder. Source: Giphy.

A few months ago, Ruth talked to us about how to select a theme in WordPress. As you can read there, you have to take into account the current design trends, see what your competition is doing and decide if you want to be like them or try out something completely new and different. And, above all, be clear about what you want to achieve with your website. All these factors help you choose a theme that fits the personality you want your website to have and the way you are going to communicate with your audience.

But there are still a couple of very important technical considerations that you can’t ignore…

Careful with the Infamous Theme Lock-In!

What the heck is this “theme lock-in” stuff? This is how Torquemag defines it:

Picture this scenario: say you get yourself a shiny new theme for your WordPress website. This theme provides everything that your website needs: it has shortcodes for embedded galleries, custom post types for testimonials, and portfolio items—even some room for that odd SEO meta code.
You set it all up, and your website goes live. Later on, say after a few months, or maybe even a year, you decide to change your theme. You get another shiny new theme, and much to your dismay, you notice that all your awesome embedded galleries, custom post types, and a lot more has just vanished. Not deleted, not removed, nothing—just gone!
This is precisely what the theme lock-in effect is. By opting for a theme that performed tasks that it should not have performed in the first place, your website became locked to a particular theme, and the moment you changed your theme, everything fell out of place.

I’m not going to lie to you: changing the theme will never be easy. In general, you can’t always change one theme for another in a couple of clicks and expect everything to work: one will have a menu in the header and footer and another will only have one menu in the header; one will have a single page layout and the other will let you choose between one or two columns; etc. Changing the theme will always be a process that will require time and effort.

So when you choose a theme, try to discover up to which extent it suffers from this effect, what features does it offer, does it offer them through the theme itself or does it do it with plugins, are these plugins compatible with other themes or are they just for this one? All these questions should help you to make a better decision and, at least, if you choose a topic that has this “downside”, you will do so by being aware of it and accepting the work you will have in the future.

Customer Support is Paramount

Another key element to take into account when choosing a theme is the support behind it. I hope I’m wrong, but chances are you’ll have trouble with it at some point. Maybe a plugin is incompatible, maybe you don’t know how to configure something, maybe a security hole has appeared and someone has to fix it…. Whatever it is, at some point you’ll need your theme to be more than just a bunch of lines of code installed in WordPress and you’ll want someone behind it who can help.

In premium themes, this is usually “guaranteed”, since you’re paying for it: you’ve spent 60 bucks on a theme and now you have support and updates for a year. But what about the free themes? Who knows!? 🤷 Just pay special attention to the support forums, the number of installations in which the theme is active, the community behind it…. the more people who use the same theme, the less original you will be but the easier it’ll be to find someone to help you 😉

This is something users might not always take into account when looking for the most economical solution (you know, the “I can fix whatever happens” syndrome), but it’s of paramount importance. I know what I’m talking about—user support is our number one priority at Nelio and thanks to this philosophy we’re doing pretty well, because our customers really value it 😇

Don’t Fool Yourself—If You Want Professional Results, You’ll Need a Professional

This is a piece of advice I can’t help but comment on, especially in the world of WordPress. We WordPress developers have a (bad?) habit of telling users that WordPress is simple and that, with a little effort, they can do it all themselves. And it’s true: if you’re curious and you want to, you’ll be able to set up your own website. But don’t be fooled: it’ll probably end up looking like crap.

Bored employee of the month — Don’t fool yourself: acknowledge your limitations and ask for help when you need it. Source: Giphy.

There are countless examples of this. Can you bake a cake at home? Of course! Just follow the recipe and you’re done. Will it be as good as that of a professional baker? No way. Can you paint your own house? Of course. Will it look as good as the work of a professional painter? I doubt it.

The web world is no different. Obviously, if you’ve been doing something for a long time (even if it’s a hobby) and you’ve practiced and practiced and practiced, in the end you’ll be a professional at it too (or you’ll get pretty close to being one). But, in general, this is not the case. So don’t be fooled into thinking that a website made by you, without too much knowledge, will be excellent. It may work, but there is always room for improvement. If you have the resources, ask for professional advice and help.

In Summary

WordPress themes allow us to customize the look and feel of our website. There are different directories where we can go to get themes (both premium and free), as well as the option to contact a professional designer and ask them to design our very custom theme. But no matter where you get the theme, the most important thing is to know the implications of using one or another: theme lock-in, support, price…

Featured Image by rawpixel on Unsplash.

15 Personal Web Designs in WordPress for Inspiration

Published in WordPress.

January 11, 2018April 6, 2018 by Ruth Raventós Examples Resources Themes

Your website is more important than you might think—it’s where you’ll showcase your work, describe who you are and what you do, write about your topics of interest, and so on, so you have to make sure your visitors will like it. Remember it’s the first image people will take of you when they are looking for you on the Internet. Therefore, it needs to be more original and reflect who you are. That’s why it’s so difficult to design a beautiful and accessible site. In general, personal websites can have quite different designs depending on the objectives they seek:

Curriculum: website whose main objective is to introduce yourself to get a job,
Personal brand: to become better known or famous and thus gain more opportunities,
Portfolio: website where you want to showcase your incredible work,
Blog: to share with others your passions and, in some cases, to have income through advertising, and
E-commerce: the main purpose is purely commercial by selling your products, works, etc.

Actually, a single site can try to fulfill more than one goal at a time, which means the final designs we see are varied and incorporate very different elements in their design. Today I’d like to share with you 15 personal web designs (based on WordPress, of course) that I think might inspire you.

Let’s start with a very good example of a personal website whose main objective is to share a subject of study or interest and, at the same time, increase the reputation of its author:

# 1 Enrique Dans

Enrique Dans, Professor of Innovation at IE Business School since 1990, maintains one of the most reputable personal blogs on innovation in the startup world. According to him, its goal is:

It’s a purely personal page, written only by me, and which I use fundamentally for two things: to maintain an orderly repository of all my activity and to receive valuable and permanent feedback on topics which, in many cases, I end up later incorporating into my lectures, conferences, or press articles. (Enrique Dans, source: https://www.enriquedans.com/acercade)

His website was designed by Blogestudio. What I like the most about it is its absolute sobriety and simplicity, clearly in line with the expected image of a professor of IE Business School. And of course without any kind of advertising that would disturb the reading of the articles. The main page is the blog itself and, as a result, the quality of the content of its articles is outstanding.

If the objective of your personal website and the image you want to give are similar to those of Enrique, keep things simple and focus on high-quality content. But if you’re looking for something more ground-breaking and need an original design on your website to showcase your innovative and artistic side, here’s a selection of personal WordPress websites that I think will inspire you. They are all unconventional and, in many of them, there’s a lot of design work behind them. So, here we go:

#2 Phil Casabon

Phil Casabon is a great expert with recognized prestige in Freeskiing, a specific type of alpine skiing that involves tricks, jumps, and terrain park features such as rails, boxes, jibs, or other obstacles. This form of skiing resulted from the growth of snowboarding combined with the progression of freestyle skiing

His website has been developed by Pier-Luc Cossette, a designer from Quebec. The web design perfectly conveys that freeskiing is exciting and the love of Phil Casabon for this sport. As noted on his own website:

Choose a job you love, and you will never have to work a day in your life.
Confucius

#3 Coraline Colasse

Coraline Colasse is a Parisian art director. Her website has been designed by Fabio Carretti.

This website is very original—browsing on the home page is done by selecting and dragging the mouse. This motion reveals the author’s different projects. Although I personally didn’t find this functionality very intuitive at first, it gives a unique artistic touch to the web.

#4 Alexander Engzell

Alexander Engzell is a Swedish web designer who has designed his own website. Its goal? Here you have it in Alexander’s own words:

This isn’t a portfolio about design. I’m not trying to tell people “Hey, this is how you design.” Instead, this portfolio is designed to communicate what design means to me as a person.
Alexander Engzell

His website includes video, sound, and a whole set of animations that create the impression that you’re watching a movie instead of a website. Nice!

#5 Jony Guedj

Jony Guedj is a freelance film director making commercials, music videos, short-films, and, as a good Italian, pretty good pasta. His website has been designed by Benjamin Guedj.

The most striking thing about the design is the visualization of the portfolio of the author in a horizontal sliding gallery, quite different from what we’re used to!

#6 Anna Morosini

Anna Morosini is an Italian photographer who graduated in Modern Literature and holds a Master’s degree in High Level Contemporary Image at Fondazione Fotografia of Modena. Her website has been designed by Gusto Ids.

The animated and minimalist design invites you to enjoy the visualization of Anna’s incredible and sensual photographic work. A design perfectly aligned with the author’s work.

#7 Emanuele Papale

Emanuele Papale is a web designer from Pisa currently working in Amsterdam. The aim of his website is to showcase his design capabilities along with some projects. The menu is vertical and the portfolio display with animations is original.

#8 Katy Perry

I guess I don’t have to introduce the pop star, Katy Perry. Her WordPress website is a clean and daring site, which manages to combine the artist’s personal pop image with a magazine style functionality. Super easy to use!

Perry’s website proves that you can have a lot of personality using just a simple white background and easily navigable links, giving fans the option of listening, viewing, and learning easily as they please.

#9 Girl With a Camera

Girl With a Camera is Ashley Baxter’s photography blog in which she shares photos of her life and commissioned work. Ashley’s website was designed by Matt Brett.

Girl with a camera web — Girl With a Camera website screenshot

I’d like to highlight from its design the way in which the design and background color of each post can be changed to better suit the content.

#10 Ben Pearce

Ben Pearce is a sculptor who graduated in Fine Arts in 2003, specializing in sculpture at Whanganui Quay School of Fine Arts and has exhibited regularly in New Zealand and Australia since then.

The design of his website, by Nick de Jardine, is very minimalist and the navigation to show his different sculptures invites you to continue browsing to see his work.

#11 Victoria Spicer

Victoria Spicer is a set designer and prop stylist, working in London. Her website is also designed by Nick de Jardine.

In this case, I would also highlight the originality of the page loading process and the navigation flow.

#12 Tyler Fink

Tyler Fink is a graphic designer in Ithaca, New York. His great website has been designed by himself.

I love the home page layout that allows you to write directly on top of each typeface the text you want and test if you like it—it perfectly achieves the objective he wants to achieve with his website!

#13 Tobias van Schneider

Tobias van Schneider is a German designer with great recognition in the design world. In his website, designed by him, you will discover his sources of inspiration, his secrets for success, and various career tips, along with many other ideas of this sector.

Tobias Van Schneider website screenshot.

The design and content of his website can be very inspiring if you’re thinking of an original design for your website.

#14 Fran Fernández

The blog of the Spanish singer Fran Fernández has a graphic design very expressive and slightly charismatic, which reflects the passion and personality of the musician.

His web has been designed by Guido Carini.

#15 David Blum

David Blum is a Swiss web designer who has designed a minimalist website to showcase some of his design work. You can also read his inspiring articles and see his resume.

I like the design of this website that has a clear objective and achieves it with the minimum, in a clear and simple way.

As you can see, my selection has been quite varied in terms of design elements, some of these pages being very new. Even if you don’t like (some of) them, they prove my point—personal websites should reflect the personality and creativity of their authors. And that should be one of the main objectives that any web design should achieve, don’t you think?

What are you waiting for to add your personal WordPress website in the comments section? We want to see them!

Featured Image by Martin Shreder on Unsplash.

The Best Starter Themes for WordPress

Published in WordPress.

August 8, 2017April 6, 2018 by Antonio Villegas Resources Themes WordPress Advanced

An interesting way to make a living out of WordPress is to develop and sell themes. If you’re thinking of taking the lead in this niche market, make sure you have the know-how and you’re ready, so that you don’t reinvent the wheel and maximize your profits. The first thing you should know is that all WordPress themes follow a similar structure and hierarchy of files and templates. For this reason, today we can find base themes so that we do not have to start our developments from scratch. It’s what we usually know as starter themes.

Unlike theme frameworks (Genesis, Divi, and many others) or other complex themes, it’s not necessary to create a child theme from a starter theme to start working on it. What you do is to take the starter theme and start editing it directly. It’s the same thing you did with the boilerplate plugin, as my colleague David explained here.

If you didn’t know what a starter theme is, here is a list with the most popular starter themes for WordPress. Now you’ll have no excuse not to start to build your WordPress themes (almost from scratch). Come on, download and play!

Underscores

Among the starter themes that exist for WordPress the most popular is Underscores, also known as _s. You may have expected that, as it’s been made by Automattic, the company behind WordPress.com and owned by Matt Mullenweg. But Underscores is more than that; it’s also known for its simplicity, versatility, and good organization.

If you want to learn how to correctly structure the files that are part of a WordPress theme, Underscores is clearly the “official” proposal to follow. Of course, keep in mind that if you install it in your WordPress you won’t see anything “pretty”. And this is so because the theme comes practically without CSS styles, something that you’ll need to configure yourself.

Here you can see the single.php of Underscores (_s). — Here you can see the `single.php` of Underscores (_s).

Underscores being that basic may be very interesting for designers who want to make lots of modifications, since they have a free way to do it. They won’t face any major obstacle on this. However, it’s possible that others see Underscores as something too empty and prefer other alternatives.

Regardless of the needs you have, taking a look at Underscores’ structure and code is something we should all do to better understand how a well-programmed WordPress theme works.

UnderStrap

If you think Underscores is too basic for you or you’re going to need a lot more power, an interesting option is UnderStrap. This theme combines Underscores with the Bootstrap framework from Twitter. It also includes support for JetPack, WooCommerce, and Contact Form 7.

It works as both a starter theme, which you can modify as you please, and a theme development framework, for which your create a child theme (also available on their website) with your own modifications.

As you can see, the single.php of UnderStrap is much complex than Underscores'. — As you can see, the `single.php` of UnderStrap is much complex than Underscores’.

It’s a very active project, receiving updates constantly. If you decide go for it, you probably won’t regret. All this extra functionality, however, comes with a price—the entire Bootstrap framework could become a performance issue, so use it carefully.

Sage

Sage is a starter theme for WordPress that includes modern tools to speed up development. In addition, its community is very active. They even have a kind of forums where they discuss the evolution of the theme and the inclusion of new improvements. And the documentation they provide is not bad either.

As a curiosity, Sage uses the Blade template system, also used in the Laravel framework. In this way, the syntax of single.php is reduced to the maximum, as you can see below:

Template for single.php in Sage using the Blade syntax. — Template for `single.php` in Sage using the Blade syntax.

However, keep in mind that in order to work with this theme you’ll need to use other components such as composer and yarn for dependency management, compilation, and build generation. Therefore, this can be a too complex entry point for many newbies in theme development. On the other hand, if you get used to it, your productivity may increase greatly. In fact, this is the biggest advantage of Sage with respect to Underscores, as you can see in the comparison they have on their website.

FoundationPress

If you are a designer and have experience working with the Foundation framework, you probably know that there is a starter theme for WordPress that includes it so you can use it in your WordPress themes. We are talking about FoundationPress. It’s a starter theme for experienced developers, since it uses technologies such as npm and Gulp to manage dependencies, create the folder structure for development, and build the theme files.

The good thing about using FoundationPress is that you’ll have all the components that come with Foundation directly in WordPress, so you can design more complex elements with less effort than using a more basic starter theme. In contrast, the code you’ll have to modify will be more complex, and the final weight of the theme will also be higher (due to the included libraries). Keep this in mind when you decide to choose this option.

FoundationPress includes its own hooks, as you can see here in single.php. — FoundationPress includes its own hooks, as you can see here in `single.php`.

As a curiosity, FoundationPress adds its own filters and additional actions to those WordPress includes by default. All the documentation about these hooks can be found here.

JointsWP

As an alternative to FoundationPress, if you’re also a fan of the Foundation library you can try JointsWP, a starter theme based on this framework. There you’ll find the typical PHP files that are part of a WordPress theme adapted to all the graphic potential that Foundation includes.

JointsWP includes the typical CSS classes from Foundation, as seen in single.php. — JointsWP includes the typical CSS classes from Foundation, as seen in `single.php`.

JointsWP also includes support for Bower and Gulp, to automate the entire process of compilation and build generation (minification and merging of files, web browser reloading after changes in development, etc). Of course, keep in mind that if you don’t have experience with Foundation, this starter theme will be more complex than others. In addition to it, note that once decompressed, JointsWP uses more than 19Mb!

Bones

Bones is designed to be a light, responsive, and mobile-first theme. It defines the styles with SASS and makes it easier to work with post formats and custom post types, since you have specific functions for them. In addition, Bones allows you to customize the WordPress Dashboard.

Code fragment of single.php in Bones, where you can see that it contains support for post formats. — Code fragment of `single.php` in Bones, where you can see that it contains support for post formats.

Although not updated since May 2016 (at the time of writing this article), it’s an interesting option because it includes translations into more than 20 languages. And you have quite funny comments on the code (see single.php above), which will help you customize it.

Naked

Surely it’s not the most popular starter theme to be used as a basis in real developments, but if you are a designer with aspirations to become a developer of WordPress themes, Naked is going to be very useful.

File structure of Naked starter theme. It's pretty simple! — File structure of Naked starter theme. It’s pretty simple!

It was created by Josh Beckman a few years ago and contains the minimum to start creating a WordPress theme. And best of all, it’s very well documented, with self-explanatory, very exhaustive comments in the code. This will help you understand what each piece of code does and why.

As you can see, Naked includes comments to help you understand almost each line of code.

If you are a newbie, my recommendation is that you download it and start with this starter theme. By doing so you can learn as you mess with things here and there. With Naked and the WordPress Theme Development Handbook you’ve all the ingredients to become a pro in a short time.

Final Remarks

After seeing the details of all these starter themes for WordPress, you only have one thing to do. Choose one, the one that catches your attention the most, and download it to start working on it. The good thing about these starter themes is that you can simply add the CSS rules you want to end up having a minimally decent product (ideal for designers), but also make modifications to the PHP code to add the desired functionalities incrementally.

If you didn’t have a plan for these next months, it’s a good idea to fill your free time creating your own WordPress theme and releasing it to the market! It won’t be easy, but surely you’ll learn a lot throughout the whole process. There are no excuses because all these starter themes are completely free. Become a WordPress theme developer today!

Featured image by William Stitt via Unsplash.

Age Responsive Design

Published in Inside Nelio.

August 3, 2017April 6, 2018 by Ruth Raventós Opinion Themes

Translated by Núria Adell.

The way a child or a teenager uses a mobile phone or a tablet has nothing to do with how an older person does it.

Don’t even think about taking a teenager’s phone away, unless you’re looking for trouble.

The same happens with their experience and behavior when using a computer or browsing the web.

Some older people might surprise you with a computer 😉

While some have had to make a great effort to understand the changes that the emergence of technology has brought to their lives, others seem to have this technology already integrated in their DNA. But it’s not just a matter of date of birth. Did you know that the sensitivity to light and contrasts, the perception of colors, and the perception of depth and movement change with age? (Vision and Perception – Visual Processing) Of course, this has an impact on someone’s visual ability to process the information of a website.

This is why there have been several studies on how websites should be designed according to the ages and the abilities of the users visiting them. Inclusive design seeks to develop products or services that can be used by the largest possible audience. It understands that all user population is composed of people of different ages and abilities.

Speaking of the age and the use of people who access a website, in the following image you can see the summary of several studies (Teenage Usability: Designing Teen-Targeted Websites) about some of the differences you should take into account in the design of a site, depending on the age of your visitors.

Designing Usability — The user experience on the web varies depending on the age (source: Teenage Usability: Designing Teen-Targeted Websites)

Or you can also, for instance, find some guidance on how you should design a website suitable for people over 60 (Making Your Website Senior Friendly) or appropriate for children (Build an Age Appropriate Kid-Friendly Website).

But what happens when you’re not designing a website exclusively for children or seniors, and your target audience is of a very varied age?

Age Responsive Design

I’m assuming your site already adapts to all types of devices, or in other words, is a “responsive” website. If that’s not the case, just so you know, you’re starting to look like a dinosaur. Not so long ago many designers and agencies started announcing that the websites they were developing were responsive. Now I don’t think anyone would dare to design a website that’s not. A responsive website is not only much more comfortable and pleasant to use, but being responsive is also one of Google’s criteria to give you a better SEO positioning.

Concerning responsive websites, about a year ago people started talking about designing websites adapted not only to the device that is being used, but also to the age of the user who is browsing the internet. I think one of the first articles I read that mentioned this topic was The Future Is Near: 13 Design Predictions for 2017, published in January 2016. Note that we’re no longer talking about a website designed for an audience of a specific age range as I mentioned above, but about a site that, depending on the age of the user, it will show a different version of itself.

User-centered Design

A design that adapts to the age of the user should consider the following aspects:

the appearance of the site,
site elements displayed,
the interaction between the components of the site,
the usefulness of the site,
the content of the site, and
how users can benefit from all of this.

Depending on their age, users have different interests and different abilities to interact with a site. Thus, for example, the website’s design would take into account:

large font size vs. small and different spacing,
silenced or saturated color schemes,
video presentations vs. explanations in text,
shares in social media vs. conversion via email,
navigation menus expanded vs. condensed,
typographic content vs. traditional content,
content adapted to the age, or
provision of varied content adapted to different groups.

Therefore, the objective of an age-responsive design is to provide the user with the content and design that best fits their personal interests taking into account their age.

Today, the best websites are already designed keeping the user in mind, but the main problem is that they focus on the “perfect user”. Perfect users are those who are digital natives, and that when they enter a site they already have a well-formed idea of how to find everything they need in it. But an age-responsive design doesn’t assume your visitor is this ideal, perfect user, but makes every one of them feel like they are the perfect user and that the site they’re visiting was designed specifically for them.

Do We Have the Technology for This Type of Design?

On one hand we have responsive designs that adapt to any type of device. This means that the technology required to make the changes mentioned above shouldn’t be a problem (although yes, it involves a lot of work). A responsive WordPress theme is already designed with a mobile first methodology, typography in relative units, fluid images for all resolutions, responsive videos, CSS Grid, etc.

On the other hand, video games already include technology to make the difficulty and challenge of the game adapt to the skills of the player. Furthermore, we already have video games adapted for users affected by cerebral palsy. Note that I’m not talking about the development of a video game done specifically for them, but one that everyone can play.

creación de videjuego — Video games promoted by La Caixa Creation in the fourth edition of the social entrepreneurship program of La Obra Social de La Caixa

Maybe you’re also wondering how we can know the age of our visitors. Well, in the same way that you can create campaigns on Facebook and Adwords with demographic targeting, there are a growing number of tools that offer you web analytics services in real time. The technology currently available allows you to create a responsive design for your website.

But the fact that the technology exists doesn’t mean that it does so at a low cost, so the final question is:

Is a Responsive Design Accessible for Anyone?

I have no doubt that responsive designs (without the “age” part) are now essential for everyone, since people access websites from any device. But, to what extent are all web owners going to invest in a design that suits the age of the user?

Large international brands, with a large customer base, may need to create sites that fit different age ranges. But there’s a whole set of businesses whose target audience is a rather limited demographic segment. A website that markets second luxury residences, will adapt its design to the needs of the Generation X and the Boomers. A site of a co-working space will surely focus on the Millennials and the Generation X. In these cases, the cost of an age-adaptive design is probably too high for the differential value it can bring.

You can do virtually anything with WordPress, because there’s always a plugin for it. But it looks like age responsive design is one of the few exceptions. If we want them to become a reality, what are we waiting for to develop plugins that offer tools lowering the costs of responsive designs? We’re already falling behind… 😅

Featured Image by frank mckenna on Unsplash.

WCEU2017 – What’s Missing in WordPress.org Plugin and Theme Directories

Published in Community.

June 27, 2017August 13, 2018 by David Aguilera Opinion Plugins Themes

As Antonio explained you last week, we attended the biggest WordPress event in Europe—WordCamp Europe 2017. If you couldn’t be there, I’m happy to announce that they’re currently publishing the videos in WordPress.tv, so go ahead and don’t miss anything 😉.

One of the things I like the most about this WCEU was the fact that it started with the Contributor Day. Usually, talks take place during the first day(s) of a WordCamp and CD is on the latest. This time, however, the organizers did it the other way around, and I loved it! Starting with the contributions to WordPress means you’re less tired, you feel more productive, and it’s easier to know new people.

This first day wasn’t only about contributions, but also talks and meetups. One of these talks was mine: “WordPress Plugin and Theme Directories Don’t Love Developers”. The title is slightly click-bait, but that’s because I wanted to open a discussion that we must have. So, whilst we wait for the video to be uploaded, let’s have the discussion in our blog too, shall we? But before we talk about WordPress, let’s start with a brief story…

Internet Purchases? Sure Thing!

A few weeks ago I visited my grandma, just to check on her. Despite her age, she’s a super-granny: she has an Android smartphone, talks to all the members of the family using WhatsApp (voice control, of course), has a Linux laptop to browse the Internet… She’s a a woman of the 21st century!

David's grandma — My grandma Maria loves technology!

Anyway, she was explaining to me that she wanted to upgrade her bathroom. Apparently, she’d been thinking about it for some time, because she’s getting older and she wants to make sure it’s comfortable and safe. “I’ve been searching in the Internet,” she said, “and I’ve found this company here in Barcelona and, apparently, they’re extremely competitive and very, very professional. The reviews were pretty good and the prices seemed fair, so I called them and they sent a super polite girl to take a look at my current bathroom.”

Wow! I couldn’t believe it. My grandma just told me she looked for such a service in the Internet! From our perspective, it’s probably not a big deal. But my grandma? How many people her age (or younger!) you know would do that?

Empower the User and They’ll Make the Right Choices

This anecdote made me think about products, services, and the Internet. Older people don’t buy stuff on the Internet because they don’t trust “the cloud”: they don’t see the product, they don’t touch it, there isn’t a sales person in front of them… and this lack of “contact” becomes a huge barrier. So, how come my grandma did look for a provider on the Internet? Sure, she’s super cool, but there must be something else.

In my opinion, it’s because of the community. When you can’t talk to a person or see the product in situ, you need to gather as much trustworthy information as you can before you sell anything. And that’s precisely what you can find online—reviews and comments by users from all over the world (yup, haters included):

Nelio Content User Reviews — User reviews in WordPress.org about our plugin: Nelio Content.

If we have this kind of information, we can make the right choice and be quite confident about it. My grandma is an example of it. And so are you and I! When you look for new plugins, don’t you read the reviews in WordPress.org? Don’t you look for third-party opinions? 🤗 So I’d say WordPress is on the right track, when it comes to user matters. We users have what we need, don’t we?

The Big Problem in WordPress—Developers Fly Blind

There’s always two sides for every story, and this one is no exception. Sure, WordPress takes care of final users. But what about developers? Do developers have the information they need? Can developers make the right call? Or are developers flying blind?

Before we tackle these questions, let me tell you a second story. In this blog, we’ve already talked about Nelio’s history and some of the situations we’ve lived so far. The adventure of running your own company is fantastic… but also scary! There are so many situations in which you just don’t know what you’re doing and what you’re supposed to do. Luckily, there’s always someone that can help you.

One of the most interesting things we’ve been able to do so far is enrolling in mentoring programs promoted by Barcelona Activa, an official initiative created by the city council and aimed to support local entrepreneurs. If you’re running your business alone and you’re getting started, I strongly recommend you look for one in your area; they’ll teach you a lot of business-related things you might not know (yet). Some of the questions our mentors kept asking us were:

Who’s your customer?
What do you offer them?
How do you plan to monetize your service?
Do you know your CAC (customer acquisition costs)? Churn rates? LTV (life time value)?

You have to be able to answer all these questions without hesitation, because your success or failure depend on them. When we were asked those questions, I was completely surprised to realize that we didn’t know “who our customer is” 🤔 I mean, wow! Really? That’s a pretty important question, and yet I had never thought about it… How come we don’t know our customers? Is it our fault? Or is there something missing?

A few months ago, Chris Lema talked about the biggest problem in WordPress. In a post he wrote in his blog, Chris argued that WordPress discussions revolve about how we solve problems, ignoring what problems are we solving and who are we helping:

We’re a community that spends time talking more about code and “how” something is coded, or the “WordPress way” than the problems we’re solving. We’ve written tons of lines of code without any feedback loop.
Chris Lema

So, he also thinks that our biggest problem is the fact that we simply don’t know our customers. We don’t know who they are, what they want, how they find us, why they choose us instead of our competitors… We’re writing code following a hunch—none of our decisions are based on real data.

How Others Tackle This Problem

I hope that, at this point, we’re on the same page—we need to change something in WordPress and start gathering information about our users. But how? How do we do it? Well, let’s take a look at how other platforms (namely, Apple’s App Store or Google‘s Play Store) solve this problem.

Available Metrics in Marketplaces

Mobile platforms grew a lot during the past few years. It all started in 2007, when Steve Jobs presented the first iPhone. It’s been 10 years since then, and we now have thousands of developers working on these platforms. Sure, the mobile industry has some clear benefits (users take their smartphones everywhere, at all times)… but I think that part of their success is the love these platforms give their developers.

Let’s take a look, for instance, at Apple’s App Analytics. Essentially, this tool collects data from all the users viewing your app in the store and using your app in the iPhones and summarizes all the metrics in a beautiful Dashboard:

If you take a look at their presentation in WWDC 2015, you’ll be able to see some of the functionalities included in App Analytics. Some of the metrics they currently monitor are:

App Store views, units, and sales
Installations
Sessions
Active devices (and active devices during the last month)
In-app purchases

I think that this kind of information is what we, WordPress developers, need to make the right calls. With just a few metrics about how users find us and how they use our products, as well as their demographic information, would help us better understand who we’re trying to help.

How to Improve WordPress Plugin and Theme Directories

That’s what surprises me the most! WordPress.org directories don’t offer any useful metrics to developers. Just take a look at the Advanced data from any plugin and you’ll simply see active installs and downloads… that’s it!

Metrics of Nelio Content. The metrics offered by WordPress.org are very helpful to users, but they don’t tell much to developers.

Now, don’t get me wrong—I already said this, along with reviews, comments, and support threads, is probably more than enough for regular users. But it clearly falls short for developers. Think about the following questions and let me know if any of them can be answered with the data we currently have available:

How many people saw your plugin in WordPress.org?
Which keywords helped them find you?
What’s your bounce rate?
Did they checked the other tabs?
Did they look at the screenshots?
What countries do your “clients” come from?
What’s their language?
How many users used your plugin in the last 30 days?
…

We all care about these metrics in our own sites, but we don’t know about these metrics in WordPress.org. Google Analytics or JetPack could probably tell us that easily… and yet we just don’t know anything about them.

But Be Careful!

I think that, as a community, we need to find a solution to gather this information and make it available (even open, public, and transparent). But we also have to be careful about what we ask and how we ask for it. On the one hand, there are (legit) privacy concerns. There’s a lot of information we can track about our users, but we shouldn’t be greedy. The information I mentioned before can be obtained from the WordPress directory, but there’s also a lot of behavioral information that can only be gathered if we monitor what our users do with our plugin in their sites. I’m for it, but we need our users’ consent to do that. We must ensure anonymity.

On the other hand, we have to avoid infoxication. When I think about metrics, I find it super easy to start asking for them all. After all, if you have the data, you can discard what you don’t need later on, right? And, anyway, the more information you have, the better… or so they say. But I think that would only harm our goals. We must be mindful of what we want and why. Remember the difference between vanity metrics and actionable metrics:

Vanity metrics. Numbers or stats that look great on paper, but help little. For instance, number of installations, subscribers, or downloads.
Actionable Metrics. Stats that tie to specific and repeatable tasks you can improve and to the goals of your business. Conversion rates, active users during the last month, churn rates… You must keep an eye on them and make sure you improve them day after day!

Let’s Open the Discussion

During my talk, I presented all these ideas and asked the audience to start a discussion. Some agreed with me and others were extremely concerned with user privacy issues. Whatever your position is, I honestly think we should discuss it and look for a solution that satisfies us all and respects all positions. What do you think?

Featured image by William West.

The 7 Easiest WordPress Problems to Solve

Published in WordPress.

February 14, 2017April 6, 2018 by David Aguilera Plugins Themes Tips Tutorials WordPress Advanced

Translated by Núria Adell.

One of the most successful posts in our blog in Spanish is the solution to the 5 most common problems in WordPress (here you have the English version). Since we published it in mid 2015, the number of visits hasn’t ceased to increase and it has generated a very interesting thread of comments looking for support to problems that, in some cases, weren’t solved in the original post.

Seeing these problems come up over and over again (both in the comments section and through emails), I thought it would be useful to compile them here and give you the solution to all of them. So… get ready to learn some more tricks to become a handyman of WordPress repairs!

0. Reviewing the most common problems

Before starting with the new list of problems I have waiting for you, maybe it’s worth looking back and quickly reminding you of what we looked at a few months ago. If you think you have one of these problems, I recommend you read the original post to see the solution in greater detail:

The white screen of death (WSOD). This is one of the most common problems you might encounter. You’ll know you have it because, as the name indicates, your WordPress will go completely blank when you try to access it. The problem is usually caused by a recent change (a new plugin or theme, an update of one of them, or WordPress itself…)
INTERNAL SERVER ERROR. This is an error similar to the previous one; in fact, the WSOD happens because an error like this has occurred. The causes tend to be the same, so you’ll have to check the logs and make sure everything is right.
ERROR ESTABLISHING DATABASE CONNECTION. This is usually a server’s error, but sometimes it can be something as stupid as having changed the user and/or the password of the database and so WordPress cannot access it anymore. Look at the settings of your server or contact your hosting provider.
Error on the automatic updates. It’s difficult to realize the automatic updates are failing because, well, they’re automatic and so you’re not supposed to be in front when they’re executed. What you can see are the results of a failed update: WSOD, errors 500, etc. Check that everything is right (as it is explained on the WSOD solution) and finish the update manually.
Posts of WordPress with Error 404. Another common error, especially if we’re playing with the settings of the permalinks or plugins that manipulate the .htaccess file. Usually, putting a default .htaccess solves the problem.

1. Error 500 and similar cases – The white screen of death that stopped being white

The error 500 is one that appears more often than we like to admit. And it’s not just me saying it; I’ve seen it on the comments our visitors send. This type of error is the one that generates the white screen of death (when you have the log of errors deactivated):

The white screen of death (WSOD) is one of the main sources of panic amongst the users of WordPress.

or that which creates frightening messages like this one:

WordPress errors 😱 Well, at least they tell us there's something wrong, right? — WordPress errors 😱 Well, at least they tell us there’s something wrong, right?

In these cases, what we have to do is find the culprit that’s generating this error. If your log is activated (as we explain here), it’s very possible that there’s a line on the screen indicating exactly what file generated the error. What’s most common is that this file corresponds to a plugin or your theme, so you’ll just have to deactivate it in your installation, reinstall it from scratch (to ensure it’s not corrupted), and, if the error persists, contact the author asking for help.

If you don’t know what’s creating the problem, you will have to make a “witch hunt”. In other words, you’ll have to deactivate all the plugins and change your current theme to the default theme (Twenty Seventeen at the date of this post) to have a “pealed” WordPress installation. In 99% of the cases, this solves the problem, so now you just have to start reactivating each of the plugins until the system fails again to identify which one is responsible.

If this doesn’t work, you have a more serious problem than we thought. Maybe your website has been hacked? Jump to point 6 for more information 😇

2. I can’t interact with the user interface

Other times, what happens is that seemingly everything works as it should (the dashboard of WordPress loaded correctly, we can see the components, we see the editor to modify the posts, we can see the boxes around…) and when we try to interact with the page we discover that, in reality, things aren’t working. One of the original comments put it this way:

(…) On the section “Posts”, what would be the emerging/pull-down options don’t work. For example, from the general list of posts, the quick edition doesn’t work (…)
Then, inside the article, we cannot change from “Visual” to “Text”, the “add media” doesn’t work, nor it allows us to put the corresponding labels or edit the date.
The change in “Pages” works fine.

What is happening here? 🤔

Many of the features available when we interact with WordPress work through JavaScript, since this way we get a much more fluid interaction. All the “blocked” features that our reader mentions depend on JavaScript working correctly, so it is normal to think that some plugin added a new script that contains errors, and therefore, makes everything fail.

As always, the first thing we must do to solve the problem, is identifying the culprit. To do so, open the developing tools of your browser and look into the JavaScript console to see if an error comes up. If things are as we imagine, you should see something like this:

By opening the developers console of your browser, you can see the JavaScript errors. From here, it's easy to identify the responsible file and so identify the plugin that added it. — By opening the developers console of your browser, you can see the JavaScript errors. From here, it’s easy to identify the responsible file and so identify the plugin that added it.

If you expand the error, you will be able to see a bunch of calls that have been produced. It is common to have several calls to JavaScript frameworks (like jQuery) and just one or two that are directly related to the guilty plugin; find this function and you’ll know what plugin to deactivate.

Then, it’s your call to decide how to procede. In these cases I personally recommend to contact the developer and expose him the problem you have encountered; if there is really a bug in his code, he’ll be grateful for the information and I’m sure he’ll correct it.

3. My posts show weird characters

Another error you might face, are posts with weird characters. For instance, one of our readers of the Spanish version of the blog told us his browser showed results such as these:

[vc_row full_width="stretch_row" gap="15" content_placement="top"][vc_column][vc_custom_heading text="Picadora de forraje autopropulsada Modelo FS60" font_container="tag:h1|text_align:center|color:%23000000" google_fonts="font_family:Roboto%20Slab%3A100%2C300%2Cregular%2C700|font_style:700%20bold%20regular%3A700%3Anormal"][vc_separator color="white" border_width="5"][/vc_column][/vc_row][vc_row full_width="stretch_row" gap="15" content_placement="top" wd_row_delimiter_style="vertical_line_bottom_center" wd_row_delimiter_color="#bbbbbb"][vc_column width="1/2"][vc_single_image image="3700" img_size="540×306" style="vc_box_shadow_3d" onclick="zoom" css_animation="appear"][vc_gallery type="image_grid" images="3691,3692,3693,3695,3696,3697,3694" img_size="180×180"][vc_column_text] OTROS PRODUCTOS FS60 FS6025 FS80 FS8060 [/vc_column_text][/vc_column][vc_column width="1/2"][vc_column_text] Las cosechadorsa PALESSE FS60 son famosas como un modelo económico y accesible de amplio uso. La máquina cumple con seguridad los trabajos de acopio de forrajes, henolaje y materia verde. Para asegurar…

In this particular case, the key is looking at the content that WordPress is giving us; they’re not incomprehensible random characters, but text that we can read. Look at what says vc_row, vc_column, vc_single_image… these look like “labels” of an HTML layout, but without being HTML. In fact, in the previous case, we can even read how it ends as a normal text: “Las cosechadoras son famosas como (…) La máquina cumple con seguridad (…)” What is all of this? 🤔

In this example, what we see are labels inserted by a plugin called Visual Composer. This plugin allows users who are not very skilled at HTML to create pages using the typical “drag and drop”, allowing anyone to create attractive pages in just a few minutes. But, of course, the page the user is creating with his editor must be stored somewhere and, in this case, this is done through shortcodes (vc_row, vc_column, etc.), which we can see on top.

If you find something similar to this, check two things:

If this is only happening when you make a search or on the lists, but when you go to the post/page/product you can see them well, edit this post/page/product and add an excerpt to it. By default, if you don’t define an excerpt, WordPress will take a few words of the content of your post to create the excerpt. In this case, the content includes the shortcodes, so the result that WordPress gives by default is invalid and so you have to define this “summary” manually.
If this happens in all the pages of a certain type, it’s very possible that you have changed the theme and/or deinstalled the plugin that added these shortcodes. In these cases, you have two options: either reinstall the theme and/or plugin that you were previously using so that the shortcodes become available and are well laid out, or you can create the page again from scratch without using these shortcodes.

At other times, what comes up in your screen is completely illegible and nothing we see on our browser makes sense. I’m talking about things like this:

‹í=]sÛ8’ï÷+`N%MÄ/I–eÙr&q’ÝÜ9“TìÙ¹«8¥‚HH¢C~Xö:®Úr÷°?`Ÿöí^óOö—7@J¤DIv$;ÉM¦& 4ºFwh’[6·¢+Ÿ‘a4rÉ!9ØRÕwNŸ¼|NZïD©åÒ0ì(k)Ä¥Þ £0OAÐwÌ³þ{UÍµÛ›k··ºÝ JIBAÒ>iªÏOâ¬ïv>h¯‘ßÖu>ðµÓ½ðE”Êb>2j¸Ž÷Ìí(atå²pÈX¤ìqG‰Øe¤[a¨! ï( Z ä…Ô œÈ±¨æ±HûªÅ½ˆyN!ÓGŽçô¯tÖÛëšÀ0b¶C; u]…è‡#Qb i²¨£üzúBmMË=:êû¬ìÂåÈ |Kó‡¾à#r”—¾ôËáD%oÉ•ou”—R¹ÎUuØ sC6S˜B—+×Q¹²ÏÊ•›››=ákÂ `!áíÄ‰Ø¯Û)-’E©š‚þ…NßavÇ˜=QÇ}ÃýØïûË ½xúìªSš¢{ñô5¶ÄÂîó“LqïØùÀ^]YAŽÒI8 ™Û#>@á°dQìt¦öEï%ùÀñ ÙÒÕ?zöäôÉ»Ÿô< Þ¥ÑKû…Ž¸ËƒNÉuÃhÈ/ñè £äPð›Ðé’i?.€xØ,è$Cn¦ç¡PóSÚc2æ ü‡aµO-ÖãüCuÀùÀe¾‡UÛ Ce"¶?¥íÃýŸ´x&0œabŠišÞë¹G{.³'¥'½,Ð

These type of problems tend to happen due to two reasons:

You’re database is wrongly configured, since it’s storing the information with the incorrect codification of characters.
It’s showing the compressed page (using gzip), but the headers that are sent to the browser are incorrect.

In both cases we’re talking about problems in the server settings, so get in touch with the hosting provider and ask them to repair it (this is what you pay them for 😉).

4. I configured WordPress on my computer and I can’t access the content

If you’re playing at home with an installation in WordPress and you want to access it “from the outside” (in other words, from another computer), many things can go wrong: the computers may be in different networks, there may be firewalls, the ports might be closed… so I’m afraid I won’t be able to provide a concrete solution to your problem. What I can do, however, is give you a list of the typical causes that may prevent your WordPress from being accessible from another computer and, from here, you can do some research on how to check them and solve your case 😇:

By default, Apache servers only listen to requests from the localhost. Check that you have your server configured to accept petitions from a “public” IP (this can be the IP from a local network, like 192.168.1.25).
Sometimes the web server doesn’t boot up in port 80, but uses a different one. Make sure, or configure your server so that it uses port 80, or access your browser through the port you have configured.
If your operating system has some sort of firewall, configure it so that it allows requests to your web server.
If you want access from your public IP, you will have to configure the router so that it redirects the ports of the public IP to the local private IP of your computer. Here, you must take into account several factors, such as the fact that with protocols like DHCP, the local IP of your computer may vary, so you will have to consider using a fixed IP on your network.

5. I cannot install plugins, themes, upload new pictures to the gallery…

Another common error that we often encounter. In this case, it is possible that:

You have ran out of of space in the server. Consider changing to the next plan or deleting old information, whichever you want.
The folder permissions are incorrect. Most of the hosting providers work on Linux systems, so the folders where they store the information have an associated owner, who has the permissions to add things to them. If, for some reason, the permits have been “de-configured” (because we uploaded things in FTP, for instance), it is possible that we cannot continue to upload things to that directory. In that case, the hosting provider usually includes some sort of button to “reset permissions”; if you can’t find it, get in contact with them and they’ll help you.
You’re uploading the incorrect .zip. Another typical error that happens when we buy a plugin or premium theme, appears when we upload the.zip that we’ve been given and things don’t work. The problem is that the.zip you must upload is not that which is given to you, but the one inside that one. The marketplace where you bought the plugin or theme typically sends you a.zip file with varied information (licenses, permissions, etc.) and with the plugin or theme, again, in a.zip format inside. Therefore, you only have to decompress the .zip file that you’ve been given and upload what’s inside.

6. I’ve been hacked. What do I do?!

Breath and calm down. Yes, you have a serious problem that’s not easy to solve. But don’t fret, you’re not alone!

First of all, you have to make sure there are no corrupted files. This means not only “eliminating any additional files”, but you must also check that the files of WordPress itself haven’t been modified. If this was the case, I would do a diff (with a program such as meld, for instance) between your tree of directories of your installation and the one you download clean from WordPress.org.

If everything is ok, we have to look for the differences in wp-config.php and in wp-content (plugins, themes or uploads). Or, better said, we have to “start from scratch”. In other words, I recommend you get rid of all the plugins and themes you have and install them again, downloading them from WordPress.org (or from the marketplace where you bought them). This shouldn’t create any problem, since, in theory, you’ve never edited them manually; what you download from the WordPress repository is, for sure, going to be free of infections. The uploads folder is something more complicated to treat, since users can upload “anything” they want. The only thing I can tell you is to verify that there are no PHP, HTML… files, I don’t know what type of content you usually use, but in general there will only be images or media files.

Finally, we should check the database. For this, verify there isn’t any user registered on your WordPress that you don’t know (it could be the reason why you’re getting weird content). Also verify that no one has added users to the database. In fact, you could check if the “corrupted” index.php appears in the database; maybe it’s not actually uploaded, but there is some weird process that regenerates it.

The truth is solving something like this is slow and quite complicated, one doesn’t really know where or what to look for. If you don’t manage to solve it on your own, look for help from a security expert that can access your installation and help you out.

7. My problem is not any of the previous 😥

This new list of problems is not intended to be exhaustive, so it’s possible that your problem is neither here, nor on the previous post. If this is your case, I recommend you have a look at the WordPress developers page, where they discuss different types of existing errors, since you may get lucky and your problem (together with its solution) may appear on there. If you still can’t find a solution, get in contact with your hosting provider; remember they’re there to help you in this type of situations (as I said, that’s why you pay them for, my friend).

In any case, and before saying goodbye for today, let me remind you of the importance of having backups available when facing these sort of unexpected events. If you don’t have any, you’ll end up learning a valuable lesson the hard way: backups can save your life! With them, you just have to “jump back in time” until recovering a clean and functioning installation. Take it seriously and make it your number one priority: find a hosting provider that offers backups or create them yourself, but don’t trust your abilities to solve problems without them.

And now, tell me, did I forget anything?

Featured Image by Andrew Magill.

10 Gorgeous WordPress Themes to Renew Your Website

Published in WordPress.

January 12, 2017April 6, 2018 by Ruth Raventós Resources Themes

Translated by Núria Adell.

2016 ended and, with so much work to do, were you able to renew your website? Or do you have it on your resolution list for 2017? Don’t worry, we’re here to help you achieve this 😉.

Before starting with the redesign of your website, it’s important that you ask yourself a series of questions to be clear on what you want to achieve with your new website, whether you’re the one in charge of the redesign or not. You might decide you want a custom-made design, as we discuss in our proposal of website design or that you want your site from a predefined theme.

Choosing a predefined theme can be insane since there are thousands of templates available. Next, I will propose a selection of templates from the WordPress Repository and the most popular theme companies to save you a little bit of work😜. As you will see, I have included a few examples of websites that use them so that you get an idea of the end result. I hope the post helps you get some inspiration for the design of your website!

1. Responsive

The theme Responsive by cyberchimps is, with more than 100,000 active installations, one of the most popular free WordPress themes. This theme, as its name indicates, is totally responsive, adapting very well to all types of devices. Some characteristics of this theme are:

Nine themes per page
Eleven widget areas
Six theme designs
Four menu positions

It’s compatible with WooCommerce, multilingual, prepared for WPML, gives support to RTL-Language and it’s translated to more than 54 languages.

It also has a Responsive Pro version for $27 with many more functionalities.

Examples of websites that use the Responsive theme are: Trend Following, The Watch Group Company, Universal Music Group, Food Renovation or Trippel Trappel.

2. Customizr

Customizr is a WordPress theme designed by Nicholas Guillaume with a free and a Pro version. There are currently more than 100,000 active websites that use it and it’s one of the best valued themes in the Theme Repository of WordPress (4.9 out of 5 stars with 828 reviews). It’s professional, versatile, totally responsive and easy to personalize.

Examples of websites using Customizr: Lo más en la red, My beautiful skin, Fauna Natural, Territorio digital or Frozen Yogurt Reviews.

3. Divi

Divi is the only theme by Elegant Themes and it’s available as part of their package of 87 themes. It is a very popular theme thanks to its attractive design with more than 20 predefined page themes and a great variety of characteristics, including the tool to build pages Divi Builder.

This theme, as I mentioned in WordPress Use by Best Companies Inc. 5000 (2016) , is used by Elevate Services on their site. And also on Booking Agency, Brew Life, Doers Agency or Huplaapp, amongst others.

4. Gear

Gear by ThemeTrust is a WordPress theme for any eCommerce website with an elegant and minimalist style. Thus, as it’s expected, it perfectly integrates with WooCommerce and it’s designed to simplify the online sale of products. It’s recommended for any shop.

On the main page you can present information of your products through different sections and slides with parallax shifting. Again, we’re talking about a responsive theme that adjusts to any type of screen and device.

A couple of examples of sites using Gear: Failsworth Blues and The Trifted Dish.

5. OneUp

OneUp by Pixelentity is a theme of a parallax page, totally responsive, adequate for any type of creative or business use. The theme is optimized for mobile phone and desktop platforms. It includes delayed loading of the pictures and the compression of all the scripts required.

Examples of websites that use OneUp: Wild Wood Media, The Dubai Tourism, Ferrerz Fitness, The Bankers, or Mandril Audio

6. Sahifa

The theme Sahifa is the theme designed for blogs or magazines that has been sold the most in Themeforest. The theme is highly configurable and it allows to configure, from the WordPress repository itself, the font, colour and layouts of the theme, allowing for the final design to be totally personalized and adapted to your needs.

On this link, 20 Impressive Websites Built With Sahifa WordPress Theme, you will find a good list of examples of sites that use this WordPress theme.

7. Salient

The theme Salient, designed by ThemeNectar, is also very popular, modern and multi-purposed. It’s designed to give support to any blog and website, and it’s especially ideal for freelancers or innovative studios thanks to its futuristic and modern design. Some characteristics that are worth emphasizing are its capacity to show videos as background and the reduction of the logotype and the headline as you start scrolling down the page.

On 35+ Stunning Examples of Salient – ThemeNectar’s Top-Selling WordPress Theme – In Action or 30 Websites Using Salient Theme – Stunning Salient Theme you have many examples of websites using Salient.

8. Genesis

Framework de Genesis — Framework by Genesis

One of the problems that many websites have with their content is the loading time. Genesis by StudioPress became very popular, amongst other motives, because it solved the problem with its lightness. In addition, Genesis is more than just a theme; it’s a framework that simplifies the creation of new themes!

If you want to use a theme based on Genesis, first you have to install Genesis (the framework), then the child theme and finally, you can define the design you want to use. If you are a WordPress designer, the advantage of using Genesis is that once you understand how the framework works, changing theme becomes very easy.

On the website of StudioPress itself you have a Showcase which shows a series of websites that use Genesis.

9. Avada

Avada is one of the most complete themes of WordPress with more than 280,000 sites using it. It incorporates many options and tools to be able to create, with complete freedom, the design you want in order to make your site look like you want. It’s compatible with the 7 most-used and best-known plugins: WooCommerce, WPML, bbPress, WP Easy Cart, BudyPress, Gravity Forms, Easy Digital Downloads and Events Calendar. On top of it, it’s designed so that you don’t have to fight with code. What else do you want? 😜

If you’re looking for examples of websites with Avada, you will find them on the following links, on colorlib.com have 30 examples and on winningwp other 25. In fact, you have an even more extended list in Avada Showcase Sites.

10. X | The Theme

The theme X by Themeco is a multi-purpose theme. It comes with 4 predefined designs (stacks, not to be mixed up with the child themes): Integrity, Renew, Icon and Ethos, very different to each other and with which you can design your website very easily with a personalizing tool (customizer). It also includes a list of 21 plugins that are perfectly integrated.

You can find examples of websites with the X Theme in: 25+ Stunning Examples of Themeco’s Top-Selling WordPress X Theme in Action, 25+ Beautiful Examples of Websites Based on the X Theme, or for a more complete list: X in the Real World.

So this is our selection of 10 WordPress themes that I’m sure you can use to create a fantastic new website for this year 2017.

And now, what are you waiting for to get to work?

Featured Image by Jason Chen.