Tendencias de diseño de temas de WordPress (2003 a 2020)

Translating…

When the first version of WordPress was shipped in May 2003, it had groundbreaking design features for the time and defined the first batch of WordPress theme design trends to come. There were highly intelligent line breaks, nice textures, and the ability for bloggers to add links to their blogrolls.

Remember blogrolls? They were a big deal 16 years ago. Everyone who was anyone was linking to other bloggers and hoping to get links in return.

Today, blogrolls are a thing of the past. In 2020, we’ve got page builders and block-based editing that let anyone create and customize a WordPress site — no code required.

So how did we get here? To understand what WordPress is today, let’s take a look at how WordPress themes have evolved over the past 16 years.

WordPress theme design trends from 2003-2020

The first default WordPress theme (hint: it wasn’t Kubrick)

When WordPress 0.71-gold was released in 2003, it came with the default b2layout.

The template was basic and ideal for blogging at the time. It had a simple header and a black sidebar. You’ve got to remember, internet speeds were relatively slow at the time and the simple WordPress theme design not only loaded quick enough, but was easy to modify compared to rival blogging platform Moveable Type.

\"WordPress

Sidebars: A mainstay of early blogs

Sidebars were an important component of early web design as designers tried to figure out how to design for the web — and WordPress theme design was no exception. Sidebars would feature prominently for many years, briefly disappearing in Twenty Thirteen and returning in Twenty Fourteen.

In the early days of WordPress theme design trends, sidebars enabled bloggers to proudly display their blogrolls. With the release of WordPress 0.7 and its Links Manager, bloggers could better manage their blogrolls and automatically add them to the sidebar.

The basic template that came with WordPress was given a facelift for WordPress 1.2. The new color scheme was a breath of fresh air — a pleasant change from the previously dark theme.

\"WordPress

WordPress 1.2 featured plugin architecture for the first time, which allowed developers to extend the functionality of their theme design and share their plugins with the fledgling WordPress community.

In 2004, WordPress was the new kid on the blogging block — and something fun for folks who loved playing with code to customize. These tech savvy bloggers took to plugins with enthusiasm, and contributed to WordPress development overall by reporting bugs, providing feedback, and asking for new features.

WordPress core developers were all volunteers and used WordPress themselves for their blogs. As an open source project, feedback was welcomed and encouraged — and it enabled a user-centric approach to WordPress development that was unlike other blogging platforms at the time.

👉 Quick interlude: For more on how the WordPress user interface has changed, check out the evolution of WordPress UI.

The Kubrick era: 2005-2010

In 2005, WordPress 1.5 introduced a flexible new theme system. Themes were broken down into different sections and files, giving users more control over how they customized their sites.

For instance, common site elements like headers, footers, and sidebars were split into their own files. Users could make a change to just one file (i.e home.php or comments.php) and see it everywhere immediately.

WordPress 1.5 also heralded the start of the long-running Kubrick era. Generally acknowledged as the first real default theme for WordPress, Kubrick showcased the power of the new theme system.

\"WordPress

Michael Heilemann created the simple blue and white blog template and, for its time, the design was striking. With its rounded corners, custom header and two white columns — including a wide one for posts and a slimmer one for a sidebar — Kubrick was cutting edge!

Kubrick was the first flexible theme that worked out-of-the-box with many plugins. It was also the front-end face of WordPress from 2005 to 2010, making it the mainstay of WordPress theme design trends for years to come.

Premium themes: A happy accident

The WordPress Theme Repository was launched in 2008, allowing bloggers to download free WordPress themes and upload and share their own custom theme designs. The repository was something of a WordPress theme design showcase, letting users see how others were customizing WordPress and stretching the limitations of the platform.

\"WordPress

Brian Gardner was one such blogger trying to push the boundaries of what WordPress could do. He downloaded themes, made his own customizations, and then uploaded his updated designs to the repository for others to use for free.

This led to requests for customizations. At first, bloggers paid him $25-$50 to change things like colors. But soon he was getting requests for more complex customizations. As he would later tell the StudioPress.fm podcast, he was making “vacation money” and it was fun compared to his boring desk job.

Things changed when a real estate agent asked him to customize his blog. Brian went above and beyond, creating a WordPress theme design that could work as a front page so it would look more like a website than blog.

However, the agent rejected it saying he just wanted a basic blog. Brian was crushed.

Rather than ditch the design, he wrote a blog post about it and asked his followers if the custom theme was something they’d be interested in buying. The response was overwhelmingly positive. Brian called his theme design the Revolution theme.

See the original Revolution theme:
\"Theme

