Wednesday, 30 November 2016

A plugin to simplify Advanced Custom Fields

Save time & automatically generate the code required to implement Advanced Custom Fields in your themes! ACF Theme Code Pro is a premium add-on for the awesome Advanced Custom Fields Pro WordPress plugin.
Whenever you publish, edit or update an ACF Field Group, the code required to implement your unique custom fields is conveniently displayed in a Theme Code section right below the Field Group settings.
Clipboard icons to easily copy code blocks into your theme
Field names and variables in the generated code match your Field Group settings
Code generated is based on the official ACF documentation
Great for offline ACF documentation
ACF Theme Code Pro generates code for the ACF Pro fields:
Flexible content field
Repeater field
Gallery field
Clone field
ACF Theme Code Pro generates code for these 3rd Party fields:
Font Awesome field
Google font selector field
Image crop field
Markdown field
Nav Menu field
RGBA Colour field
Sidebar Selector field
Smart Button field
Table field
TablePress field
ACF Theme Code Pro generates the code for all standard ACF fields:
Text Area
True / False
Google Map
Date Picker


Customizer Improvements in WordPress 4.7

WordPress 4.7 has been the most active release on record for the customize component, with four major feature projects merging and shipping with 4.7 and over 90 tickets closed as fixed. This post summarizes the highlights of the user and developer-facing changes. 4.7 Customizer Feature Projects
Create pages within live preview during site setup
Add new pages while building menus and setting a static front page; outline your site directly in the customizer.
This project began with the ability to create posts and pages direction from the available menu items panel in the customizer, as originally proposed near the end of the 4.6 cycle:
The current navigation menus system is built around a paradigm that every menu item must be associated with an existing piece of content. However, this is problematic for new users, who may find themselves with the opportunity to build a menu before creating any content. #34923 seeks to improve this experience and eliminate this usability … Continue reading
Subsequent changes also added the ability to create new pages when assigning the front page and posts page in the Static Front Page section. Because this is now built into the core dropdown-pages


Starter Content for Themes in WordPress 4.7

One of the hardest things for people setting up sites with WordPress for the first time is understanding what themes are and how a given theme can work for you, especially when there’s no content there to visualize. There are also significant gaps between local theme previews, screenshots, and .org previews. Even when there are easy-to-use site customization tools, it is difficult to figure out where to start and what things are going to be like. To help users along that path, 4.7 introduces the concept of “starter content” – theme-specific selections of content to help showcase a theme to users and serve as a starting point for further setup of new sites. Starter content works especially well in tandem with visible edit shortcuts, allowing users to not only see what content might work best where within a theme, but from there to be able to jump to building off of that base without having to initially spend time figuring out, say, which widgets areas map where.
How it works
Starter content is applied and displayed upon entering the customizer, with no changes appearing on the live site until customizer changes are explicitly saved and published. In 4.7, this


The AMP Pagebuilder – 0.9 Version of AMP for WP

Today, we’re pushing a big update which we were working on for last two months. This is a big step forward for AMP users. We have fixed a lot of things but one of the important thing that was implemented in this was AMP page builder. Here is the changelog of this update
Drag & Drop Page builder Added: You can easily modify the look of the AMP page using this point and click interface.
Yoast SEO Compatible, Now no need to have additionally Glue Installed
100% completed Translation panel, Now absolutely anything on page is translated
Added Option to turn on/off Page Support
Styling for Tags was Corrected
Made changes to these sections to reflect in the new Design manager : Related Posts, Footer
Default Image alignment styling added
Added Option to turn on/off Page Support
Related Posts Now use Custom Excerpt if it Exists
Now AMP pages won’t have Validation errors because of ‘rel’ attribute in ‘div’ Tag or ‘onclick’ attribute in ‘a’ Tag
<pre> Tag styling issue fixed for AMP pages
Frontpage (Homepage) Compatibility with AMP which means better validation of front page.
WooCommerce Support Added


