Tired of Vagrant? Try Laravel Valet

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.

How to install?

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.

1. Install Homebrew

Install Homebrew:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. Update Homebrew

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.

3. Install PHP 7.0 and MariaDB

We need to install PHP 7.0 using Homebrew:

brew install homebrew/php/php70

We also need to install a database:

brew install mariadb

4. Install Composer

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

5. Install Valet

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.

6. Using Valet

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.

WordPress: The first launch

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!

Sequel Pro

Now we can proceed with the WordPress installation.

WordPress install

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.

WordPress Trunk

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.

Scratchpad

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.

scratchpad-ss

Theme-o-rama

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.

Affinity screenshot

Thomas Guillot designed Shoreditch especially for businesses who want to easily combine multiple panels on any page.

Shoreditch screenshot

Looking for a fresh new blogging-focussed theme? Check out our trio:

  • A modern blogging theme that shows off gorgeous photography, Revelar is designed by Filipe Varela and developed by Ola Bodera;
  • Tammie Lister‘s Cols features a minimalist multi-column text display; and
  • Lyretail, designed by Mel Choyce and developed by Caroline Moore, is a clean single-column theme for personal bloggers with prominent social links in the header.

Take your favorite for a spin today!

Revelar screenshot

Cols screenshot

Lyretail screenshot

What We Look for in Themes for WordPress.com

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.

Design

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:

  • Perspective: sense of distance between elements.
  • Similarity: repeating similar – but not identical – elements with strong visual connections.
  • Continuation: the sense of having a line or pattern extend throughout a design.
  • Repetition: elements being copied or mimicked numerous times.
  • Rhythm: achieved when recurring position, size, color, and use of a graphic element has a focal point interruption.
  • Altering the basic foundation of the design achieves unity and helps keep interest.

Code

We look for themes that follow the WordPress.org Theme Requirements and WordPress.com Theme Requirements.

User Experience

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!

A Set of Theme User Experience Requirements

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!

New Themes: Escutcheon & Toujours

Two new themes are available for download in the WordPress.org theme repo: Escutcheon and Toujours.

Escutcheon (pronounced ess-KUH-chun) is a bold, typography-driven theme for long-form writers to showcase their work. Designed by Mel Choyce and developed by Caroline Moore, Escutcheon — an unusual word referring to a type of shield — supports a social icon menu and displays post excerpts on the front page.

Escutcheon screenshot

Laurel Fulford crafted Toujours (French for “always” — pronounced too-DJOOR) as a responsive remake of the popular Forever theme. Geared to weddings, it features a large slider (available via Jetpack Featured Content), a unique layout for three recent posts, and a special guestbook template.

Toujours screenshot

Whether you’re planning upcoming nuptials or getting down to serious blogging, we welcome you to take Toujours and Escutcheon for a spin.

Restricting User Content: A Dialogue Among Themers

I had a Slack chat with my colleagues recently that we thought might be of interest to other themers.


Ernesto: I have a small theming question I’d like to clarify. Let’s say I have a page that is used as front page and there’s a section in the front page that displays some text. I can display the page’s content there, using the_content(), but I would only want there to be text — no fancy shortcodes or custom content, just basic formatting.

Would you create your own content filter for that section? Something like adding wpautop, convert_smileys, and wp_kses_post (possibly others too, if they make sense) into that filter? Or just use the_content() ?

I am leaning towards the filter approach, since it may give me what I want, without giving users full liberty to put all sorts of things into a div that is supposed to hold some minor text and content.

Tammie: This feels like a UX issue too. Why are you restricting?

Ernesto: Because it’s not a full content post, it’s a space where there should be one or two paragraphs at most. Just some introductory text.

theme screenshot

Tammie: Then why let full content appear anyway? Post restricting is expected behaviour, page restricting isn’t. Let’s not add a new behaviour.

I’d say the_content() and if user messes up, well…

If you limit that it’s adding a new behaviour.

Ernesto: Yeah, that makes sense.

Caroline: I’d agree with keeping it as simple as possible.

Tammie: Maybe they want to add a link. Adding a link there is a totally expected thing.

Caroline: So, the_content() works🙂 And then with [the new content settings feature we’re working on] they could change it to the_excerpt() someday soon.

content-settings

Tammie: Yep, win win.

Ernesto: Very good point… I see no problem with using the_content(), but since I know users want to add everything + the kitchen sink, I was just trying to avoid that.

Caroline: Hahaha.

Ernesto: So yeah, win win.

Tammie: Well that’s assuming they do. Many don’t.

Technically the ones that do make up for ones that don’t😉

David: Yeah, the_content() all the way.

Kathryn: Agreed 100%.

Ernesto: It’s interesting knowing your thoughts on this😀

David: If they put too much content in there, make the theme break elegantly.

Kathryn: If user wants to make their site busy, let them do it.

Kathryn: Users shouldn’t put a zillion widgets in one widget area, but we let them do that😉

Ernesto: Hehe, let them break and then tell them well… you shouldn’t do that.

David: It’s our job as developers to make themes that just work. Part of that is making edge cases not blow up a theme.

Tammie: Well, there’s hand holding and there is spoon feeding. Hands > spoons.

Kathryn: Very much agree re: “Part of that is making edge cases not blow up a theme.”

Also, making cluttered/ugly is different than “breaking”.

Ernesto: I think this is a very good & mature way of thinking… adding stuff for edge cases just makes the theme bloated.

Tammie: Also, edge cases aren’t always bad. We tend to have edge PTSD.

Kathryn: And there’s so much in between cluttered and minimal that is going to look just fine, I think.

Tammie: Yep.

Ernesto: Right, very good discussion and input, thank you so much, that’s why I love y’all:-)

Tammie: Also I kind of love the fact you didn’t even suggest a theme option for that.

Kathryn: Ha.

Ernesto: Hahaha.

Tammie: Times have changed and I like them.

Ernesto: I was going to admit it crossed my mind, but then noticed a page would be cleaner.

Tammie: And that’s why I have even more love about it. Self correcting rocks.

Ernesto: “If they put too much content in there, make the theme break elegantly.” – David Kennedy: Seriously?

David: Yep, I think that’s a sign of theme greatness.

Ernesto: That’s right, the I did what I could to hold the user’s content attitude, I like that too. Definitely adding some float-clearing there.

David: Before this, I worked at a place with a giant, talented editorial team. I thought, Perfect, we can work with them to get exactly the content we need! But they found ways to break things all the time. So whether you know the content, or don’t know it, make it highly fault tolerant.

Ernesto: Very very good advice, thank you!

Sleek Pique

Pique (pronounced “peek”) made its debut in the WordPress.org repository this week. A spiffy scrolling front-page theme crafted by Automattic’s Sarah Semark, Pique lets you add up to eight panels to the homepage by choosing static pages via the Customizer.

Designed with coffee shops in mind, Pique is a great fit for many types of small businesses. It supports a logo or customer testimonials with Jetpack and can display a custom menu in both the header and footer. Check it out!

Pique screenshot

Consider Canapé

Looking for a fresh, elegant theme for a restaurant or other food-related site? Explore Canapé, now available in the WordPresss.org theme repo. Designed by Automattic’s Ola Laczek, Canapé retains its sophisticated look on mobile, tablet, and desktop screens.

Add features like food menus and customer testimonials with Jetpack, and showcase up to three food-menu sections on the homepage.

Check out the Canapé demo or download it and start experimenting.

canape_ss