In 2009, Revolution was rebranded to what we know it as today – StudioPress.

The rise and rise of WordPress customization

During 2008 and 2009, premium theme shops and WordPress-centric projects were being launched and there was a wave of new tutorial websites offering code hacks and ideas for customizing theme design that you wouldn’t find in the Codex. It was a whole new era in WordPress theme design trends – empowering the user.

Among these how-to sites was ThemeShaper.com. Originally started by Ian Stewart, ThemeShaper was a place for Ian to share his Thematic theme. But Thematic was more than just a theme — it was an opportunity for Ian to learn how the WordPress theme system worked and share his learnings with the community.

\"Thematic\"

As WP Tavern’s Jeff Chandler recalls of Ian and Thematic, 2008 was the “wild west of theme development and any person who regularly shared theme development techniques became an influential member of the community.”

The emergence of theme frameworks

It was around this time that Brian Gardner partnered with Nathan Rice to launch Genesis, one of the first WordPress theme frameworks. These frameworks enabled developers to create themes that shared a common code base, providing a code library and basic architecture for themes that allowed users to put different designs on top. As Brian told the StudioPress.fm podcast:

“Once we built Genesis and introduced that idea and concept to the WordPress community, people bought into it. Obviously, we had a pretty good following through StudioPress and me personally. That sort of transitioned from standalone themes to what’s now Genesis the framework and the child theme system that comes along with it.”

\"Genesis

Other theme frameworks soon emerged, such as Thesis. These frameworks marked an evolutionary step forward in WordPress theme development, which Yoast’s Joost de Valk summed up perfectly in a ThemeShaper post back in 2009:

“Chris Pearson’s Thesis and Ian Stewart’s Thematic might be pointing (WordPress theme design trends) in the direction where it should be heading: a theme that basically isn’t a theme anymore, it’s a layout engine.”

WordPress 3.0: A turning point

In 2010, the release of WordPress 3.0 marked a major leap forward in the development of the platform. With features including custom post types, better custom taxonomies, and custom background, headers, and menus, WordPress was becoming a fully fledged content management system, not just a simple blogging platform.

WordPress 3.0 came with Twenty Ten, officially ending Kubrick’s reign as the default theme and ushering in the tradition of a new default theme for each year, which was a big milestone for WordPress theme design trends.

\"WordPress

The theme customizer

By 2012, the evolution of WordPress theme design was moving along at steady pace. Now that commercial businesses were invested in seeing WordPress grow, they were developing premium themes with more features and functionality that enabled users to customize them more easily via panels in the WordPress admin.

It was during this time that the Theme Customizer was introduced to WordPress 3.4. The Theme Customizer let users make basic changes to themes, such as colors and backgrounds and preview them before making them live.

\"Theme

Responsive design and mobile

Around this time, responsive design was growing in popularity as more and more people were using their smartphones to access the web. Twenty Twelve was the first fully response default theme crafted with a mobile-first layout so it could be viewed on any size device, from smartphones to big HiDPI/retina screens.

Twenty Twelve was also special for another reason — it was the first default theme to come with a special homepage template, rather than force users to display blog posts on the homepage.

\"Theme

The emergence of builder themes

Customizing WordPress around this time was starting to get easier. Thanks to the Theme Customizer and the many websites that published tutorials on how to customize WordPress, users could make any change to their site.

The only problem was, users still needed some knowledge of CSS and PHP if they wanted to make customizations beyond the advanced settings available with many themes at the time.

This changed in 2013 when page builders emerged — and the most well-known at the time was Divi.

\"Theme

Elegant Themes’ Divi page builder was groundbreaking. It let users drag and drop different sections within a page and control every aspect of a site, from colors and fonts to headers and footers. It came with various pre-built layouts and could be easily integrated with WooCommerce. It was responsive and could be used to display fullwidth images and video.

Divi was an instant success — the 965 comments on the announcement post prove that! For the first time, anyone could build a website without having to touch a single line of code.

The world of WordPress theme design trends to this point had evolved from having the ability to drag and drop widgets, to drag and drop pages, and now drag and drop themes.

Magazine themes

Let’s pause for a minute and rewind the clock back to 2009.

The Theme Repository was still quite new, but it was growing. Users were downloading theme and contributing their own theme designs.

At the same time, premium WordPress themes were also growing in popularity. Compared to the free themes in the repository, premium themes offered advanced features. But more importantly, they were not blogging themes. The Theme Repository was a great place to download a theme — if you wanted a blog.

So started a new chapter in WordPress theme design trends – magazine themes, which allowed people to run more sophisticated blogs and news sites with more content than a traditional blog layout allowed. These types of themes often included ad space, which appealed to users who wanted to make money via their site.