How to Save $125 with Website Staging

Setting up a website is only step 1 of the process to build your online presence. Even after your site is designed and launched, there will be times when you want to make changes, install updates, or try out some new branding. Freelancers are a critical part of this system, but it can become frustrating to get in touch with your designer just because the marketing team wants the font to be blue instead of orange.
There’s an easy way for even a novice to make changes properly without affecting the live site until they’re confident: staging sites.
What is a Staging Site?
A staging site is a copy of your website that you can change around without affecting your live site. Intsead of making adjustments live, or trying to figure them out on a blank website, you can work under the conditions you’ll experience on your main website.
It goes something like this…
You create a staging site for your WordPress site.
You login with your same username and password as your live site. No need for a blank install or a secret key (unless you want one).
You make changes to the staging site. You can change plugins, edit CSS, add new pages, whatever your heart desires.
Copy over


Up and Running with Beaver Builder – WP in One Month

On sale for a limited time!  ||
Product Description
Beaver Builder is a page builder that allows you to get up and running with a website in minutes, not weeks. By using Beaver Builder, you will be able to focus on the more important part of a website – the content – without having to worry about the effort that goes into creating stunning, eye-catching websites.
In this course, we will learn how to use Beaver Builder’s robust feature set in order to create unique page layouts without ever having to touch code! We’ll also dive into the Beaver Builder theme and its customizer, importing and exporting, and much more.
Sample Video


I’m Tom Willmot, CEO at Human Made; AMA!


Excited to answer your questions. I founded Human Made 6 years ago with Joe and Noel, we’re one of the world’s leading WordPress client service firms. We specialise in large-scale WordPress, usually 6-7 figure accounts with enterprise or big media. We run a line of professional conferences, so far based on the WP REST API and remote working. Our work internally has turned into several products, including Nomadbase and Happytables. We’re bootstrapped at Human Made but have also gone the VC route with products.

We intentionally put a lot back into WordPress, through our work directly on Core with things like the WP REST API, Accessibility, Polyglots as well as our level of community involvement.

We’re 40+ Humans spread across the globe, from the West Coast of the US all the through to New Zealand.

I spend a lot of my time focused on strategy, hiring, Humans & finances.

Ask me anything!


Continuous Integration with WordPress

Every now and again we run some experiments at interconnect/it, looking at problems we’re facing, what the best practice could be, and seeing what can happen. A recent issue is that many more of our projects have multiple engineers working on them, with the result that developers can bump into one another or have integration issues both with each other but also with the third party WordPress plugins we sometimes rely upon. At the same time there’s a number of interesting ways to scale WordPress. So we decided to kill two birds with one stone. Continuous Integration (CI) is a programming method whereby developers on a team carry out regular commits to a branch and which can then be tested quickly and often within a realistic environment. There’s a simple reason for this – the longer it is since a developer wrote some code, the harder it gets for that developer to get back into it to correct the bugs. CI isn’t going to help you much if you work alone on standalone projects, but if you work in a team, or contribute with many others then it can be extremely useful.
In this article, I’ll walk you through the actual method on how to achieve continuous integration


Marketers now turn to social for product launches

When it comes time to launch a new product, the majority of marketers in the US, the UK, and Australia are now turning to social media.

Five by Five, a marketing communications firm that specializes in product launches, polled more than 700 marketers in these countries and found that nearly three-quarters (74%) of them consider social media to be the highest-priority medium to promote new products.

Sales promotions and email were the second and third most popular launch marketing medium, respectively.


According to Five by Five creative director Martin Flavin:

“Social media has become the most important way to generate buzz for new products and services before they appear. Shareable content and social engagement allow brands to create a groundswell of pre-launch interest in a way no other channel can match.”

Social media is now more popular a launch marketing medium than PR/press, television and direct mail.

Is social enough?

Social’s popularity among marketers for product launches isn’t just based on the fact that social channels like Facebook, Twitter and Snapchat offer access to billions of consumers around the world.

