Thomas

Content Options in Jetpack 4.5

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.

Blog Display

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.

Post excerpt blog display option in Shoreditch

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.

Author Bio

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.

Post Details

The post details section allows users to show or hide the post date, categories, tags, or the post author’s name.

Post Details hidden in Penscratch — Post details hidden in Penscratch

Featured Images

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!

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 *.test 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.2 and MariaDB

We need to install PHP 7.2 using Homebrew:

brew install php72

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') === '93b54496392c062774670ac18b134c3b3a95e5a5e5c8f1a9f115f203b75bf9a129d5daa8ba6a13e2cc8a1da0806388a8') { 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 .test URL. So for example, a folder named MyAwesomeWordPressSite will be accessible from http://myawesomewordpresssite.test.

I downloaded the latest version of WordPress and created a new folder called… WordPress. So when I type wordpress.test 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!

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.'.test';

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.test, 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.test. As it’s not ideal as a URL let’s rename it to http://trunk-wordpress.test:

mv ~/.config/valet/Sites/src ~/.config/valet/Sites/trunk-wordpress

Et voilà! You can access you freshly downloaded WordPress Trunk install in your browser with http://trunk-wordpress.test.

Jetpack Social Menu

With the release of Jetpack 3.9 last month, we introduced a new tool available for all theme developers: Social Menus. It allows site owners to create a new menu location which is used to display links to Social Media Profiles.

Adding Support

Theme developers can add support for a Social Menu by following these three simple steps.

Step 1: Declare support in a function hooked to after_setup_theme.

add_theme_support( 'jetpack-social-menu' );

Step 2: Create a new function to avoid fatal errors if Jetpack isn’t activated.

function themename_social_menu() {
	if ( ! function_exists( 'jetpack_social_menu' ) ) {
		return;
	} else {
		jetpack_social_menu();
	}
}

Step 3: Use the function created in step 2 to output the menu where you would like it displayed in the theme.

themename_social_menu();

Styling

Once you’ve created a menu, Jetpack will automatically enqueue a basic stylesheet to style each one of the menu items, thanks to Genericons. You don’t have to do anything else!

Customizing Jetpack’s Sharing module

One of my favorite feature in Jetpack is sharing, but if you are a theme designer/developer like me, it can be really frustrating trying to customize it.

By adding a simple filter to functions.php or inc/jetpack.php if your theme is based on _s, you can actually avoid the Sharedaddy stylesheet from being enqueued.

/**
 * Remove Jetpack's sharing script.
 */
function _s_remove_sharedaddy_script() {
	remove_action( 'wp_head', 'sharing_add_header', 1 );
}
add_action( 'template_redirect', '_s_remove_sharedaddy_script' );

Now you can add you own custom CSS without worrying about multiple levels like .site-main .entry-content > .sharedaddy .sd-title, or having to use !important to overwrite the Sharedaddy stylesheet.

If you want to go a bit further, you can use some jQuery/Javascript. For example, if you want to create a link that, when you click on it, toggles the sharing buttons:

1) Let’s add some CSS to hide the div:

.sd-sharing-enabled:not(#jp-post-flair) {
	display: none;
}

2) Then create some (very basic) jQuery to do the magic:

/*
 * Create a toggle button for sharedaddy.
 */
function sharedaddy_toggle() {

	// Create toggle button
	$( '.sd-sharing-enabled:not(#jp-post-flair)' ).each( function() {
		$( this ).before( '<a class="sharedaddy-sharing">Toggle Button</a>' );
	} );
	
	// Click to open
	$( '.entry-content' ).on( 'click', '.sharedaddy-sharing', function() {
		$( this ).next( '.sd-sharing-enabled' ).toggle();
	} );
	
}

Make sure you load the function after the window is loaded and after a post-load (for Infinite Scroll).

3) Ta-da!

You can do the same with the Related Posts module or Likes module like so:

/**
 * Remove Jetpack's related-posts and likes scripts.
 */
function _s_remove_jetpack_scripts() {
	wp_dequeue_style( 'jetpack_related-posts' );
	wp_dequeue_style( 'jetpack_likes' );
}
add_action( 'wp_enqueue_scripts', '_s_remove_jetpack_scripts' );

Be aware that the Likes module isn’t fully customizable because the buttons are located in an iframe.

Have fun!

Writr Now Available for WP.org Sites

Writr — a minimalist, content-oriented tumblelog theme developed exclusively for WordPress.com — is now available in the official WordPress Themes Directory.

	Gutenberg 14.6, Divi… on How to add typographic fonts t…
	How to add typograph… on How to add typographic fonts t…
	WordPress News Hub… on How to add typographic fonts t…
	HMG Digital on Block Theme Building Tips
	Automattic Theme Tea… on Create A Blockbase Child …