The Display Posts Shortcode plugin lets you display a list of posts based on any criteria. By default it displays titles only. The example below makes it display the post’s title and full content.
While I try to support all the core blocks in the themes I build, sometimes it makes sense to remove a few. Typically it’s because I built a custom block that’s similar to a core block while addressing the design and functional requirements of the theme. Most of my themes include a “Content and Image” block that’s similar to the “Media & Text” block but it uses the theme’s grid layout. Sometimes I’ll unregister the “Search” block and create my own that uses the You can use the I also enqueue any custom fonts used on the frontend so I can also use them in the editor styles. Now that you’ve created an editor.js file and enqueued it into the block editor, you can use Here’s a list of all the core block types. How often do you write My I was looking to see which attributes are included in the This displayed all the gallery block information on the right side of the screen: I include this in a mu-plugin locally so it only runs in my development environment, but you could also add it to a plugin or your theme’s functions.php file. I’m searching for a WordPress Developer to help us build custom WordPress themes and support our clients. This is the perfect role for a WordPress developer with limited freelance work experience. In addition to mastering our development approach, you’ll learn our sales process, participate in client calls, and receive personal coaching from me. I’ll consider both part-time and full-time applicants, and we’d start working together in August or September. We are a collective of independent designers and developers working together to help publishers grow and thrive. We’re currently a team of four: two designers (Duane Smith and Andrew Pautler) and two developers (myself and Richard Buff). We build custom WordPress themes focused on performance, user experience, accessibility, scalability, and SEO. We do this to help publishers express their brand, grow their audience, and thrive in their marketplace. If this opportunity sounds interesting to you, then please submit an application by July 11th. Please clearly include the following in your cover letter: Note: The application period is now over. A custom honeypot is a simple and effective way to eliminate spam. If a hidden field in your form is filled in, you can be fairly confident the submission is spam. WPForms does include a built-in honeypot, but now that the plugin is used on millions of sites, most spam bots have been updated to identify and skip the WPForms field with a name of Your custom honeypot is different. It’s unique to your form and looks like any other field to a bot. I have pretty much eliminated spam on my contact form with a custom honeypot. First, come up with a unique CSS class name you’ll use to identify your honeypot field. Make it something unique to your site (ie: not Create a field in your form and add your custom class to it. Add the following code to your theme’s functions.php file or a Core Functionality plugin. If this field is ever filled in, the submission will be marked as spam and have a honeypot message of “[Custom honeypot]”. Make sure you update the You can also enable logging so you can see if the honeypot is working. Every time a spam entry is submitted, this will create a post in the wpforms_log post type with the honeypot message and the full submission. I recommend only logging this data temporarily because you don’t want to fill up your database with a bunch of unimportant spam messages. First, update the Use this code to make the WPForms Log post type visible. You can then access it in WPForms > Logs. SpinupWP is a modern cloud-based server control panel. It gives you the features of a managed WordPress host on your own low-cost and scalable Digital Ocean servers. It’s a great choice for production sites, and I host many of my personal sites there. It also makes an excellent development environment. My development server requirements are: I’m currently using a $15/month droplet with 3GB of memory and 60GB of storage. When you add in the $9/month for SpinupWP, my total hosting bill of $24/month is less than most managed WordPress hosts for a single site. If you sign up for SpinupWP using the link below, you’ll get a $50 credit added to your account after 30 days. I use git to version control the custom themes I develop. When I’m ready to push my local changes to the server, I type For my clients hosted with WPEngine or BigScoots, I use their built-in staging environments and git-based deployment. For more information, see my articles on git for WPEngine and git for BigScoots. If a client is hosted elsewhere, I use SpinupWP to replicate the same git push development workflow and features. Once you have your SpinupWP server setup, it’s easy to add new sites. I have a domain I use for development sites, with each site being setup as a subdomain. Log into the SpinupWP Dashboard and click the “New Site” button. Create a fresh WordPress install (here’s a guide). Install WP Migrate DB Pro along with the Media and Theme & Plugin addons on the production site and the new development site. Pull a copy of the database, media, themes, and plugins to your dev server. Alternatively, you can copy the site files over via SSH. In your local environment, add the remote: A lot of the sites I build have massive uploads directories. To save local hard drive space and simplify database syncing, I don’t pull any of the media down locally. I’ll use Migrate DB Pro to pull down a local copy of the database, theme and plugins. I’ll then install BE Media from Production and use it to source media from the development server. You can install and set it up with wp cli: One of the first things I do when building a new theme is determine all the required image sizes. After adding the relevant Likewise, if I need to upload new images, I push the database to staging, upload the image on staging, then pull a fresh copy of the database locally. The new NexRep website is built completely with the Gutenberg block editor. We’ve built dozens of WordPress sites just like NexRep that rely on the block editor for rich, engaging landing pages that are easily maintained by non-technical editors with a consistent style guide. These are my tips for success with Gutenberg theme development. Table of Contents If you are working with a designer, make sure they are familiar with the block editor and use an atomic design approach. We start with the atoms of our style guide – headings, paragraph, link, and button. These are then built into molecules, like a Post Summary (post title, category, excerpt). These are then built into organisms, like a Post Listing (section header, 3 column grid of posts). The launch of Gutenberg was the final push I needed to no longer work with client-provided designs. Every website I build is now designed by my two design partners, Duane Smith and Andrew Pautler, who have a deep understanding of the Gutenberg block editor. An atomic design approach empowers content creators with the full power of the Gutenberg block editor, rather than fighting against it and trying to maintain an old template-based design approach. To ensure the best content editing experience, the backend editor should match the frontend as closely as possible. Here’s what the block editor looks like for the page shown in the first screenshot. Use an editor stylesheet to load a separate CSS file in the editor with your unique block styles. Create an You can use the editor font sizes feature to define different font size options for paragraph text. The defaults are Small, Normal, and Large, but you can load any number you’d like. SASS comes in handy here. Rather than trying to maintain two separate stylesheets, you can break your main stylesheet into SASS partials and build both stylesheets with the relevant partials. When you update a style that applies to the block editor, it automatically updates both style.css and editor-style.css. Take a look at my starter themes for examples of how I structure my stylesheets. You should also update the Gutenberg color palette to use your theme colors. We use the color options for changing button colors and for adding background color to full width sections. We’ll typically have two versions for each color: the normal (darker) version which will have white text, and a lighter version that will use the standard text color. If you use the In some instances, you may want to load scripts or styles that are not modified by WordPress. You can use the On the NexRep site, we’re loading a stylesheet to change the content area width based on the selected page layout (ex: Full Width Content vs Content Sidebar). You can add style variations to core blocks using block styles. On the NexRep site, we have two button styles (Default and Feature), and have removed unnecessary block styles from the separator and quote blocks. You can also remove core blocks using On NexRep, we have custom blocks that are similar to the core Media & Text, Cover, and Latest Posts blocks. I’m a huge fan of Advanced Custom Fields. We use it on every website for custom blocks, site options, term meta, and more. One of the most common questions I’m asked by WordPress developers exploring Gutenberg is whether they need to build custom blocks natively with React or use a plugin like ACF. I personally think of it along the same lines as custom metaboxes. For single use blocks built for a specific website, it makes sense to use a tool like ACF for rapid development. If you plan to distribute your block publicly in a plugin, you’ll want to build it with React so there isn’t a dependency on another plugin. Most of the websites we build include 10-20 custom blocks. The NexRep site included these custom blocks: Try to leverage core blocks as much as possible, and keep your custom blocks simple. In the quick video below, you’ll see how we use the Group block for the full width section with Heading and Icon Links block inside. The final step to a successful project is training the client so they are comfortable with the new theme. This is especially important when it comes to the block editor as this is likely the first time the client has interacted with it. We provide WP101 video tutorials to all of our clients. On websites like NexRep that include a fairly complex design with custom blocks, we record custom videos to include alongside the standard WordPress videos. Almost all of our food blogger and publisher clients use email optins to encourage readers to join their email newsletter. We often customize the title and description of the form based on the current post’s category. For instance, the newsletter signup form in the Beauty category might look like: While we could build a separate form for every category, a simpler approach is to create a single form and use category metadata to override the default title and description for certain categories. Go to WPForms > Add New and create your newsletter signup form. Include the standard title and description that’s applicable site-wide. If the category does not have a specific title or description set, it will use whatever you have set here. Using Advanced Custom Fields, create a metabox that appears on the Edit Category screen allowing editors to change the Optin Title and Optin Description. I’m using Finally, we can add the following code to change the form’s title and description. This code can go in your theme’s functions.php file or a core functionality plugin. Make sure you change Many of our food blogger clients are hosted with Big Scoots, a popular managed WordPress host. Their portal includes one-click push between your production and staging environments, which is great for testing code changes before deploying on your production site. With a bit of work you can create a git-based deployment workflow similar to WPEngine. I’ve also written a similar article for using git with SpinupWP. If everything below looks too technical, I highly recommend using the WP Pusher plugin. It’s incredibly easy to use, free for public repos, and reasonably priced for private repos. We use WP Pusher for any clients not hosted with Big Scoots or WPEngine. Open a support ticket requesting git to be setup on the server and include your public key. They will respond back confirming it has been installed and provide you with SSH access to the server. Open Terminal and use ssh to connect to your server ( We’re going to set up a bare git repository in the site directory. We want to create it in By keeping it outside the public directory we won’t have any issues with the “Push Live to Staging” or “Push Staging to Live” features – they move the contents of the public directory. You can use the exact same approach outlined above to setup git on staging. If you haven’t created a staging environment yet, log into the BigScoots Portal, go to your site, and click “Create Staging”. Once the staging site has been created, ssh into the server and navigate to the staging site’s directory. Using the clientname.com example above, the staging environment would be named Once you have everything setup on the server, go back to your local environment and add the staging remote The custom WordPress themes we build use brand colors for certain design elements and the Gutenberg color palette. We usually have three versions of each color: the main color, and lighter/darker versions for hover effects. We’ll often auto-generate the lighter/darker versions, but sometimes we need to specify a custom color. In the past I’ve added all of the colors as their own independent variables: I’ve recently shifted to using a custom SASS function, Inside my theme I define a map of The list of 6 variables above has been reduce to: And here’s my custom If you’d like to build your own SASS functions, take a look at the @function documentation. Reusable Blocks are one of my favorite features in the new Gutenberg block editor. You can make content “reusable” and insert it into multiple pages. We use this on GBC Law Group to list their services throughout the site. If they add a new service, it will automatically update everywhere at once. Reusable blocks let you write content once and use it on multiple pages of your site. If you update the reusable block on any of those pages, it will automatically update everywhere it was used, keeping them in sync. Reusable blocks are actually posts in a custom post type. When you create a reusable block, it adds those blocks to a new post in the To create a reusable block, start by adding any block to the page, then click “Add to Reusable Blocks”. Give your reusable block a title, then click “Save”. You can click “Edit” to add additional content. When you insert a reusable block in a page, it references the reusable block’s post ID so it can always pull in the latest content. That’s how you can edit the reusable block once and it’s updated everywhere on your site. On this website I have made a “Practice Areas” reusable block that contains multiple “Service” blocks – a custom block I built using Advanced Custom Fields. When I’m editing another page, I can search the block list for my “Practice Areas” reusable block to insert it. If you click the “Manage All Reusable Blocks” link, you can manage them like any other custom post type. But it would be even simpler if we included this link in the admin menu. The following code will add “Reusable Blocks” to the WordPress admin menu. Add this to your theme’s functions.php file or a core functionality plugin: You can now click “Reusable Blocks” to see the full listing and edit them. When you click on a reusable block, you get the familiar block editor for managing all the content within that reusable block. I’ve built a plugin you can install to add this functionality without editing any code. Download and install Reusable Blocks UI.searchform.php file in the theme, ensuring the Search block matches the design and functionality of the search form used everywhere else in the theme.Enqueue block editor assets
enqueue_block_editor_assets hook to load scripts and styles into the block editor. My themes typically have an editor.js file that I use for block styles and unregistering block types. /**
* Gutenberg scripts and styles
*
*/
function be_gutenberg_scripts() {
wp_enqueue_style( 'theme-fonts', be_theme_fonts_url() );
wp_enqueue_script( 'theme-editor', get_template_directory_uri() . '/assets/js/editor.js', array( 'wp-blocks', 'wp-dom' ), filemtime( get_template_directory() . '/assets/js/editor.js' ), true );
}
add_action( 'enqueue_block_editor_assets', 'be_gutenberg_scripts' );
/**
* Theme Fonts URL
*
*/
function be_theme_fonts_url() {
return 'https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap';
}
Unregister block type
wp.blocks.unregisterBlockType to unregister block types. wp.domReady( () => {
wp.blocks.unregisterBlockType( 'core/media-text' );
wp.blocks.unregisterBlockType( 'core/search' );
} );print_r( $something ) to see what’s in the variable? This works great, except it appears inline right where your code is executing. ea_pp() function works the same way, but outputs it in a console-like box attached to the right side of the screen.Example
core/gallery block, so I added the following code to functions.php:add_action( 'wp_footer', function() {
global $post;
$blocks = parse_blocks( $post->post_content );
foreach( $blocks as $block ) {
if( 'core/gallery' === $block['blockName'] ) {
ea_pp( $block );
}
}
});
Code
/**
* Pretty Printing
*/
function ea_pp( $obj, $label = '' ) {
$data = json_encode( print_r( $obj,true ) );
?>
<style type="text/css">
#bsdLogger {
position: fixed;
top: 0;
right: 0px;
border-left: 4px solid #bbb;
padding: 6px;
background: white;
color: #444;
z-index: 999;
font-size: 1.25em;
width: 400px;
height: 100vh;
overflow: scroll;
}
.admin-bar #bsdLogger {
top: 32px;
height: calc( 100vh - 32px );
}
</style>
<script type="text/javascript">
var doStuff = function(){
var obj = <?php echo $data; ?>;
var logger = document.getElementById('bsdLogger');
if (!logger) {
logger = document.createElement('div');
logger.id = 'bsdLogger';
document.body.appendChild(logger);
}
////console.log(obj);
var pre = document.createElement('pre');
var h2 = document.createElement('h2');
pre.innerHTML = obj;
h2.innerHTML = '<?php echo addslashes($label); ?>';
logger.appendChild(h2);
logger.appendChild(pre);
};
window.addEventListener ("DOMContentLoaded", doStuff, false);
</script>
<?php
}About Us
Minimum qualifications
How to apply?
hp.
honeypot). If your class is my-fancy-field, add this to your theme’s stylesheet to hide that field..wpforms-container .my-fancy-field {
display: none;
}$honeypot_class variable at the top to use your custom class name./**
* WPForms Custom Honeypot
*
* @author Bill Erickson
* @link http://www.billerickson.net/eliminate-spam-with-a-custom-honeypot/
*
* @param string $honeypot, empty if not spam, honeypot text is used in WPForms Log
* @param array $fields
* @param array $entry
* @param array $form_data
*/
function be_wpforms_custom_honeypot( $honeypot, $fields, $entry, $form_data ) {
$honeypot_class = 'my-fancy-field';
$honey_field = false;
foreach( $form_data['fields'] as $form_field ) {
if( false !== strpos( $form_field['css'], $honeypost_class ) ) {
$honey_field = absint( $form_field['id'] );
}
}
if( !empty( $honey_field ) ) {
$honeypot = 'Custom honeypot';
}
return $honeypot;
}
add_filter( 'wpforms_process_honeypot', 'be_wpforms_custom_honeypot', 10, 4 );Logging
wpforms_logging option to log spam:/**
* Enable logging of spam
*
*/
add_action( 'init', function() {
$debug = get_option( 'wpforms_logging' );
if( empty( $debug ) || ! in_array( 'spam', $debug ) )
update_option( 'wpforms_logging', [ 'spam' ] );
});/**
* Make log visible
*
*/
add_filter( 'wpforms_log_cpt', function( $args ) {
$args['show_ui'] = true;
unset( $args['capability_type'] );
return $args;
});
$50 credit for SpinupWP
My preferred development approach
git push staging master. I also use WP Migrate DB Pro to push/pull the database between environments.Setting up a development environment
Set up git on the server
ls should list /files and /logsgit init --bare project.gittouch project.git/hooks/post-receivechmod +x project.git/hooks/post-receivevi project.git/hooks/post-receive) and add the following to it. Make sure you update the two paths at the top to match your environment#!/bin/bash
TARGET="/sites/clientname.cultivatewp.com/files"
GIT_DIR="/sites/clientname.cultivatewp.com/project.git"
BRANCH="master"
while read oldrev newrev ref
do
# only checking out the master (or whatever branch you would like to deploy)
if [ "$ref" = "refs/heads/$BRANCH" ];
then
echo "Ref $ref received. Deploying ${BRANCH} branch to production..."
git --work-tree=$TARGET --git-dir=$GIT_DIR checkout -f $BRANCH
else
echo "Ref $ref received. Doing nothing: only the ${BRANCH} branch may be deployed on this server."
fi
donegit remote add staging ssh://[email protected]/~/project.gitLocal environment, no media
wp plugin install be-media-from-production --activate
wp config set BE_MEDIA_FROM_PRODUCTION_URL https://clientname.cultivatewp.com --type=constantadd_image_size()‘s to the theme, I’ll push the theme and database to staging and regenerate thumbnails. I can then pull a fresh copy of the database locally and have access to all the newly generated thumbnails.
Start with Atomic Design
Editor Styles
editor-style.css file in your theme, and add the following code to your theme’s functions.php file to load it:// Editor Styles
add_theme_support( 'editor-styles' );
add_editor_style( 'editor-style.css' );SASS
Color Palette
Additional editor scripts and styles
add_editor_style() feature described above, WordPress will automatically prefix your styles so they only affect the content area. h2 {} becomes .editor-styles-wrapper h2 { }.enqueue_block_editor_assetshook.Block Styles
wp.domReady( () => {
wp.blocks.unregisterBlockStyle(
'core/button',
[ 'default', 'outline', 'squared', 'fill' ]
);
wp.blocks.registerBlockStyle(
'core/button',
[
{
name: 'default',
label: 'Default',
isDefault: true,
},
{
name: 'feature',
label: 'Feature',
}
]
);
wp.blocks.unregisterBlockStyle(
'core/separator',
[ 'default', 'wide', 'dots' ],
);
wp.blocks.unregisterBlockStyle(
'core/quote',
[ 'default', 'large' ]
);
} );Remove core blocks
wp.blocks.unregisterBlockType. We typically remove core blocks when we’ve built a custom block that’s very similar, to minimize confusion for the client.wp.domReady( () => {
wp.blocks.unregisterBlockType( 'core/verse' );
wp.blocks.unregisterBlockType( 'core/cover' );
wp.blocks.unregisterBlockType( 'core/pullquote' );
wp.blocks.unregisterBlockType( 'core/media-text' );
wp.blocks.unregisterBlockType( 'core/latest-posts' );
} );
Custom blocks
Client Training
Create default form
Term Metabox for category override
be_optin_title and be_optin_description as the respective meta keys.
Use term meta to customize form
123 at the top to the form ID you’d like to target. I’m using the ea_first_term() helper function to select the primary category if the post appears in more than one category./**
* Customize optin title/description by category
* @link https://www.billerickson.net/category-specific-email-optin-with-wpforms/
*
* @param array $form_data
* @return array
*/
function be_wpforms_category_optin( $form_data ) {
if( 123 != $form_data['id'] )
return $form_data;
$term_id = false;
if( is_category() )
$term_id = get_queried_object_id();
elseif( is_single() )
$term_id = ea_first_term( [ 'field' => 'term_id' ] );
if( ! $term_id )
return $form_data;
$title = get_term_meta( $term_id, 'be_optin_title', true );
if( !empty( $title ) )
$form_data['settings']['form_title'] = $title;
$description = get_term_meta( $term_id, 'be_optin_description', true );
if( !empty( $description ) )
$form_data['settings']['form_desc'] = $description;
return $form_data;
}
add_filter( 'wpforms_frontend_form_data', 'be_wpforms_category_optin' );
Setting up git for production
ssh -p2222 [email protected]). We’ll follow this guide to setting up git on the server.clientname.com , not clientname.com/public. cd domains/clientname.comgit init --bare project.gittouch project.git/hooks/post-receivechmod +x project.git/hooks/post-receivevi project.git/hooks/post-receive) and add the following to it. Make sure you update the two paths at the top to match your environment#!/bin/bash
TARGET="/home/nginx/domains/clientname.com/public"
GIT_DIR="/home/nginx/domains/clientname.com/project.git"
BRANCH="master"
while read oldrev newrev ref
do
# only checking out the master (or whatever branch you would like to deploy)
if [ "$ref" = "refs/heads/$BRANCH" ];
then
echo "Ref $ref received. Deploying ${BRANCH} branch to production..."
git --work-tree=$TARGET --git-dir=$GIT_DIR checkout -f $BRANCH
else
echo "Ref $ref received. Doing nothing: only the ${BRANCH} branch may be deployed on this server."
fi
donecd ~/path/to/working-copy
git remote add production ssh://[email protected]:2222/~/domains/clientname.com/project.gitgit push production masterSetting up git for staging
clientnamecom.bigscoots-staging.comgit remote add staging ssh://[email protected]:2222/~/domains/clientnamecom.bigscoots-staging.com/project.git// Brand Colors
// -- normal / darker / lighter
$blue_1: #59BACC;
$blue_2: darken( $blue_1, 10% );
$blue_3: lighten( $blue_1, 10% );
$green_1: #58AD69;
$green_2: #458D53;
$green_3: #7ABE88;brand-color(), that makes it easier to select the color.a {
color: brand-color( 'blue' );
&:hover {
color: brand-color( 'blue', 'darken' );
}$brand_colors. If you only specify the main color, it will auto-generate the lighten and darken variants. But you can also manually specify your own colors for those.$brand_colors: (
'blue' : #59BACC,
'green' : #58AD69,
'green_darken' : #458D53,
'green_lighten' : #7ABE88,
);brand-color() function. Take a look at my base theme to see how it’s included./**
* Brand Color
*
*/
@function brand-color( $key, $variant: null ) {
@if map-has-key( $brand_colors, $key ) {
$color: map-get( $brand_colors, $key );
@if ( 'lighten' == $variant ) {
$lighten_key: $key + '_lighten';
@if map-has-key( $brand_colors, $lighten_key ) {
$color: #{map-get( $brand_colors, $lighten_key )};
} @else {
$color: lighten( $color, 10% );
}
}
@else if( 'darken' == $variant ) {
$darken_key: $key + '_darken';
@if map-has-key( $brand_colors, $darken_key ) {
$color: #{map-get( $brand_colors, $darken_key )};
} @else {
$color: darken( $color, 10% );
}
}
@return $color;
} @else {
@error "The #{$key} color could not be found in $brand_colors";
}
}
What are reusable blocks?
wp_block post type. 
Add reusable blocks to admin menu
/**
* Reusable Blocks accessible in backend
* @link https://www.billerickson.net/reusable-blocks-accessible-in-wordpress-admin-area
*
*/
function be_reusable_blocks_admin_menu() {
add_menu_page( 'Reusable Blocks', 'Reusable Blocks', 'edit_posts', 'edit.php?post_type=wp_block', '', 'dashicons-editor-table', 22 );
}
add_action( 'admin_menu', 'be_reusable_blocks_admin_menu' );
WordPress Plugin