According to Five by Five, social’s popularity is also based on the fact that it’s a readily accessible medium that marketers can turn to in a pinch, which is increasingly important given that products are being conceived, built and launched much more rapidly than ever before.

In fact, two-thirds of the marketers the firm surveyed indicated that they usually have no more than six months to prep a new product launch, which can make it more difficult to execute launch strategies that rely on mediums that aren’t as accessible.


But social isn’t necessarily a perfect medium. Despite its accessibility, it can be very difficult for marketers to cut through the clutter on the most popular social channels, and attracting attention is only likely to become more difficult as marketers put the bulk of their eggs in the social media basket.

For those that are able to attract an audience and generate buzz for a new product, that buzz can also be short-lived thanks to the speed with which the social media world moves, so marketers shouldn’t expect social buzz to sustain a new product.

Instead, they’ll need to plan for a relatively quick transition to post-launch marketing, which will usually include marketing mediums other than social, including search, which as PR Week’s Robert Smith notes, has been called a more powerful medium than social by WPP chief Sir Martin Sorrell.


How to Style WordPress Navigation Menus

Do you want to customize your WordPress navigation menus to change their colors or appearance? Your WordPress theme handles the appearance of navigation menus on your site. You can easily customize it using CSS to meet your requirements. In this article, we will show you how to style WordPress navigation menus.

Style WordPress Menus

Method 1: Style WordPress Menus Using a Plugin

Your WordPress theme uses CSS to style navigation menus. Many beginners are not comfortable editing theme files or writing CSS on their own.

That’s when a WordPress menu styling plugin comes in handy. It saves you from editing theme files or writing any code.

First you need to do is install and activate the CSS Hero plugin. For more details, see our step by step guide on how to install a WordPress plugin.

CSS Hero is a premium WordPress plugin that allows you to design your own WordPress theme without writing a single line of code (No HTML or CSS required). See our CSS Hero review to learn more.

WPBeginner users can use use this CSS Hero Coupon to get 34% discount on their purchase.

Upon activation, you will be redirected to obtain your CSS Hero License key. Simply follow the on-screen instructions, and you will be redirected back to your site in a few clicks.

Now you need to click on the CSS Hero button in your WordPress admin toolbar.

Launch CSS Hero

CSS Hero offers a WYSIWYG (What you see is what you get) editor. Clicking on the button will take you to your website with a floating CSS Hero toolbar visible on screen.

CSS Hero toolbar

You need to click on the blue icon at the top to start editing.

Take your mouse to your navigation menu and CSS Hero will highlight it by showing borders around it. When you click on the highlighted navigation menu, it will show you the items you can edit.

Point and click your navigation menu in CSS Hero

In the screenshot above, it shows us menu item, menu navigation, navigation menu container, etc.

Let’s assume we want to change the text color of all items in the navigation menu. In that case, we will select menu navigation which affects entire menu.

CSS Hero will now show you different properties that you can edit like text, background, border, margins, padding, etc.

Editing navigation menu properties in CSS Hero

You can click any property that you want to change. CSS Hero will show you a simple interface where you can make your changes.

Editing navigation menu text color

In the screenshot above, we selected text, and it showed us a nice interface to select fonts, change text color, size, and other properties.

As you make changes, you will be able to see them live in the theme preview.

Preview live changes

Once you are satisfied with the changes, click on the save button in CSS Hero toolbar to save your changes.

The best thing about using this method is that you can easily undo any changes that you make. CSS Hero keeps a complete history of all your changes, and you can go back and forth between those changes.

Method 2: Manually Style WordPress Navigation Menus

This method requires you to edit your WordPress theme files. You should use it only if you are comfortable editing code and understand how WordPress themes work.

The best way to make customizations to your WordPress theme is by creating a child theme. If you are only changing CSS, then you can see our guide on how to easily add custom CSS in WordPress without changing your theme files.