An example of a magazine theme:
\"Sight

Magazine themes were a natural evolution of blogging themes that allowed users to most of categories, tags, and post formats.

Fast forward to 2014 and the default WordPress theme finally caught up. Twenty Fourteen featured a sleek, modern, and beautifully crafted responsive design that allowed anyone to turn their website into a magazine.

See Twenty Fourteen in action:
\"Theme

Business and portfolio themes

In 2015, as WordPress continued to grow into a fully fledged CMS, the next natural evolution was business and portfolio themes. People were starting to use WordPress to power their business and agency sites — and even corporate sites — while freelancers were using WordPress to showcase their portfolios.

 

The most popular theme available at this time was Avada, which today is still the most popular theme at ThemeForest.com.

👉 Which is better: Avada, Divi, or the X theme?

Launched in 2006, ThemeForest helped propel premium WordPress themes. ThemeForest provided a marketplace where users could buy themes, and at the same time providing a place where developers and agencies could sell their creations.

\"Theme

Meanwhile, sidebars were less common in business themes, which tended to feature a horizontal and layered design similar to the Zelle theme pictured below. The popularity of sidebars waned as responsive design evolved (sidebars were tricky to display on smaller devices). Sidebar-less designs similar to the default Twenty Thirteen theme were becoming more popular.

\"zelle

This was also around the time that minimal, flat designs, such as Flat by Themify, were becoming popular among WordPress theme design trends.

\"Theme

Multipurpose themes

By 2015, multipurpose themes were a thing — and ThemeForest was the place to find them. The proliferation of multipurpose themes was undoubtedly due to the popularity of ThemeForest’s vast marketplace, but also independent premium theme shops. ThemeIsle’s popular Neve theme, for example, is hugely customizable and ideal for use on any kind of site thanks to its many built-in templates:

ole.com/QGuBBBY.8ml5~659d4/w:auto/h:auto/q:90/https://s34628.pcdn.co/wp-content/uploads/2019/02/image6.png \»class =\» aligncenter tamaño completo wp-image-42050 \»style =\» margin: 40px auto; -webkit-box-shadow: 0px 0px 8px 2px rgba (0,0,0,0.5); -moz-caja-sombra: 0px 0px 8px 2px rgba (0,0,0,0.5); caja-sombra: 0px 0px 8px 2px rgba (0,0,0,0.5); \»src =\» https://iotvnaw69daj.i.optimole.com/QGuBBBY.8ml5~659d4/w:auto/h:auto/q : eco / https: //s34628.pcdn.co/wp-content/uploads/2019/02/image6.png \»alt =\» ThemeIsle \»width =\» 700 \»height =\» 429 \»/>

Estos temas multipropósito de todo menos el fregadero de la cocina reunían toneladas de opciones diferentes en un tema en el backend, mientras que presentaban un montón de diseños diferentes en el front-end.

De forma similar a los marcos temáticos, este tipo de diseño de tema de WordPress se puede configurar para muchos propósitos diferentes. Puede usar el mismo tema para crear un sitio de comercio electrónico, un sitio comercial o una cartera simplemente actualizando el panel de opciones del tema.

Por ejemplo, estas son solo algunas de las BeTheme más de 400 demostraciones :

Inicialmente, estos temas presentaban todas las funciones necesarias para que el tema funcionara dentro del tema en sí. Pero luego comenzaron a empaquetar complementos de terceros para manejar cualquier funcionalidad adicional. Los paquetes populares incluirían un tema premium como Avada + Slider Revolution + Visual Composer.

Creación de páginas Los complementos como Visual Composer (ahora WPBakery Page Builder) se incluían con frecuencia con temas premium, lo que permitía a los usuarios personalizar sus temas en el front-end y obtener una vista previa de los cambios en vivo.

Encabezados de héroe y de pantalla completa

En 2016, los encabezados eran cada vez más grandes y llamativos. Al principio, eran de ancho completo y luego se convirtieron en pantalla completa y presentaban imágenes o videos deslizantes.

Esta tendencia en la comunidad más amplia de diseño web se reflejó en los populares temas premium de WordPress de la época, incluidos Avada, X Theme, Bridge y BeTheme, que ofrecían diseños de encabezado de pantalla completa y héroes como el tema Salient a continuación.

Temas especializados

Para 2017, ThemeForest y los desarrolladores de temas premium independientes más pequeños estaban desarrollando temas de nicho. Si bien los temas multipropósito permitían a los usuarios, a menudo implementadores, crear cualquier tipo de sitio de WordPress, los temas de nicho servían a industrias específicas.

