The title may strike you as a bit ominous, but fear not. Underscores, our popular starter theme for WordPress theme development, isn’t going anywhere. As we continue to push for consistency in themes and imagine what they might become with Gutenberg, we’re bringing our attention back to Underscores. 🚀 For the last year and a half, we’ve … Continue reading “The Future of Underscores and A New Committer”
The title may strike you as a bit ominous, but fear not. Underscores, our popular starter theme for WordPress theme development, isn’t going anywhere. As we continue to push for consistency in themes and imagine what they might become with Gutenberg, we’re bringing our attention back to Underscores. 🚀
For the last year and a half, we’ve experimented with a new starter-theme generator called Components. It was a way to make a few different theme “types” comprised of different components. The starter themes born from it brought with them more code and styles, and gave theme authors a bigger head start in their work. The generator we built to piece the different components together got complex quickly, though. We created a plugin to test builds locally and struggled with a seamless way to make many starter themes from one code base.
We learned a lot, though. We worked on Components at two team meetups, made almost 900 commits to the project and launched dozens of themes with it. However, we hit a point where we realized we had over-engineered parts of the project. The original idea is still solid: make starter themes do more by crafting them out of building blocks. But we didn’t hit the mark, so we’re retiring Components, and looking to bring some of what we learned there to Underscores.
In the last year, we’ve gotten a lot of questions from the community about Underscores and whether we had abandoned it. No way! It’s a stable project, and we enjoyed working on something new, away from it. It gave us better perspective and more ideas for the future of Underscores.
We also know that involvement from the community is vital. It’s been a while since we added our first contributor external to Automattic. To that end, we’ve given long-time Underscores contributor Ulrich Pogson commit access. He’s also a contributor to WordPress, most frequently as a member of the Theme Review Team. We’re excited to have his expertise and passion for world-class themes as part of the project. Please join me in welcoming Ulrich! 🎉
It’s always hard to let go of a project, in this case, Components. But it shouldn’t be, when you walk away with more knowledge than before. It has us excited and reinvigorated about Underscores and its role in the future of theming. And we’re glad Ulrich will help us along the way!
Meet Dara, a beautiful new theme crafted by Caroline Moore, now available for download via WordPress.org. Dara has its roots in a popular theme called Sela. Caroline tells the story of how one theme led to another:
Sela, designed and developed by the Automattic Theme Team’s Ola Bodera, remains one of our most popular themes — and for good reason! It has a softer, sweeter quality not often seen in business themes.
With Dara, I wanted to refine the user experience and include some of the things Sela users regularly asked for; moving the social links closer to the top, for example, or replacing the static image in the hero area with a slider.
As someone who hangs out in the crafty space, I see Sela and Dara as perfect for small businesses and entrepreneurs who want a softer look for their sites, but the themes’ flexibility and attention to detail make them lovely for personal blogs as well.
Dara supports several handy features for business users, like testmonials that let you highlight customer feedback — available through Jetpack’s Custom Content Types module.
Explore the Dara demo or check out how to set it up.
Meet Ixion, the latest theme to join our WordPress.org collection. Designed by Mel Choyce and developed by Caroline Moore, Ixion is a clean and professional theme geared to schools, non-profits, and organizations.
Put your most exciting news front and center with a custom header image and a call-to-action button, highlight three noteworthy accomplishments on the homepage, and – with Jetpack’s Custom Content Types module – use Testimonials to showcase your organization’s satisfied students or customers.
Visit the demo or take Ixion for a spin.
Now available through Jetpack, Content Options let users make small visual changes, like showing or hiding the author, date, featured images, and more.
Last August, we introduced a new WordPress.com Customizer panel called Content Options, which gives users an easy way to make small visual modifications across their sites – no custom CSS needed.
Content Options supports four main features: Blog Display, Author Bio, Post Details, and Featured Images.
Content Options are now available to self-hosted WordPress sites with the latest version of Jetpack (4.5). Theme developers can add support for Content Options by following the Jetpack guide.
Let’s look at the main features of Content Options in more detail.
Users can choose between displaying the full content of each post or an excerpt on the blog and category, tag, and date archive pages, as well as search results.
Default Blog Display
If a theme displays either an excerpt or the full post depending on the post’s post format, theme developers can add a “Default” blog display option to let the theme keep its default blog display settings. For example, by default a theme might always displays posts with the Quote post format as the full post, so a quote is never truncated, while other post formats like Standard might be always displayed as an excerpt.
On the single post view, users can opt to display the name and bio of the post’s author. This information comes directly from the author’s profile at Users → Your Profile, and their Gravatar image.
The post details section allows users to show or hide the post date, categories, tags, or the post author’s name.
Users can choose whether to display featured images on single posts and pages. They can also opt whether to display featured images on blog and archive pages, which include category, tag, and date archives as well as search-results pages.
WordPress.com users have loved the flexibility Content Options gives them. We’re very pleased that self-hosted sites can now benefit as well!
We have three Automattic-made themes now available on WordPress.org.
Rebalance is a fresh take on the classic Imbalance 2 theme. Designed by Mel Choyce and developed by Allan Cole, Rebalance is a contemporary portfolio theme for photographers, artists, and graphic designers looking to showcase their work, and features an elegant Masonry grid for displaying both blog posts and Jetpack portfolio projects.
Another Mel Choyce-designed creation, Karuna is a clean business theme crafted with health and wellness-focused sites in mind. With bright, bold colors, prominent featured images, and support for customer testimonials via Jetpack, your business’s brand is sure to shine with Karuna, which was developed by Caroline Moore.
Child theme Sidespied puts a new spin on Espied, a classic portfolio theme. Created by Tammie Lister, Sidespied shows off photos and images of all kinds in a clean grid layout.
I’ve used Vagrant for more than a year now and although it was crashing from time to time, I always managed to get it working again. Not last week. I don’t what happened, but enough was enough – I decided to pull the plug and look for a better alternative.
I thought about switching back to MAMP, as my needs are pretty straightforward. At the same time, I was also on the lookout for something a bit more modern, something that would allow me to use a custom *.dev URL like Vagrant and share my local site to the world without a headache. That’s when I found Laravel Valet (or Valet for short).
Valet is a Laravel development environment for Mac minimalists. No Vagrant, No Apache, No Nginx, No `/etc/hosts file`. You can even share your sites publicly using local tunnels.
It’s so easy I wish I’d switched to it a few months ago when it was initially released.
Don’t get me wrong – Vagrant is still great for big development environments. But for my own simple WordPress needs, Valet is the perfect tool which I would highly recommend to fellow WordPress developers.
The official documentation and the article written by Tom McFarlin on TutsPlus are both really clear, but I’ll share my own process in case you’d like to try it.
Install Homebrew:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Once installed, make sure you have the latest version of all the packages using brew update.
If you get an error, you probably need to update your .bash_profile. From the terminal, enter sudo nano .bash_profile. It will open the file. Add the following line to it:
export PATH="/usr/local/bin:$PATH"
Save and close (ctrl+X, Y then enter). Let’s make sure we reload the new file now with source .bash_profile in the terminal.
We need to install PHP 7.0 using Homebrew:
brew install homebrew/php/php70
We also need to install a database:
brew install mariadb
Valet requires Composer to work. If you don’t have it installed on your computer, run this in your terminal to get the latest Composer version:
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('SHA384', 'composer-setup.php') === 'aa96f26c2b67226a324c27919f1eb05f21c248b987e6195cad9690d5c1ff713d53020a02ac8c217dbf90a7eacc9d141d') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
mv composer.phar /usr/local/bin/composer
First of all, we need to make sure we can install Valet.
From the terminal, enter sudo nano .bash_profile. Once the file is open, add a new line to it:
export PATH="$PATH:$HOME/.composer/vendor/bin"
Save and close the file (ctrl+X, Y then enter). Reload the new file with source .bash_profile in the terminal.
Now we can continue our installation:
composer global require laravel/valet
Once it’s done you will see a success message like so: Writing lock file. Generating autoload files.
Now we need to finalize the installation of Valet:
valet install
After a moment you should get a Valet installed successfully! message.
That’s it. Valet is installed and is running.
To start using Valet, you need to “park” it. Go to a folder containing all you sites, e.g. cd /Sites/, and simply type valet park. From now on, all the folders inside this Site folder will get a .dev URL. So for example, a folder named MyAwesomeWordPressSite will be accessible from http://myawesomewordpresssite.dev.
I downloaded the latest version of WordPress and created a new folder called… WordPress. So when I type wordpress.dev in my browser I’m being redirected to my WordPress site. On the first launch, you will have to install WordPress the same way you’d do on a server.
First of all, we need to start the MySQL server so in your terminal just enter mysql.server start. This step is pretty much the equivalent of vagrant up. You will have to do it every time you want to work. To turn it off just enter mysql.server stop (just like vagrant halt).
Then you will need a MySQL database.
In the terminal, run: (whatever is the name of our database here)
mysql -uroot CREATE DATABASE whatever; exit
If you prefer a GUI, I would recommend Sequel Pro to create and manage my databases. It’s free and it has a simple interface.
Name: Valet (can be anything) Host: 127.0.0.1 Username: root Password: leave it blank!
Now we can proceed with the WordPress installation.
If you run into an error like Fatal error: Uncaught phpmailerException: Invalid address: wordpress@ we need to update the WordPress driver. In the terminal run:
sudo nano ~/.composer/vendor/laravel/valet/cli/drivers/WordPressValetDriver.php
Add within frontControllerPath:
$_SERVER['SERVER_NAME'] = $siteName.'.dev';
Save and close the file (ctrl+X, Y then enter).
And that’s it… You’re done.
You can also have a Trunk version of WordPress. Just create a new folder (still in Sites), e.g. WordPress-Trunk, and checkout WordPress.
cd /Sites/WordPress-Trunk svn co https://develop.svn.wordpress.org/trunk/src/ .
So every time you want to update this install all you need to do is:
cd /Sites/WordPress-Trunk/src/ svn up
If you now go to http://wordpress-trunk.dev, you will see an error 404 because Valet doesn’t understand it’s a WordPress site. No worries. You just need to link the src folder to Valet (where the actual WordPress site is).
cd /Sites/WordPress-Trunk/src/ valet link
Now you can access Trunk via http://src.dev. As it’s not ideal as a URL let’s rename it to http://trunk-wordpress.dev:
mv ~/.valet/Sites/src ~/.valet/Sites/trunk-wordpress
Et voilà! You can access you freshly downloaded WordPress Trunk install in your browser with http://trunk-wordpress.dev.
Created by Automattic’s Laurel Fulford, whimsical Scratchpad showcases your writing, photos, and drawings. Full of bright colors and illustrative details – courtesy of fast-loading SVGs – the theme pays special attention to styling post formats for visual variety. A perfect fit for sharing projects, recipes, and stories, Scratchpad is now available for download on WordPress.org.
We have a November treat for theme-lovers – a slew of new free themes by Automattic designers and theme wranglers have made their debut on WordPress.org. Meet the fabulous five:
Crafted by Caroline Moore, Affinity features an elegant multi-panel scrolling front page. Geared to weddings and family announcements, it’s flexible enough to suit a wide variety of sites.
Thomas Guillot designed Shoreditch especially for businesses who want to easily combine multiple panels on any page.
Looking for a fresh new blogging-focussed theme? Check out our trio:
Take your favorite for a spin today!
What kinds of themes do we look for when we add to our collection on WordPress.com? We get this question a lot, both from existing and potential theme shops. And while some of the specifics evolve over time, the principles of what makes a good theme good remain the same. Whether it’s on WordPress.com or not.
When reviewing themes for WordPress.com, we never accept a theme based on design alone. We want to see the entire theme experience and for that you have to look at the user experience and code too. Why? You can have a beautiful design, but still make a bad theme. So we always look at three aspects, what we call the Three Amigos, named after a popular American comedy movie.
We consider a lot of different design aspects. In general, we look for a strong grasp of design principles, especially methods that help establish harmony and unity:
We look for themes that follow the WordPress.org Theme Requirements and WordPress.com Theme Requirements.
We run through setup to see how challenging it is to make the theme look like the theme demo. Complicated theme setups cause a large amount of user frustration, refunds and theme switches. We look at theme options to see if they’re intuitive to set up, simple, or complex. Any patterns that may confuse WordPress.com users are noted. User experience might just be the most important thing. You can’t use a theme if you can’t use it.
We’re always open to exceptions, if they can be justified by an innovative or creative theme that users will love.
And one last note – whether our marketplace is officially accepting new theme shops or not, we’re always looking for amazing, new themes. Make one, put it out there, and we’ll probably find it.
Happy theming!
This year, we’ve focused heavily on improving people’s experience using themes on WordPress.com. We’ve dug into defining the most common and tricky issues for people using themes through research, user testing, and iteration.
We still have a long way to go toward substantially improving people’s WordPress theme experience. To that end, we’re introducing a new set of requirements for all themes on WordPress.com to follow, geared toward making themes easier for people to set up and use. We call it the TUX List.
It features best practices like this:
- Keep widget names descriptive of their location, ie. Sidebar, Footer, etc. Reason: Users can more easily find them and know what area they refer to.
- Widget IDs should take the format of
sidebar-1,sidebar-2, etc.Reason: Consistency across themes means that a user can switch themes and not have to reassign their widgets to the theme’s widget locations. It also allows for easier readability in code.
We wanted to share it with the community, since incorporating these best practices into your themes on WordPress.org and elsewhere means anyone using them will have an easier time getting to what they really want to do: publish their site. Nothing on the list should restrict your creativity when it comes to designs.
Give it a read and let us know if you have any questions or ideas on how to make it better. Making themes easier is a job for everyone. Happy theming!