WordPress navigation menus are displayed in an unordered list (bulleted list).

If you just used the following tag, then it will display a list with no CSS classes associated with it.

<?php wp_nav_menu(); ?>

Your unordered list would have the class name ‘menu’ with each list item having its own CSS class.

This might work if you have only one menu location. However, most themes have multiple locations where you can display navigation menus.

Using only the default CSS classes may cause conflict with menus on other locations.

This is why you need to define CSS class and menu location as well. Chances are that your WordPress theme is already doing that by adding the navigation menus using code like this:

        wp_nav_menu( array(
                'theme_location' => 'primary',
                'menu_class'     => 'primary-menu',
                 ) );

This code tells WordPress that this is where the theme displays primary menu. It also adds a CSS class primary-menu to the navigation menu.

Now you can style your navigation menu using this CSS structure.

#header .primary-menu{} // container class
#header .primary-menu ul {} // container class first unordered list
#header .primary-menu ul ul {} //unordered list within an unordered list
#header .primary-menu li {} // each navigation item
#header .primary-menu li a {} // each navigation item anchor
#header .primary-menu li ul {} // unordered list if there is drop down items
#header .primary-menu li li {} // each drop down navigation item
#header .primary-menu li li a {} // each drap down navigation item anchor

Replace #header with the container class or ID used by your WordPress theme.

This structure will help you completely change the appearance of your navigation menu.

However, there are other classes that are automatically added by WordPress to each menu and menu item. These classes allow you to customize your navigation menu even further.

.current_page_item{} // Class for Current Page
.current-cat{} // Class for Current Category
.current-menu-item{} // Class for any other current Menu Item
.menu-item-type-taxonomy{} // Class for a Category
.menu-item-type-post_type{} // Class for Pages
.menu-item-type-custom{} // Class for any custom item that you added
.menu-item-home{} // Class for the Home Link

WordPress also allows you to add CSS classes to individual menu items from within admin area.

You can use this feature to style menu items, like adding image icons with your menus or by just changing colors to highlight a menu item.

Head over to Appearance » Menus page and click on the Screen Options button.

Enable CSS classes option in WordPress menus screen

Once you have checked that box, you will see that an additional field is added when you go to edit each individual menu item.

Adding a custom CSS class to a menu item in WordPress

Now you can use this CSS class in your stylesheet to add your custom CSS. It will only affect the menu item with the CSS class you added.

We hope this article helped you learn how to style WordPress navigation menus. You may also want to see our guide on how to add mobile-ready responsive WordPress menu.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Style WordPress Navigation Menus appeared first on WPBeginner.


10 mistakes businesses and brands make with social media

With social media reach and engagement rates having dipped so precipitously over the last year or so, paying to play is the only option for most brands now.

But what about businesses and brands that can’t afford to advertise on Facebook, Twitter, LinkedIn and the like? Not everyone is willing, never mind able, to carve out the budget necessary to keep their content in front of a critical mass of relevant followers on a regular basis.

Those organizations can be particularly creative or incredibly persistent, but the most effective strategy they can embrace may be to get all hands on deck in the form of an employee advocacy program.

Of course, to go in this direction, every team member needs to be on board with their new tack, despite an abundance of reasons to be uncooperative, unknowingly or not.

Employers need their employees working together toward the same goal if this social media strategy is to be effective. And in many cases, that’s just not going to happen anytime soon without proper training, guidance, incentive and rewards.

Here are 10 BIG mistakes many businesses, brands, teams and their leaders are making with social media…

Not providing enough education

Social media isn’t rocket science, but it requires a huge leap of faith for the uninformed and uninitiated. Not only can it be daunting, it can be downright difficult for a newbie to craft even a simple tweet, never mind write a blog post or record a video.

A comprehensive, mandatory educational program is key to bringing employees up to speed.

Not providing enough incentive

It wouldn’t be an exaggeration to say that job descriptions seem to include everything but the kitchen sink nowadays. So why not add learning social media to employees’ list of responsibilities?