Iglesias, organizaciones benéficas , músicos , entrenadores personales, entrenadores de vida, bufetes de abogados, agentes de bienes raíces : lo que sea, había un tema específico para él.

Estos temas se enviaron con funciones que fueron útiles para propósitos específicos. Por ejemplo, reproductores de música para bandas, herramientas de recaudación de fondos para organizaciones sin fines de lucro e incluso gestión de tablas de puntos para clubes deportivos.

Hoy: creadores de páginas y editor de bloques

Y ahora estamos en temas para constructores y la fusión de Gutenberg en el núcleo de WordPress.

Durante un tiempo, Visual Composer fue el complemento de creación de páginas de arrastrar y soltar para el diseño de temas de WordPress: ThemeForest y su paquete de temas se aseguraron de eso. Divi ha sido otra solución muy popular para los usuarios que desean crear sitios web rápidamente.

Y sí, ha habido muchas otras herramientas de creación de páginas similares a lo largo de los años. Beaver Builder y, más recientemente, Elementor han permitido a usuarios y desarrolladores crear sitios complejos usando arrastrar y soltar. Y ahora, incluso puede descargar temas y plantillas de Elementor .

< div class = \"su-note-inner su-u-clearfix su-u-trim\" style = \"color de fondo: #fcfcfc; color de borde: #ffffff; color: # 333333; radio de borde: 3px; -moz -borde-radio: 3px; -webkit-border-radius: 3px; \">

👉 ¿Elementor, Beaver Builder o Divi? ¿Cuál es mejor?

Nuevas plataformas de sitios web como Squarespace y Wix desafió el dominio de WordPress como el CMS más popular del mundo. El hecho es que estos competidores ofrecen una construcción de páginas fácil de arrastrar y soltar que el núcleo de WordPress simplemente no tiene. Bueno, no lo hizo hasta WordPress 5.0 .

WordPress 5.0 y la fusión del proyecto Gutenberg en el código de WordPress es un intento de WordPress para ponerse al día, por lo que puede atraer a los usuarios que ahora esperan funcionalidad de creación de páginas en plataformas de sitios web.

Como explica WordPress.org:

“Gutenberg es más que un editor. También es la base que revolucionará la personalización y la creación de sitios en WordPress \».

Gutenberg ( y temas compatibles con Gutenberg ) ofrece una edición y construcción basada en bloques experiencia que permite a los usuarios crear publicaciones de blog (al menos por ahora). Un bloque es cualquier elemento de contenido (una imagen, un párrafo de texto o un video de YouTube) y estos bloques se pueden insertar, configurar y mover para crear diseños de publicaciones.

El Twenty Twenty predeterminado actual fue diseñado para mostrar el poder del editor de bloques. Cuenta con estilos personalizados para todos los bloques predeterminados y, a diferencia de muchos temas predeterminados de WordPress que se adaptan a un propósito (es decir, blogs, revistas), Twenty Twenty se puede adaptar para su uso en una amplia gama de sitios web, desde portafolios y sitios comerciales hasta blogs y no beneficios.

\"veinte

¿Qué sigue para el editor de bloques? El proyecto todavía está en desarrollo activo como un complemento separado, con planes de continuar desarrollando el proyecto para proporcionar una mayor experiencia de creación de páginas en WordPress, no solo publicaciones.

Conclusión

Ha habido muchas tendencias de diseño de temas de WordPress diferentes a lo largo de los años, y WordPress como plataforma ha avanzado mucho desde 2003. Ahora, los usuarios pueden controlar todos los aspectos del diseño de su sitio gracias al desarrollo de soluciones de creación de páginas.

¿A dónde irá el diseño de temas de WordPress en los próximos años? Quién sabe. El editor de bloques aún es nuevo y tiene un largo camino por recorrer. Los creadores de páginas se han convertido en la norma y ofrecen una personalización con la que los usuarios de hace 16 años solo podían soñar.

Mientras tanto, en el backend, la API REST de WordPress significa que todo vale: WordPress es completamente irreconocible en sitios web desacoplados, incluso con soluciones estáticas de WordPress que aparecen aquí y allá.

¿Cuáles son sus predicciones para el futuro de las tendencias de diseño de temas de WordPress? Háganos saber en los comentarios a continuación.

< div class = \"su-spoiler-title\" tabindex = \"0\" role = \"button\"> Créditos de la imagen:

No olvide unirse a nuestro curso intensivo sobre cómo acelerar su sitio de WordPress. Con algunas correcciones sencillas, puede reducir su tiempo de carga hasta en un 50-80%: