Customizer Improvements in 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:

Feature Proposal: Content Authorship in Menus, with Live Preview

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 customizer control, themes and plugins can also allow users to create new pages for their options instead of relying on existing content. The homepage sections in Twenty Seventeen include this new allow_addition parameter. Here’s how to register a dropdown-pages control supporting new pages:

$wp_customize->add_control( 'featured_page', array(
	'label'          => __( 'Featured Page', 'mytextdomain' ),
	'section'        => 'theme_options',
	'type'           => 'dropdown-pages',
	'allow_addition' => true, // This allows users to add new pages from this dropdown-pages control.
) );

Additionally, a proposal for term statuses was developed as a first step toward expanding the menus functionality to work for creating and previewing taxonomy terms in a future release (see #37915).

Improvements to the Sliding Panels UI

Customizer navigation is now faster, smoother, and more accessible.

This project tackled a series of tickets focused on improving the usability of the “sliding panels” UI in the customizer controls pane. The first step was to refactor the section and panel markup so that sections and panels are not logically nested. This is the biggest internal change to the UI and has a dedicated post going into the details:

Changes to Customizer Sliding Panels/Sections in WordPress 4.7

This primary change resolved numerous problems with sections and panels not opening and closing properly, and eliminated situations where navigation to leave a section could become hidden. The next step was making section and panel headers “sticky” so that navigation is easier to access within long sections (such as for a menu); see #34343.

Finally, hover and focus styling for navigation in the customizer has been updated to use the blue-border approach found elsewhere in core, including for the device-preview buttons in the customizer, in #29158. This completes a refresh of the customizer controls pane’s UI design that began in WordPress 4.3 with #31336. The core UI now uses the following consistent UI patterns in the customizer:

  • White background colors are used only to indicate navigation and actionable items (such as inputs)
  • The general #eee background color provides visual contrast against the white elements
  • 1px #ddd borders separate navigational elements from background margins and from each other
  • 15px of spacing is provided between elements where visual separation is desired
  • 4px borders are used on one side of a navigation element to show hover or focus, with a color of #0073aa
  • Customizer text uses color: #555d66, with #0073aa for hover and focus states on navigation elements

Plugins and themes should follow these conventions in any custom customizer UI that they introduce, and inherit core styles wherever possible.

Any custom sections and panels, as well as customizations to the core objects in plugins and themes, should be tested extensively to ensure that they continue functioning as intended with all of these changes in 4.7. It’s particularly important to ensure that things like the use of color match the core conventions so that the user experience is seamless between functionality added by plugins and core.

Customize Changesets (formerly Transactions)

Browse your site and switch themes more seamlessly within the customizer, as your changes automatically persist in the background.

This project rewrote the internals of the customizer preview mechanism to make changes persistent. Each change made to a setting in the customizer is saved to a changeset (a new customize_changeset post type), facilitating future features such as scheduled changes, revisions, or saving and sharing drafted changes. Changesets also open the door to using the customizer to preview Ajax requests, headless sites, and REST API calls for mobile apps. In 4.7, changesets enable switching themes in the customizer without needing to decide between publishing or losing your customizations, as they’re automatically persisted in the background.

For more details on changesets, check out the two dedicated posts:

Customize Changesets (formerly Transactions) Merge Proposal

Customize Changesets Technical Design Decisions

Custom CSS

Fine-tune your site and take your theme customizations to the next level with custom css in the customizer.

#35395 introduced a user-oriented custom CSS option in the customizer. Now that the base functionality is in place, it will be further enhanced in #38707 in future releases. Read the feature proposal for details on the implementation and why it’s important for core:

Feature Proposal: Better theme customizations via custom CSS with live previews

There’s also a dedicated post that walks through the process of migrating existing custom CSS options in themes and plugins to the core functionality – be sure to follow those steps if your plugin or theme does custom CSS:

Extending the Custom CSS editor

Other Changes with Dedicated Posts

4.7 features several other features deserving special attention. Read the posts for visible edit shortcuts (which expand the functionality of customizer partials), video headers (which extend the custom header feature), and starter content for more information:

Visible Edit Shortcuts in the Customizer Preview

Video Headers in 4.7

Starter content for themes in 4.7

Additional User-facing Changes

With over 90 tickets fixed in the customize component in 4.7, we can’t cover everything here. But, here are a few more highlights:

Improved Custom Background Properties UI

#22058 introduces a more comprehensive and more usable custom background properties UI when a custom background is set up. There are now presets to control all of the detailed options at once, and the individual options are presented in a more visual way. Background size and vertical position are also now available as standalone options when using a custom preset.

Theme developers should update their add_theme_support() calls for custom-background to specify the default size, vertical position, and preset to reflect their default background image CSS. Perhaps the most significant improvement here is the ability for users to easily set up fixed full-screen backgrounds – and the ability for themes to make that behavior default if desired.

And even more…

4.7 also:

  • Loads the frontend preview iframe more naturally, eliminating a lot of weirdness with JS running in an unexpected location and ensuring that JS-based routing will work (#30028)
  • Allows the search results page to be previewed, and any forms that use the GET method in general can now be submitted whereas previously they would do nothing when submitted (#20714)
  • Hides edit post links in the customizer by default. Plugins, such as Customize Posts, can restore the links if they make post editing available in the customizer (#38648), although the visible edit shortcuts should generally be used instead.
  • Shows a cursor: not-allowed for mouse users when hovering over external links in the preview, as these can’t be previewed
  • Officially removes support for the customizer in Internet Explorer 8, preventing users of this outdated browser from accessing the customizer at all (#38021)

Additional Developer-oriented Changes

Hue-only Color Picker

#38263 adds a hue-only mode to the Iris color picker, wpColorPicker, and WP_Customize_Color_Control. Built for Twenty Seventeen’s custom colors functionality, the hue-only mode allows users to select a hue and saves the hue degree as a number between 0 and 359. To add a hue-color control:

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'colorscheme_hue', array(
	'mode' => 'hue',
	'section' => 'colors',
) ) );

As demonstrated in Twenty Seventeen’s custom colors strategy, the hue-selection strategy opens up a whole new world of possibilities for custom color options in themes. Rather than introducing numerous text and background color options and requiring users to adjust them to ensure that adequate color contrast is provided, themes can consolidate their color options into one or more hue pickers. Then, the corresponding use of hsl colors in CSS allows themes to define color patterns where users customize color hues without impacting the lightness of a color option, thereby preserving the designer’s use of proper contrast between text and background colors, and any use of color lightness for visual hierarchy. Check out the implementation in Twenty Seventeen for inspiration (including instant live preview).

Fix Sections that .cannot-expand

When creating custom customizer sections that, for example, display an external link but don’t actually expand to show section contents, the cannot-expand class can be added to the section title container to prevent JS events and CSS hover/focus styles from being applied. Be sure to also remove the tabindex="0" from the container if you copy the core code since your custom section shouldn’t be focusable if it can’t expand (and any contained links or buttons would be keyboard-focusable automatically). See #37980 for details.

Allow Plugins to do Comprehensive Late Validation of Settings

To account for custom subclasses of WP_Customize_Setting that don’t apply the customize_validate_ filter, this filter now will be applied when WP_Customize_Manager::validate_setting_values() is called. This ensures that plugins can add custom validation for every setting. For more, see #37638.

Credits

Huge thanks to the 61 people (and counting) receiving props for the 120+ customize component commits in 4.7 (as of RC2): @westonruter, @celloexpressions, @afercia, @sirbrillig, @ryankienstra, @helen, @ocean90, @melchoyce, @bradyvercher, @folletto, @johnbillion, @delawski, @karmatosed, @georgestephanis, @dlh, @curdin, @valendesigns, @mattwiebe, @michaelarestad, @joemcgill, @sstoqnov, @lgedeon, @mihai2u, @coreymcollins, @stubgo, @utkarshpatel, @desrosj, @odysseygate, @johnregan3, @aaroncampbell, @mapk, @iseulde, @mrahmadawais, @vishalkakadiya, @sayedwp, @hugobaeta, @jonathanbardo, @jorbin, @tristangemus, @deltafactory, @kkoppenhaver, @seancjones, @presskopp, @Mista-Flo, @nikeo, @adamsilverstein, @lukecavanagh, @coffee2code, @peterwilsoncc, @presskopp, @pento, @Kelderic, @sebastian.pisula, @mckernanin, @FolioVision, @MikeHansenMe, @welcher, @cdog, @grapplerulrich, @iamfriendly, @flixos90.

 

Starter content for themes in 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 initial view of a theme with starter content will only happen for “fresh sites” – new installs that have not yet had any posts, pages, widgets, or customizer settings updated. This state is indicated in the fresh_site option with a value of 1. The current limitation is in line with prioritizing initial site setup for this release, and allows for themes to begin implementing content and ensuring that there is a solid base before introducing more complicated logic and UI to “merge” starter content with existing content in a future release (#38624). That being said, if two themes in a given fresh site both have starter content, if the starter content from the first theme is applied and you make some changes to that starter content, when you switch to the second theme the starter content from that theme will override the starter content from the first theme only for the settings which have not been modified. Also remember that theme mods are always theme-specific, so starter content for theme switches will never be copied.

Core provides a set of content that themes can select from (technical details below). These include a variety of widgets, pages, and nav menu items (including references for the pages), along with the ability to provide attachments, theme mods, and options. Any included images for attachments need to be from within a theme or plugin folder and cannot be loaded from an external URL. Twenty Seventeen will ship with starter content enabled; there are no plans to add the functionality to past default themes.

How to use it

Themes define a subset of core-provided starter content using add_theme_support() – let’s look at a breakdown of how Twenty Seventeen does things. In its setup function hooked to after_setup_theme, we see an array with collections of widgets, posts (pages), attachments, options, theme mods, and nav menus registered as the starter content. The customizer looks for this starter-content at after_setup_theme priority 100, so do make this call at that point or later:

add_theme_support( 'starter-content', array( /*...*/ ) )

Widgets

Each widget area ID corresponds to one sidebar registered by the theme, with the contents of each widget area array being a list of widget “symbols” that reference core-registered widget configurations. Most default widgets are available (archives, calendar, categories, meta, recent-comments, recent-posts, and search), as well as text widgets with business hours (text_business_info) and a short prompt for an “about this site” style blurb (text_about). Themes should place widgets based on what works best in that area – for instance, business info in a footer widget of a business-centric theme, or a nicely styled calendar widget in the sidebar of a blog.

Custom widgets can also be registered at the time of starter content registration or later filtered in, which will be more likely the case for plugins, as add_theme_support() for starter content will be overridden by any later calls.

// Custom registration example
add_theme_support( 'starter-content', array(
	'widgets' => array(
		'sidebar-1' => array(
			'meta_custom' => array( 'meta', array(
				'title' => 'Pre-hydrated meta widget.',
			) ),
		),
	),
);

// Plugin widget added using filters
function myprefix_starter_content_add_widget( $content, $config ) {
	if ( isset( $content['widgets']['sidebar-1'] ) ) {
		$content['widgets']['sidebar-1']['a_custom_widget'] = array(
			'my_custom_widget', array(
				'title' => 'A Special Plugin Widget',
			),
		);
	}
	return $content;
}
add_filter( 'get_theme_starter_content', 'myprefix_starter_content_add_widget', 10, 2 );

Posts (Pages)

Like widgets, core provides posts which can be referenced by symbols; all six currently in the core set are pages, but the starter content API can support various post types (including attachments, which are defined and handled separately). The symbols for the core-provided pages as of 4.7 are home, about, contact, blog, news, and homepage-section. The pages references by blog and news are both empty in the content area and are meant to be assigned as the page for posts (detailed with options below). Imported posts can further be used as post IDs when referenced using the symbol of the item within double curly braces, e.g. for the static front page option.

Posts, like widgets, are also easily customizable, either by overriding specific fields for a predefined item or by defining a new custom one entirely. The available fields are post_type, post_title, post_excerpt, post_name (slug), post_content, menu_order, comment_status, thumbnail (featured image ID), and template (page template name, as would be stored in post meta).

// Overriding/supplementing a predefined item plus a custom definition
add_theme_support( 'starter-content', array(
	'posts' => array(
		'about' => array(
			// Use a page template with the predefined about page
			'template' => 'sample-page-template.php',
		),
		'custom' => array(
			'post_type' => 'post',
			'post_title' => 'Custom Post',
			'thumbnail' => '',
		),
	),
);

Attachments

While attachments are post objects, they have special handling due to the sideloading of specified media. Media must be loaded from within the theme or plugin directory – external URLs are currently disallowed for performance reasons. The location of the media, either as a full file path or relative to the theme root, is indicated in the file array item, and some other post fields are available, with post_content mapping to description and post_excerpt to caption. Imported attachments can further be used by using their respective array keys as symbols used within double curly braces, e.g. as the featured image (thumbnail) for a post. In the example below, an attachment is specified and used as the featured image for the about page.

add_theme_support( 'starter-content', array(
	'attachments' => array(
		'featured-image-logo' => array(
			'post_title' => 'Featured Logo',
			'post_content' => 'Attachment Description',
			'post_excerpt' => 'Attachment Caption',
			'file' => 'assets/images/featured-logo.jpg',
		),
	),
	'posts' => array(
		'about' => array(
			// Use the above featured image with the predefined about page
			'thumbnail' => '',
		),
	),
);

Nav Menus

Nav menus are also specially treated post objects. There are essentially two types of nav menu items – custom links, which require a title and url, and object references, which require type, object, and object_id, which can be a symbolic reference.

Options and Theme Mods

Options and theme mods are more freeform and merely require a match for a name. Symbolic references to imported items are particularly useful here, such as for the page_on_front option and Twenty Seventeen’s multi-section homepage as stored in theme mods. Themes hosted on .org will likely be limited to theme mods and a subset of options; all other developers are encouraged to consider user experience and expectations first.

What does this mean for themes?

Core-provided content helps support a consistent preview experience across themes with high quality localized content, helping users understand how WordPress and that theme fit their needs. Theme authors are encouraged to select from core-provided content, but as is always the case with WordPress, starter content still has some flexibility, and will continue to mature as a feature over time.

While theme review guidelines need to be finalized and documented, it is anticipated that themes being submitted to WordPress.org will be expected to select from core-provided content to promote consistency and to help keep the theme review process from becoming lengthier, with exceptions being made on a case by case basis. Themes being distributed outside of WordPress.org are not subject to the same review process; however, it is recommended that consistent user experiences be the primary consideration in how starter content is chosen and implemented.

What’s next?

Testing this feature with your theme or plugin does not require a fresh install every time – you can set the fresh_site option to 1 using the tool of your choice, such as wp-cli or phpMyAdmin. Do note that content merging logic has not been tackled so you may not quite get the exact same effect as a truly fresh install; however, since all of the changes are held in a customizer changeset and are not otherwise live on the site, there is no data loss, unless you save and publish the starter content overrides of course.

In the future, all sites should be able to live preview new themes in ways that really showcase that theme’s capabilities, whether that’s with no content made yet or with a lot of existing content to work into the preview. This will take a lot of consideration around user expectations for content merging, and should be tackled as its own feature. There are also potentially interesting extensions such as UI for users to select from sets of content or selectively accept/reject staged changes.

And finally, to best align preview experiences in various places, theme previews on .org should also leverage starter content. Helping hands are needed here – please ping me (@helen) in Slack should you be interested!

Tailor Page Builder: My Official Unofficial Favorite WordPress Page Builder


Tailor Page Builder: My Official Unofficial Favorite WordPress Page Builder →

Pippin Williamson’s comprehensive review of WordPress page builders is, to me, the single most helpful piece of WordPress writing this year. One thing he does in the review is narrow the field to three page builders he recommends:  Tailor, Pootle Page Builder, and Beaver Builder.

I’ve played with each, and Tailor’s the one I found myself actually using on a client project when I needed a slightly involved layout for a page. Tailor doesn’t put a third button next to “Visual” and “Text,” with a dialogue box that goes “You’re going to lose your content, is that okay?” when I click that button. That’s a very distracting experience for me that makes drag-and-drop plugins feel like alien invaders, and makes me really worry what mischief my clients will get up to once I hand the site over.

Instead, Tailor is a really beautiful front-end editor that feels the way a drag-and-drop builder should feel (except, as Pippin notes, that the JS drag-and-drop functionality itself is a bit finicky). It’s also as polite to the actual post content as it can be, which means, in practice, a lot of nested <div>s littering your markup. These are certainly unnerving, but, as Pippin points out, they don’t break anything if you deactivate Tailor, and to my mind they’re about the minimum necessary evil to have a page builder solution at all. If you’ve ever dry-heaved after looking at the Text view of a Visual Composer page, it’s a lot better than that.

Like Pippin, I’m getting a little more cheerful about the place for page builders in the market, and from what I’ve seen Tailor seems to be the one that plays most thoughtfully and carefully with its environment. Worth trying out!

Week in Core, November 23 – 29, 2016

Welcome back the latest issue of Week in Core, covering changes [39341-39379]. Here are the highlights:

  • 39 commits
  • 30 contributors
  • 81 tickets created
  • 3 tickets reopened
  • 31 tickets closed

Ticket numbers based on trac timeline for the period above. The following is a summary of commits, organized by component.

Code Changes

Build/Test Tools

  • Build: Remove fsevents from npm-shrinkwrap.json [39368] #38657
  • Add an extra WP_Error assertion when testing a valid user activation key. This provides a better failure message if the assertion does fail. [39364] #38716
  • When testing the output of wp_list_pages(), use a known and fixed date for each post so the tests don’t fail when the date changes between the beginning and end of a test. [39363] #38688
  • Git: Prevent untracked files from being ignored by git in bundled themes. [39362] #27207, #38779
  • Add npm-shrinkwrap.json to 4.7. [39358] #38657

Bundled Theme

  • Twenty Seventeen: Add textdomain for starter content attachment titles. [39374-39373] #38981
  • Twenty Seventeen: Ensure edit button label displays properly in other languages [39341] #38876

Customize

  • Fix regression in ability to hide fields for advanced menu properties in nav menu item controls. [39379-39378] #34391, #38952
  • Fix regression in ability to create submenus for nav menus via drag and drop. [39377-39376] #34391, #38948
  • Fix logic for previewing the URL for nav_menu_item settings for terms and post type archives. [39365] #38114, #38945
  • Refactor logic for updating custom_css posts by introducing wp_update_custom_css_post() function and renaming update filter. [39350] #35395, #38672
  • Clean up docs and code style for customize changes in 4.7. [39345] #37770, #38908

Embeds

  • Correctly remove security attribute from iframes in IE 10 and IE 11. [39347] #38694

General

  • Git: Ignore patch related files, so they can’t be accidentally committed. [39361] #38727
  • SVN: Ignore patch related files, so they can’t be accidentally committed. [39360] #38727
  • Docs: Add a missing changelog entry for the point where the $tagnames parameter was added to get_shortcode_regex(). [39351] #38914

Misc

Plugins

  • WP_Hook: Re-initialize any actions added directly to $wp_filter by advanced-cache.php. [39370-39369] #38929

REST API

  • Add test for creating a comment with an invalid post ID. [39375] #38816, #38991
  • Add tests for empty or “no-op” updates. [39371] #38700, #38975
  • Special case the “standard” post format to always be allowed. [39353] #38916
  • Allow unsetting a post’s password. [39352] #38919
  • Add support for comments of password-protected posts. [39349] #38692
  • Always fire the rest_insert_* actions after the related object is updated or inserted. [39348] #38905
  • Make JS Client store schema in session storage. [39344] #38895
  • Allow unsetting of page templates in update requests. [39343] #38877
  • Update “resource” strings to use the appropriate nouns. [39342] #38811

Themes

  • Fix logic for previewing the URL for nav_menu_item settings for terms and post type archives. [39366] #38114, #38945
  • Theme starter content: Add support for featured images and page templates. [39346] #38615

TinyMCE

  • Fix the styling of notices generated by the editor UI. [39367] #38917

Thanks to @mor10, @adamsilverstein, @afercia, @azaozz, @celloexpressions, @danielbachhuber, @davidakennedy, @dd32, @delawski, @DrewAPicture, @flixos90, @georgestephanis, @helen, @iseulde, @jnylen0, @joehoyl, @joehoyle, @johnbillion, @karmatosed, @keesiemeijer, @lucasstark, @nacin, @ocean90, @odysseygate, @pento, @rachelbaker, @ramiy, @swissspidy, @tg29359, @westonruter, and @xrm for their contributions!

WordCamp US Attendee Guide: 2016 Edition

The second annual WordCamp kicks off this Friday at the Convention Center in the heart Philadelphia.

The two-day event is jam-packed with incredible speakers, sessions, and swag. Since the Torque team went last year, we thought would pass along some advice to anyone going this year.

General WordCamp Advice

First, let’s dive in to some general advice that applies to any event.

  • Bring a water bottle: You will be walking a lot and might not be able to get to a drinking fountain.
  • Wear comfortable shoes: There is a lot of standing and walking, so wearing comfortable shoes will make all the difference.
  • Introduce yourself to everyone: A huge part of any event is getting to know the people around you. Sit next to someone you don’t know and introduce yourself. You might meet your new best friend or even a business partner.
  • Don’t forget about the hallway sessions: Though the main reason to go to a WordCamp is to learn from sessions, make sure to connect with the people around you. A lot of valuable networking can be done in the hallways and at lunch.

Things To Do In Philly

If you’ve never been to Philadelphia before, you might want to explore the city a little bit.

The WCUS team compiled a list of the best things to do while you’re visiting the city.

Conference Specific Advice

Each WordCamp is different. Although the basics remain the same, every experience is different. That’s why we’ve compiled some tips that are specific to WCUS.

  • Don’t miss the State of the Word. Matt Mullenweg’s annual speech is a great overview on the current state of WordPress and where it’s heading.
  • Make sure you go to as many talks as possible. There are some really great speakers this year and it would be a shame to miss out on anything.
  • If you’re looking for a job or have openings in your company, look for the job board. There you can write prospective jobs on a white board or take down numbers.
  • Participate in Contributor Day. On Sunday you can get together with old and new friends and just work. Find a team you want to contribute to and get working.
  • Attend the official WordCamp after party. You worked hard and now it’s time to celebrate WordPress. The official party is being held at the Academy of Natural Sciences and there will be live animals on display.
  • Catch the live stream. If you can’t make it to Philly, make sure to watch the live stream. Every talk will be streamed for free so you won’t miss a thing.

No matter what, you will have a great time at WordCamp US. Get ready to learn and make some great friends. The entire Torque team will be there so make sure to find us and say hi! Look for us at the WP Engine booth to get some limited-edition Torque swag! Can’t wait to see you there!

Do you have any tips for attending WCUS or any WordCamps? Answer in the comments below!

Emily Schiola

Emily Schiola is a Staff Writer at Torque. She loves good beer, bad movies, and cats.

The post WordCamp US Attendee Guide: 2016 Edition appeared first on Torque.

The 8 Best Divi eCourses for Those Looking to Dig Deeper

One of the best ways to learn the ins and outs of Divi is to take a Divi ecourse. Whether you’re interested in learning to set up a blog, learn tricks that can save you time and money, learn web design, or how to set up and build an eCommerce empire, there’s an ecourse available that can get you on the right path.

In this article I take a look at the eight best Divi ecourses (as I see them). I’ve also included 2 new ecourses that look promising.

How I Chose the eCourses

First, I used my own experience. I am a student in some of these courses. Next I looked at ratings and popularity. I read through the reviews to see what other students were saying. I also looked at problems the students posted and the responses they got from the instructors. I viewed the course material and determined if it was appropriate for its target audience and covered enough of the topic. I also contacted many of the instructors and asked questions to help me decide.

One problem with online courses is anyone can be an instructor, but reviews, social proof, popularity, etc., will help weed out the bad ones. Where possible I looked at the credibility and social proof of the instructor, the feedback of their teaching style, and how they handled issues.

I also looked at the age of the content to see how much was still applicable to Divi 3.0. The nature of the web makes it easy for a course to become outdated quickly. Depending on the focus of the course, some or most of their content is still applicable. I discussed this with several of the instructors and some of the courses are currently being updated to 3.0 and will likely be completed by the time you read this.

Udemy vs Self-hosted Platforms

Courses are taught using various platforms. The most popular platforms for Divi courses are Udemy and self-hosted. I’ve identified each course that runs on the Udemy platform. All others are self-hosted. Here’s a look at each platform to help you decide what works best for you.

Udemy

Udemy is a popular platform for online classes. It’s a network that includes the benefits you’d expect from a network such as one bill, ratings system, etc. Udemy courses have a Q/A area where students can ask questions that the instructor or other students can answer. Answers can include text, links, images, and code. You can bookmark lectures and subscribe to announcements in email.

Also with Udemy you have some protection through the buying process, you can read user reviews, use a coupon code, gift to someone else, and buy for your team. You can add the course to your wish list and share the course on your social networks (the information about the course, not the content).

You can contact the instructor without signing up for the course first, so you can ask presales questions. You can also get information by reading the reviews or by viewing any previews they provide. They often run deeply-discounted sales, which can result in instructors creating simpler courses. They have a 30 day money back guarantee so you can get your money back if the course doesn’t work out for you.

Self-hosted

Courses that are provided on individual websites are not constrained by the limits of Udemy or similar platforms. Instructors have lots of plugins to choose from to build their courses, so the mechanics of the courses can be vastly different from one to another. Instructors want a good reputation and purposely choose the best platform that works for them. They can easily provide webinars, downloads, student/teacher interaction through many platforms such as Facebook, and more. They can provide discounts, affiliate links, promotional content, etc.

Instructors often close their courses in order to maintain a manageable number of students they can interact with, giving students a balanced one-on-one face-time with the instructor, which improves student’s learning experience. Students are asked at the end of the course for feedback and reviews rather than being able to review at any time, which can result in them writing inaccurate reviews based on confusion.

You don’t have the protection of dealing with a larger company. It’s between you and the instructor unless the course is sold through a marketplace. They provide various ways to interact with the instructor and other students. Instructors who teach on their own websites have to market more and possibly sell through other outlets, so their prices might be higher. Depending on the popularity of the course, the number of students to interact with can vary. For reviews you’ll have to rely on what is posted at the site or external reviews.

My Picks for the 8 Best Divi eCourses

Let’s take a look at the courses. They’re in no particular order.

1. Divi Child Theme Course

child-theme-divi-ecourse

The Divi Child Theme course from Michelle Nunan consists of 12 modules with 31 video lessons. The focus of the course is on how to create your own child theme business. It covers how to create your demo site, create the child themes, use modules, where to place CSS, where to get ideas, tools to use, selling on the marketplaces and from your own site, and more.

It includes live webinars, a Facebook group for discussion, lots of downloads, and a few of Michelle’s child themes. You have life-time access to the course so you can revisit it as often as you want. The course is not always open (for better student/teacher interaction) so you might have to join the waiting list. It’s a great choice for anyone wanting to create reusable child themes for sell or for their own use.

Coursework Includes:

  • Introduction
  • Research and Planning
  • Tools and Resources
  • Development Environment
  • Design and Function
  • Development Process
  • Testing Your Child Theme
  • Packaging Your Child Theme
  • Documentation and Support
  • Sales and Marketing
  • Ongoing Support and Updates
  • Conclusion

Price: £197.00 | More information

2. CSS and Divi Beginner Course

css-and-divi-beginner-divi-ecourse

CSS and Divi Beginner Course is also from Michelle Nunan that includes 12 modules with 37 lessons. This is a video course that covers tools and resources, shows how CSS works with HTML, covers the basics of CSS, and shows where to place CSS within Divi. It includes child theme files and lots of links to tools and resources.

It also has a Facebook group where you can interact with Michelle and fellow students, and live webinars. It includes weekly assignments and quizzes to help you test and hone your knowledge. Users get lifetime access to the course and materials. This course is also limited to a certain number of students so you might have to join the waiting list. This is a good choice for anyone wanting to get started in CSS for use with Divi.

Coursework Includes:

  • Introduction and Tools
  • What is CSS?
  • CSS Placement
  • Basic CSS Concepts
  • ID’s and Classes
  • Using Properties Part 1
  • Using Properties Part 2
  • Using Properties Part 3
  • Pseudo Classes and Elements
  • Media Queries
  • Chrome Dev Tools
  • Conclusion

Price: £197.00 | More information

3. How To Create A WordPress Website 2016 | NEW Divi Theme 3.0!

how-to-create-a-wordpress-website-2016-divi-ecourse

How To Create A WordPress Website is a free beginner course on Udemy from Darrel Wilson that includes, video, articles, and quizzes. It focuses on modern design trends and how to accomplish them with Divi. It has a rating of 4.7/5 with 107 ratings and includes 5 sections with 38 lectures and has been updated to include information about Divi 3.0.

It shows how to create pre-made layouts to sell and includes free layouts from the author. The course covers both WordPress and Divi. Users get lifetime access. This is a great choice for anyone wanting to learn the basics of WordPress and Divi.

Coursework Includes:

  • Course Overview and Getting Started
  • How To Use The Fullwidth Modules And Create A Landing Page
  • Using Basic Modules + Designs
  • Divi Options, Theme Options, and Layouts
  • Conclusion

Price: Free | More information

4. Give Your WordPress Website a Makeover: Divi WordPress Theme

give-your-wordpress-website-a-makeover-divi-wordpress-theme

Give Your WordPress Website a Makeover: Divi WordPress Theme is a 36-lecture Udemy course from Kristen Palana. It includes 11 sections and 36 lectures in both video and articles. It shows you how to improve your site on many levels. Topics include how to create a portfolio to showcase your work, how to feature your services, sell more products, improve newsletter subscriptions, and diagnosing problems and improve the site’s performance.

It has a rating of 4.6/5 with 51 ratings. Free access to a follow-up course titled WordPress Website Challenge: Easy Ways to Boost Impact is included. Students have lifetime access. This is a good choice for anyone wanting to improve their website using Divi.

Coursework Includes:

  • Introduction
  • Optional Resources
  • Getting Set Up For a WordPress Website Makeover
  • Taking the Plunge! Diving Into Your New Theme
  • Swimming With Divi. Getting Your New Theme to Work For You (*Divi Essentials)
  • More Homepage Essentials: A Rundown on Some More Divi Modules in Action
  • Building Beautiful Secondary Pages With the Divi Builder
  • Adjusting Existing Posts, Plugins, and Getting Your Site to Work For You
  • Bonus Lectures (Extra Resources and/or By Request From Students in This Course)
  • Conclusion and Resources
  • Bonus: Freebies, Discounts, and Special Offers

Price: $125 | More information

5. Create an eCommerce WordPress Website 2016 – New Divi Theme!

create-an-ecommerce-wordpress-website-2016-divi-ecourse

Create an eCommerce WordPress Website 2016 is a free beginner-level course on Udemy from Darrel Wilson with 6 sections and 41 lectures that includes both video and articles. The focus is how to build an eCommerce website from the ground up using Divi. All product types are covered including simple, variable, affiliate, group, virtual, etc. Other eCommerce topics include tax, shipping, inventory management, coupon codes, and more.

It has a rating of 4.7/5 with 16 ratings. This is a great choice for anyone wanting to create an eCommerce website using WooCommerce and Divi. Students have lifetime access.

Coursework Includes:

  • Course Overview
  • Getting Started
  • WebSite Creation
  • Creating Products
  • Web Design With EXTRA Modules
  • WooCommerce Pages + Settings + Marketing

Price: Free | More information

6. Deep Dive Into DIVI

deep-dive-into-divi-ecourse

Deep Dive into Divi from Andrew Palmer covers all the features of Divi through video tutorials, PDF’s, and webinars. All of the features and modules are covered and it even includes tutorials for Bloom and Monarch. An overview of CSS is provided by Michelle Nunan. It includes 20 free page layouts and PDF’s with step-by-step instructions on recreating popular layouts.

Users have lifetime access. It’s currently being updated to 3.0. It’s a good choice for beginners or anyone wanting to learn Divi fundamentals.

Coursework Includes:

  • Introduction
  • Divi Options Panel
  • Theme Customizer
  • Module Customizer
  • Role Editor
  • Widgets
  • Libraries & Portability
  • Contact Form
  • Split Testing
  • Monarch
  • Bloom
  • Page Builder
  • Padding and Margins
  • Images, Column Widths & Best Practices
  • CSS
  • SEO 101

Price: $197 | More information

7. Web Design Mastery for Beginners

web-design-mastery-for-beginners-divi-ecourse

Web Design Mastery for Beginners is a Udemy video course from Augustine Makachemu that’s designed to teach web design Divi in 3 days. The primary focus is WordPress and design. Although it has several sections devoted to Divi many of the videos will work with any theme. It covers from domains and hosting to adding important features to your site using Divi. It includes lots of tips and information about workflow.

Divi 2.5 is discussed, but the fundamentals that are covered work for most versions of Divi. It will soon be updated to cover 3.0. It has 7 sections with 26 lectures. It has a rating of 4.9/5 with 6 ratings. Users have lifetime access. It’s a good choice for anyone wanting to learn beginning web design using WordPress and Divi, as well as other tools such as Photoshop.

Coursework Includes:

  • What makes a website work
  • How to setup your website
  • Planning your website effectively
  • WordPress fundamentals
  • Getting Started with Divi 2.5
  • Designing your website
  • Bonus videos

Price: $25 | More information

8. CSS For Divi

css-for-divi-ecourse

CSS for Divi from Divi.Space is a CSS course that focuses specifically on how to use CSS with Divi. It includes videos, articles, and theme files to download. It covers beginner and advanced topics, so no matter what your knowledge-level of CSS is there’s something here for you. It includes CSS selector maps for each module and child theme files. Members have access to a support group where they can discuss the course.

Users also have access to premium WordPress and Divi tutorials on Divi.Space. It covers 2.x and it’s being revamped for Divi 3.0. It’s a good choice for anyone wanting the learn how to use CSS in Divi.

Coursework Includes:

  • CSS Explained
  • CSS Selectors
  • CSS Stack & Heirarcy in Divi
  • ID’s & Classes in Divi
  • Tools & Equipment
  • Breakpoints & Responsive design
  • Animations without JS
  • Designing in Pseudo
  • Building a Child Theme

Price: $39.99 | More information

New and Upcoming

There are several courses that, as of this writing, have either just released or will release soon. These courses do not yet have a proven track-record but they look promising and are worthy of mention.

Divi Course

divi-course

Divi Course has 3 video courses to choose from including one for beginners, one that focuses on eCommerce, and one that teaches how to build a complete website that includes supporting information such as CSS, marketing, and SEO. Depending on the course you choose you’ll get from 2-8 layouts, royalty-free images, printable tips and guides, and more.

It’s a good choice for beginners through intermediate users who want to start any type of website using Divi including beginning websites and eCommerce stores.

Price: $49, $79, $99 | More information

Divi Theme Tutorial

divi-theme-tutorial-divi-ecourse

The Divi Theme Tutorial course from Peter Krzyzek includes the Divi theme for free (through a special deal with Elegant Themes). It also includes a site audit with recommendations, lots of layouts and examples, and help with CSS, HTML, and PHP code. It’s a video course that includes personal consulting and coaching. Peter will help you and discuss issues related to your website. He will guide you step by step through creating your own website using Divi.

It’s a good choice for anyone wanting personal coaching and consulting to go along with the course.

Price: $297 monthly, $97 monthly for pre-order | More information

Final Thoughts

Well that’s 8 popular plus 2 promising Divi ecourses. Between them you can learn the basics of using Divi, advanced techniques, web design, creating an eCommerce website, how to use CSS, and even how to create your very own child theme business. Most have lifetime access and are constantly being updated and improved, so you can always go back for a refresher.

Have you taken any of these ecourses? Do you plan to? Share your thoughts int he comments below!

Article thumbnail image by Sentavio / shutterstock.com

The post The 8 Best Divi eCourses for Those Looking to Dig Deeper appeared first on Elegant Themes Blog.

How do you decide your next move? Here’s what’s next for me.

How do you decide your next move?

When I left Emphasys a few years ago, I knew I was making a jump into the WordPress ecosystem full time, and I was unsure of what that would look like. Thankfully my friend Karim, CEO of Crowd Favorite, welcomed me into his company and the next year and a half were too busy to spend much time thinking about what it meant to be working full time with WordPress.

Over the last seven months since wrapping up my work with Crowd Favorite, I’ve had the opportunity to talk with several folks who know me and who I deeply trust.

  • Should I stay with WordPress or head back to the corporate world?
  • Should I continue to do coaching & consulting or focus on writing?
  • Should I build a new product? Start a start up? Or join another company?

My friends – Cory, Steve, Syed, ShawnKarim – are fantastic folks running amazing companies and each has had great ideas and challenging questions.

I’ve shared my fears and insecurities, but also my perspectives and dreams. In the end, if we’re talking about how you determine your next move, I guess for me it comes down to several dynamics that I think most people will appreciate.

When writing your story, don’t let someone else hold the pen.

It’s my life. No one else can make a call for what will challenge, inspire, and push me to do the best work that I can.

But what these five friends, and my wife, helped me land on were three realities that helped me start clarifying what I wanted from work.

  1. Just because I can do something doesn’t mean I should do it.
  2. The best work I can do is something that engages most of what I love.
  3. I’m motivated more by impact and influence than anything else.

Points are only scored by players.

I use a lot of sports analogies in my coaching and consulting. One of them relates to the differences between players and support staff (or coaches).

When you buy tickets to see a football game, for example, you’re not excited to see the special teams coach or the team doctor. No matter how helpful they are, points are only scored by the players on the field. Those are the athletes you pay to see.

My friends, even the agency guys, reminded me how often I’ve said, “I’m not a great consultant. I want more impact and influence than that role affords me. I join companies so I can lead the charge.”

Two months ago, I started feeling itchy.

I was making more money than ever, working less than ever (see Instagram cigar photos). But I wanted more.

I wanted to put points on the board. I wanted to get on the field.

And to me, for the kind of influence and impact I like, that meant leading people. Not just doing coaching phone calls and not just writing analysis and strategy papers.

I am a leader of leaders. I’m a builder of high-performing teams.

There are three kinds of companies out there but only one kind that I join.

There are three kinds of companies in the world. At least in my world.

  1. Companies that are awesome.
  2. Companies that aren’t awesome. At all.
  3. Companies that could be awesome.

Many people are attracted to the first kind of company. Some people get stuck at the second kind of company.

But for me, I learned something about myself when I joined my second startup.

My time at Berkeley Lab had been phenomenal. I had learned so much (1994-1997 were years where I barely slept) about the internet and web applications. My first startup had been a success and we’d sold the business in just about a year.

And then I had to decide what to do next. In those days Microsoft was the Google of the software world. They were big. They were awesome. And they had a culture that was impressive. My friend was working there and invited me to move up to Seattle and join the fun.

Then the CEO of my second startup asked me a question. “If you love what they’re doing, but will likely be in a smaller and more limited role up there, why not take an executive role here and build out all the things you like?”

Suffice to say, I joined that startup instead of joining Microsoft.

Because while there are three kinds of companies, the kind I join are companies that could be awesome, but may need a little bit of help. And where I can take a role that lets me provide that help – directly and indirectly.

Should a product guy ever join a hosting company?

I’ll be honest with you. For years, I never imagined working for a hosting company because I’m a product guy. And if you’re a hosting company, you have just one product. Not necessarily a great place for a product guy.

Thankfully, the CTO of WP Engine, Jason Cohen, challenged this line of thinking years ago at the last WordCamp San Francisco. And so, it’s probably to Jason that I owe the seed planted years ago that has had me thinking about what kinds of products could make sense inside a hosting company.

Suffice to say, over the last couple years, I’ve spent some time thinking about a variety of product ideas. Some of which I think could be really useful. And interesting.

Have I mentioned Cory Miller?

Everyone loves Cory Miller, right? My story is no different.

One day I got a text from Cory that simply said, “I just told Liquid Web they needed to talk with you for 15 minutes.”

We circled back to have a Skype call a day or two later and he fleshed out the conversation. As iThemes and Liquid Web were talking about partnering, a variety of business topics and WordPress ecosystem questions had come up and Cory had recommended that they follow up with me.

Always appreciative of being recommended, I was happy to talk with their CTO about the WordPress world.

This past summer, Cory also introduced me to their CEO in Oklahoma at the Friends of iThemes event.

And after a conversation where I told Cory I was starting to feel a bit itchy about not leading people and wondering what my next move might be, he let the execs there know that we might want to have a conversation.

I’m joining Liquid Web as their
VP of Products & Innovation

The new management team at Liquid Web is rock solid. In and of itself, that would be enough to encourage someone to look closely at what they’re up to. They’re seasoned executives. Upon meeting the executive team, I felt like this was a team that I would be thrilled to join, work with, and learn from.

In the past year, they’ve stepped in, sold off their shared hosting and purchased Cloud Sites from Rackspace. They’re partnered with iThemes to add their products to their new managed hosting offering.

The role that I’m stepping into didn’t exist. Our conversations created it.

And that is a powerful dynamic – because it means that Liquid Web is a place that can offer me an opportunity to leverage all my talents and experience, while also being a place where I can stretch, grow and keep learning – at the exact same time!

I shared my perspective with their executive team, and investors, on where I thought WordPress was going, and where it would need to go, in the next ten years. I shared my sense of the bets someone would need to make. And our visions aligned.

I can’t wait to step into the organization and help our team make some of those bets. I think they’ll be good for Liquid Web. But more importantly, I think they’ll be good for the entire WordPress ecosystem.

It’s that kind of impact and influence I’ve been looking for.

Want to come work with me?

I’m sure I’ll soon be hiring product developers. Tell me about yourself.

The post How do you decide your next move? Here’s what’s next for me. appeared first on ChrisLema.com.

Site structure: the ultimate guide

Your site needs a certain structure. Otherwise, it’ll just be a collection of pages and blog posts. Your users needs the structure to navigate through your site, to click from one page to the other. And Google uses the structure of your site in order to determine what content is important and what content is less important. In this ultimate guide, we’ll tell you everything you need to know about site structure.

Are you struggling with setting up your site’s structure? Don’t know exactly what the best strategy is to link from one post to another? Early december 2016, we’ll release a brand new Site structure training. After following this course, you’ll be able to manage your own site structure.

Why is site structure important?

Structuring your website is of great importance for both usability and findability. A lot of sites lack a decent structure to guide visitors to the product they’re looking for. Apart from that, having a clear site structure leads to better understanding of your site by Google, so it’s really important for your SEO. In this chapter, we’ll explain the importance of having a good site structure in detail.

1 Importance for usability

The structure of your website is of great importance for the User eXperience (UX) on your website. If visitors are able to find the products and information they’re looking for, chances increase that they’ll become customers. In other words, you should help them navigate through your shop. A good site structure will help you do that.

Navigating should be easy. You need to categorize your posts and products in a way that they will be easy to find. New audiences should be able to instantly grasp what kind of products you’re selling.

2 Importance for SEO

The structure of a website or a shop is of great importance for its chances to rank in search engines. In our opinion, there are three main reasons for this:

1. It helps Google ‘understand’ your site

The way you structure your site will give Google important clues about where to find the most important content. Your site’s structure determines whether a search engine can understand what your site is about and what you’re selling. It also determines how easily a search engine will find and index the content on certain products. A good structure could, therefore, lead to a higher ranking in Google.

2. It prevents competing with your own content

In your site, you might have blogposts that are quite alike. Perhaps you write a lot about SEO. You could have multiple blog posts about site structure (each covering a different aspect). Consequently, Google would not know which of the product pages is the most important one. So you’d be competing with your pages for a high ranking in Google. You should let Google know which page you deem most important. To do this, you need a good internal linking structure and taxonomy structure, so you can make all those pages work for you, instead of against you.

3. It deals with changes in your website

The products you sell in your shop will probably change over time. So could the content you’re writing. A new collection will be added, as the old one is sold out. Or perhaps you think the information of outdated blogpost should disappear from your site. You do not want Google to show outdated products or blogposts which are no longer available.  You’ll have to deal with these kinds of changes in the structure of your site.

Content SEO: learn how to do keyword research, how to structure your site and how to write SEO friendly content »

Content SEO$ 19€ 19 – Buy now » Info

How to set up the structure of your site?

So, how do you construct a decent site structure? We’ll first explain what an ideal site structure looks like and then explain to you how to achieve that for your own site.

Ideal blog structure

The structure of your site should be like a pyramid. On the top of the pyramid is your homepage, and under the homepage are a number of category pages. For larger sites, one should make subcategories or custom taxonomies (more on that later). Within the categories and subcategories you will have a number of blog posts, pages or product pages.

Read more: ‘Intelligent site structure for better SEO’ »

Dividing your pages into categories

If you’ve not yet divided the blog posts or product pages on your site into a number of categories, you should definitely do so (right away). Make sure to add these categories to the main menu of your site.

Equally large categories

Make sure that categories are about equally large. If a category becomes too large because you are blogging a lot about a certain topic, you should divide that category into two main categories. A good rule of thumb for the size of categories is to make sure that no category is more than twice the size of any other category. If you have one such category, dividing it into two separate ones would result in a more accurate reflection of the content on your website. Note that if your category name is reflected in your website’s permalink structure, you should make sure URLs are properly redirected after splitting up a category.

Internal link structure

Your linking structure is of great importance. Each page in the top of a pyramid should link to its subpages. And vice versa, all the subpages should link to the pages on top of the pyramid. There should be really important content (cornerstone articles) at the top of your pyramid, and these should be the articles you link to from all of your blog posts.

Because you’re linking from pages that are closely related to each other content-wise, you’re increasing your site’s possibility to rank. Linking this way will help out search engines by showing them what’s related and what isn’t.

On top of that, with all subpages linking to that one main page at the very top of your pyramid, you are creating cornerstone pages (read more about cornerstone content later on). These will make it easy for search engines to determine what your main pages per subject are.

How to incorporate cornerstone content[/readmore]

Taxonomies and tags

Your site will also benefit by adding tags. Tags and taxonomies will give your site more structure (or at least Google will understand it better).

In WordPress there are two standard ways of adding taxonomies: you can use the aforementioned categories (which will give you the pyramid-like structure) and you can use tags. The difference has to do with structure. Categories are hierarchical; you can have subcategories and sub-subcategories, whereas tags don’t have that hierarchy. Think of it like this: categories are the table of contents of your website, and tags are the index.

Try not to create too many tags. If every post or article receives yet another new unique tag, you are not structuring anything. Make sure tags are used more than once or twice. Make sure tags group articles together that really belong together.

In some WordPress themes, tags are displayed with each post. But, some themes neglect to do so. You should make sure your tags are in fact available to your visitors somewhere, preferably at the bottom of your article. Tags are really useful for your visitors (and not just for Google) to read more about the same topic.

Keep reading: ‘Tagging post properly for users and SEO’ »

Cornerstone content

Really important content pages are called cornerstone content. Cornerstone articles are the most important articles on your website. This is the content that exactly reflects your business or the mission of your business. But focusing on the field around your business could also be a fine strategy to increase your audience and potential buyers.

As we’ve discussed before, cornerstone articles should be relatively high in your site structure, focusing on the most ‘head’ and competitive keywords. If you think of four specific pages you would like someone to read in order to tell them about your site or company, these would need to be the cornerstone articles. In most cases, the homepage would link to these articles.

Websites should have a minimum of one or two cornerstone articles and a maximum of eight to ten. If you want to write more than ten cornerstone articles, you should probably start a second website.

Read on: ‘What type of content should a cornerstone article be?’ »

Category pages or tag pages could make great cornerstone ‘articles’ as well. If you want to optimize your category pages for cornerstone content, it is of great importance to provide really awesome introductory content. You should make sure that this page is a compelling overview of the subject and invites visitors to read even more articles on your sites.

Practical tips and quick wins

Your structure is dynamic. Your business might change over the years, and it makes sense your site’s structure will reflect this change. When you don’t think about your website’s structure on a regular basis, it could grow into this monstrous collection of pages. Your pages or products might not fit in your navigation anymore, and the coherence of your website is nowhere to be found.

Remove and redirect!

Lots of shops will sell a different collection of products (clothes; shoes) every season. The old products could go on sale for a while, but eventually they will be sold out. If you don’t expect to sell the exact same product again, you should remove the page. Also, if content is completely outdated, remove that page!

However, you may have had some valuable links to that exact page. You want to make sure you benefit from these links, even though the page does not exist anymore. That’s why you should redirect the URL.

Redirecting pages is not that hard. If you use WordPress, our Yoast SEO Premium plugin can help you to take care of redirects. Preferably you should redirect the URL (301) to the product that replaced the product or, if there is no replacement, a related page. That could be the category page of the specific product,  as a last resort to your homepage. This way the (outdated) page won’t interfere with your site structure anymore.

Evaluate your menu

When your business goals or your website changes, your menu should probably change as well. When you start restructuring your site, making a visual presentation (like an organogram) will pay off. Start with your desired (one or two level) menu and see if you can fit in more of the pages you have created over the years. You’ll find that some pages are still valid, but don’t seem suitable for your menu anymore. No problem, just make sure to link them on related pages and in your sitemaps. This way Google and your visitors can still find these pages. Perhaps the organogram will also show you the gaps in the site structure.

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

Rethink your taxonomy

Creating an overview of your categories, subcategories and products or posts will also help you to reconsider your site’s taxonomy. Do your product categories and subcategories still provide a logical overview of your product portfolio? Perhaps you’ve noticed somewhere down the line that one product category has been far more successful than others.Or perhaps you wrote many blog posts about one subject and very few about the others.

If one category grows much larger than others your site’s pyramid might get off balance. Think about splitting this category into different categories. But, if some product lines tend to become much smaller than others you might want to merge them. Try to create eight to ten top level categories max to keep your site and structure focused. And don’t forget to redirect the ones you delete.

Tell Google about it

In the unlikely event you have constructed your HTML sitemap manually, update that sitemap after changing your site structure. In the likely event you have an XML sitemap, re-submit it to Google Search Console.

Read more: ‘The structure of a growing blog’ »

Duplicate content

The same content is shown on multiple locations on your site. As a reader, you don’t mind: you’ll get the content you came for. But a search engine has to pick which one to show in the search results, as it doesn’t want to show the same content twice.

Above that, when other websites link to your product, chances are some of them link to the first URL, and others link to the second URL. If these duplicates were all linking to the same URL, though your chance of ranking in the top 10 for the relevant keyword would be much higher. Joost wrote a huge article about this on our website that you should definitely read.

WP Robot Review – Autoblogging Made Easy

Autoblogging often gets a bad rap because it can be abusive. And that’s true – I certainly won’t deny it. BUT, there’s nothing inherently abusive about autoblogging. As long as everything is above board, autoblogging can be a valuable tool for your site. Today, I’ll be looking at WP Robot Version 5, the latest incarnation of the popular WP Robot autoblogging plugin. This version brings a whole new interface and a slew of new features.

The post WP Robot Review – Autoblogging Made Easy appeared first on WPLift.

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:

<?php
	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.