Seriously. Everyone’s a marketer. Everyone’s in sales. And everyone’s on social media. Which should mean repping your employer every once in a while.

Not connecting with others

There’s power in numbers, especially when it comes to propagating content. No reach, no engagement. Don’t be afraid to suggest that team members broaden their networks, even if their roles have nothing to do with sales and marketing.

Employees shouldn’t be kept under wraps. After all, there’s a lot to be said for the multiplier effect.

Social network sphere

Not sharing organizational content

All for one, one for all. That should be an internal team’s creed. Someone writes a white paper, everyone shares it. That’s a no-brainer if you ask me. Every employee – certainly those in marketing, advertising, PR and social media – should be sharing content created under the corporate roof.

Their personal brands should include the professional brands for whom they work.

Not producing original content

There’s a rule in group communications called 90-9-1. This rule suggests that 90% of the members simply lurk while 9% add something to the conversation and a mere 1% contribute the most. But it doesn’t have to be that way.

You can’t be effective on social media if you’re being anti-social. Key employees and related stakeholders should be more than encouraged to create their own content, they should be rewarded for doing so on a regular basis.

Not keeping up with changes

Call them luddites, laggards, naysayers or just plain stubborn. Whatever you call them, call them late to the party, almost too late to gain entrance.

Anyone serious about their career in this day and age who hasn’t at least started to use social media risks falling dangerously behind their colleagues, connections and competition on the job. And looked upon as being not that serious after all.

Not looking at the big picture

I can’t tell you how many times I’ve heard people dismiss social media as a passing fad or an inconsequential trend despite overwhelming evidence to the contrary. By 2018, 33% of the world’s population, or 2.44 billion people, is expected to be using social media.

Social media is the biggest revolution in mass communications since the printing press. Anyone who can’t see that by now can’t see the forest for the trees.


Not brave enough to experiment

A tendency to take risks isn’t one of the hallmarks of a corporate executive, so any fear and trepidation among this set isn’t surprising to me. But this is not the time for analysis paralysis.

Social media represents a transformative change in the way people, not just business people, communicate. Like it or not, it’s not going anywhere soon, so resistance is futile.

Not aware of their capabilities

Most employees don’t realize how easy it is share content on social media, contribute to the conversation at large and actually help move the algorithmic needle in favor of their respective organizations.

Whether they’re intimidated, confused or just plain misinformed, they think social media is difficult, complex and ineffective, while it’s actually quite the contrary. They can do it if they try.

Not leading by example

People will rarely take it upon themselves to share work-related content on their personal accounts. They’re afraid it’s irrelevant and off-putting to their audience. But if leaders are doing it themselves as an example to their teams, that’s another story altogether.

Employees will quickly see the benefits of supporting their employer’s brand if they see senior managers practicing what they preach and walking the talk on social media themselves.


WordPress Debugging with PHP Console

Those of you who are relatively familiar with Javascript will know just how useful the console.log feature can be. In a nutshell, it allows you to send debug information directly to your browser console (assuming that the browser you’re using supports a debug console). With PHP, it’s not so easy. Sure you can use breakpoint debug functions such as var_dump(), print_r(), and die(), but each of these will output the debug information directly onto your browser window, which is messy and often impractical.
If you’re using Google Chrome, PHP debugging gets a whole lot easier thanks to an extension called PHP Console. It allows you to display PHP errors and var dumps directly in the Chrome console as well as in notification popups. Even better, plugin author Fulvio Notarstefano has created a WordPress plugin implementation, so everything can be configured easily via a dashboard settings page on your site.
Below I’ll take you through how to setup and use PHP console debugging on your own WordPress sites:
Getting the extension and plugin
Add and activate the PHP Console extension from the Chrome Web Store here.
Download the WP PHP Console plugin here, and activate it


Tuesday, 29 November 2016

BoldGrid – Create a Website with a WordPress Website Builder

BoldGrid works on top of WordPress as a website builder to make the CMS more intuitive. Tedious tasks are now automated and the entire WordPress workflow is reimagined to save you time and frustration. Easy to use, efficient, and flexible, BoldGrid works as a suite of plugins to both make WordPress easier to use as well as transform the WordPress experience to be more practical and intuitive for professionals as well.
Slide your content to exactly where you need it with ease
Beautiful responsive WordPress themes designed for BoldGrid
Each theme includes pre-designed color palettes, layouts, and more
Edit content on your pages exactly as your visitors would see – no more guesswork
Make changes, preview on Staging, then deploy
Integrated Fotolia and Flickr image banks for direct access
Powered By
At its core, BoldGrid utilizes the power and flexibility of the world’s most trusted content management system, WordPress. Experienced WordPress users will find comfort in the familiar interface while exploring the new features provided by BoldGrid. This also means that you have all the power of the themes and plugin directory at your disposal. BoldGrid has more add-on functionality


Twenty Seventeen: Merge Proposal for 4.7 @matt In terms of preview experience, I agree that the full-page refresh experience and even the newer selective refresh preview mechanism are (much) slower than desirable. In the end, these are in place for backwards compatibility for WordPress’s theming system which fundamentally depends on PHP rendering. However, to quote myself on a WPSE answer I just wrote:
In closing, if WordPress themes could just be implemented with something like React we could avoid adding special support for selectively refreshing elements on the page since the changes to the state would automatically cause the desired changes in the DOM. Since we’re not there yet (although prototypes are being worked on for this) we have to settle for the next best experience for quickly refreshing parts of a page with the minimal extra effort for developers: selective refresh.
In terms of a clunky UI, it’s true that the “Customizer” UI needs iterating. Having all of the controls for manipulating changes being located in a panel and not inline with the elements being edited


WPCLI Version 1.0.0 released

Woohoo! Over the course of 5+ years, hundreds of contributors have worked to bring you WP-CLI v1.0.0, which I’m proud to announce today.
This release represents a level of maturity few open source projects achieve. It also marks a moment of transition. The WP-CLI project will shift its focus to the WP-CLI package ecosystem, where it will enable innovation by building and encouraging new features as standalone packages. We hope this approach will promote faster iteration and more creativity, and more sustainably distribute the maintenance burden. As these community packages find success, we’ll bring their learnings back into WP-CLI, alongside bug fixes and minor enhancements.
Now that the issue backlog is down to zero, I’m personally looking forward to getting more ideas cooking for runcommand, my own WP-CLI innovation studio.
Headed to Philly this week? I’ll be at Post Status Publish and WCUS (although only until mid-afternoon Friday). Say hello – I’m @danielbachhuber on Twitter.
On with the show…
Introducing WP_CLI::runcommand()
WP_CLI::runcommand() (doc) is the new best way to run WP-CLI commands from within your WP-CLI command. It’s as though


Beka Rice from SkyVerge & SellWithWP

The word of the day is: Evolve. Beka Rice, WooCommerce Team Lead at SkyVerge, joins the Matt Report to discuss the makings of a modern day WordPress agency. SkyVerge is a WooCommerce service agency, the largest developer of 3rd party add-ons in the WooCommerce marketplace, the company behind, and they’ve expanded into the SaaS market by forging a new branded app, Jilt.
They evolve — a lot.
So let’s take a step back and break this down:
Client services
WordPress plugins
Content media site
SaaS app
Each forward step is an evolution of the previous, and that’s the lesson that Beka teaches us in today’s episode.
In my opinion, client services life isn’t as linear as it used to be. That is to say, it’s not about filling the pipeline and doing the work anymore. Partly because the market has become much more competitive over time, and clients require a wider range of deliverables. Who cares about designing a website, putting current web technology and social technology to work for it, is the real goal.
Building a smarter, more measurable solution for our client, not just a brochure.
You’re probably going to want to queue this episode