Archiv der Kategorie: Tutorial

New Course: Coding Advanced WordPress Theme Templates

Our new short course is ideal for you if you want to take your WordPress development skills to the next level. Try out Coding Advanced WordPress Theme Templates, or read on and watch the intro video below for more details.

What You’ll Learn

Template files are at the heart of every WordPress theme. And if you’ve already gotten started creating WordPress themes, chances are you have some experience with coding template files. But there’s always more to learn!

In this course, you’ll learn how to customize your themes with advanced theme templates. Rachel McCollin will show you how to create an advanced WordPress theme for a blog. 

Coding Advanced Theme Templates

Along the way, you’ll learn different ways to code the Loop, how to create templates for custom page and post types, how to create templates for custom taxonomies, and how to use conditional tags to make your templates more flexible.

Watch the Introduction

//fast.wistia.com/assets/external/E-v1.js

 

Take the Course

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 630,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

from Envato Tuts+ Code – WordPress https://ift.tt/2Nj06jf

Advertisements

20 Best Bootstrap 4 Plugins

Totally open source and free to use, Bootstrap has become one of the most popular front-end frameworks for desktop and mobile development. With a mobile-first approach, the framework essentially forces designers to create sites for small screens and then scale designs up from there. 

Bootstrap 4 is the newest version of the framework, and today we take a look at the 20 best Bootstrap 4 plugins available at CodeCanyon. Whether you’re coding a WordPress theme or searching for form or navbar templates for your static site, CodeCanyon has a plugin for you!

1. WP Pricing Builder

WP Pricing Builder allows users to set up responsive pricing tables within minutes. The plugin offers a drag-and-drop builder, 89 unique designs and a colour theme generator among other features. This makes setup easy and allows for a high degree of customisation.

WP Pricing Builder

User TelosAlpha says:

„Fast clear support. But beyond that, this is a very advanced and well written piece of code. Very intuitive to use, many fantastic styles.”

2. Progress Map

Progress Map is a WordPress plugin for location-based listings. It enables users who have websites that showcase services like hotels, real estate, restaurants, jobs etc. to have the locations for those listings identified on Google Maps by markers and a special carousel. The carousel is connected to the map, which means that when you select an item in the carousel, the corresponding location is shown on the map, and vice versa. New locations can be added to the map and carousel using a form on the “add new post” page. 

Progress Map

User Moraviani says:

“Very customizable, sleek and elegant plugin that takes your site to a professional level. Many great options. Very fast and when used well, it will give your site the perfect look and usage. Highly recommended.“

3. Nearby Places

The Nearby Places plugin is an extension of the above Progress Map plugin. It allows users to display points of interest near a specific location added from the owner’s Progress Map. These points of interest are supplied by Google Maps. The plugin also provides a powerful search form that allows users to target their position or to enter a given address and display all nearby points of interest. The plugin can be customised from the admin panel in order to match the general look of your website.

Nearby Places

User gijon says:

“After so much searching, this is the best map plugin I have found very complete and easy to use.”

4. Modern – Bootstrap 4 Forms

Modern – Bootstrap 4 Forms allows you to build any kind of cards you want for your site. It provides eight different styles of cards such as product cards, profile cards, testimonial cards, etc. as well as a grid. The plugin is simple to implement, and users are able to edit, change and customise them easily.

Modern - Bootstrap 4 Forms

5. Web Slide

Inspired by mobile design, Web Slide brings slide navigation to your website layout. Featuring one code for all devices, a mobile drawer style menu, an app style look and CSS 3 animation effects, the plugin is compatible with major desktop and mobile browsers like Chrome, Edge, Firefox, Safari, and Opera.

Web Slide

User quadnine says:

“A great product with top-notch support. This was money well spent.”

6. Reside Rental Property Management

The Reside Rental Property Management plugin is designed to make it easy to manage all information related to property management such as properties owned, leases, tenants using those properties, rental payments received, etc. The plugin helps you keep important details of your business accessible at any time, from any computer or device. 

Reside Rental Property Management

7. JQuery XML Shopping Cart

If you’re looking for a shopping cart that’s easy to install and use, check out JQuery XML Shopping Cart. Some of its great features include support for unlimited products, which can easily be divided into categories and subcategories; a default tax rate which can be modified to a per-product tax rate; and a base shipping charge to which additional charges can be added as needed. 

 JQuery XML Shopping Cart

User dnkn76 says:

“Documentation quality and flexibility is excellent comparing to another non-PHP shopping cart I bought. In no time the store was up and running and shipping cost, taxes and changing currency is a breeze. 

8. Bootstrap 4 Carousel

Bootstrap 4 Carousel gives users multiple options for displaying images on their website, including slider with thumbnails, multiple items carousel, fade effect carousel, Bootstrap image slider gallery, and more. The plugin provides over 200 pre-built examples and layouts for user convenience. This responsive carousel is compatible with mobile and tablet devices and all the latest web browsers. 

Bootstrap 4 Carousel

9. Scroll Magic WordPress

Scroll Magic WordPress is a clever and creative plugin that allows users to create a webpage that easily reacts to a visitor’s current scroll behaviour. Website owners can either trigger an animation or synchronise it to the scrollbar movement. Elements can be pinned at a specific scroll position either indefinitely or for a limited amount of scroll progress. The plugin also features the ability to add parallax and a host of other fun effects to your website.

Scroll Magic WordPress

User vallered says:

“Awesome Plugin. With the newest update one can implement any custom CSS on scroll. Performance is great, very smooth animations, as well as the immediate support. This is the solution that I’ve been searching a long time for.”

10. Modern MegaMenu

Modern MegaMenu is all about giving users as many options as possible for creating the menu and navbar of their dreams. The plugin offers over 50 header layouts and a wide variety of navbar styles. This fully responsive Bootstrap 4 plugin is easily integrated into your site and is highly customisable. 

Modern MegaMenu

11. Schoex

Schoex is an incredible school management system that allows educational institutions to build a flexible communication system between administrators, teachers, students, and parents. The plugin allows the school to assign users different level of access to information contained on the site. Information like attendance, grades, exams, homework assignment, etc. can be recorded and monitored.

Schoex

User erpaulsmith says:

“I am very happy with the application and especially with the support service. Thank you guys for this great service!”

12. Digital Sell Marketplace

There are many models for selling goods and services online, and Digital Sell Marketplace is a Bootstrap 4 plugin that offers what it calls an “advanced lightweight PDO PayPal digital download script” that lets you sell your products quickly and easily. Though the script is lightweight, the features of this plugin are not. It comes packed with tons of professional components like stock control and inventory, categories and subcategories, coupon codes and support to help businesses run professionally and efficiently.

Digital Sell Marketplace

User tarkuslove says:

„Brilliant script. Works very well. Well designed and very well coded. The customer support is first class. If you need a digital marketplace and don’t want the stress of trying to set it up on WP or something then get this script. Great Quality, Great service, Highly recommended.”

13. SNOW UI Kit

SNOW UI Kit is a responsive and multipurpose skin template which provides users with a large selection of user interface components to add to their websites, including buttons in various shapes, sizes and colours; a wide range of options for displaying images; a number of styles of features boxes and cards, plus over 675 icons by Font Awesome. An excellent choice when starting work on your new website, SNOW UI Kit is easy to install and well documented.

SNOW UI Kit

14. Floating Form

A collection of floating inline label forms, Floating Form contains a large number of forms such as contact, review, search, login and subscription forms, as well as a wide variety of booking forms. Each form has its own stylesheet.

Floating Form

15. Laraship E-Commerce

Though a newcomer to the e-commerce field, Laraship E-Commerce has already distinguished itself as one of the best-rated plugins in this category at CodeCanyon. Among its outstanding features are its product, tax and shipping management. It also offers a powerful search using full-text search indexes and supports multiple currencies. 

Laraship E-Commerce

User callelance says:

“One of the best e-Commerce platforms, ready to go. This is what I have been looking for my project. Seller was very responsive to all my questions and helped us install on our server. Great design. Well structured code. Great customer support.“

16. Cascade

If you’re getting ready to build a new website, Cascade might come in handy. That’s because the plugin offers a huge library of user interface (UI) components like progress bars, popovers, navbars, carousels, cards and panels, forms, buttons and badges, and much more. What’s more, the SCSS files are included, so customisation is simple and easy.

Cascade

17. User Management

WordPress already comes with some basic user management functions which the User Management plugin aims to improve on and expand. The website administrator can add, edit and delete users and view stats from the dashboard, while users have access to registration and login pages and their own dashboard. Additional features include email verification, Google Recaptcha, etc. 

User Management

User garimam says:

“Prompt support for fixing issues. The interface and code quality are also good.”

18. Bootstrap 4 WYSIWYG Editor

If you’re looking for a Bootstrap “what you see is what you get” (WYSIWYG) editor that will allow you to see what the end result of your project will look like while you’re creating it, then Bootstrap 4 WYSIWYG Editor may be for you. This simple and easy-to-use editor requires jQuery, Bootstrap 4, and Font Awesome. 

Bootstrap 4 WYSIWYG Editor

User innovationco says:

“I’ve used this for another plugin that I am making and it’s a very nice editor with no bloat, which makes it easy for me to use. I have had no issues with it and I would highly recommend it to others.”

19. Ultimate Before After Slider

The Ultimate Before After Slider for WordPress lets you showcase before and after images beautifully. There are four viewing modes available: horizontal, vertical, fade, and side by side. Other great features include the option to add image credits under the slider, unlimited sliders on one page, and touch and swipe on mobile devices. 

Ultimate Before After Slider

User PapaJohns says:

“I’ve spent only 2 minutes to make a before/after slider on my website. Definitely recommending this plugin.”

20. WooCommerce Step Filter

WooCommerce Step Filter helps your customers choose the product that’s right for them by filtering the products they are interested in by price, a specific attribute, or a custom rule. The plugin is customisable so you can tailor it to suit your needs. 

WooCommerce Step Filter

User APlayer says:

„I was searching for a plugin to suit my needs for a long time before finding this one. It is simple to set up and to use, and the customer support has been fantastic.“ 

Conclusion

The 20 Bootstrap 4 plugins featured here just scratch the surface of options available at CodeCanyon, so if none of them appeal, there are plenty of other great options there to hold your interest.

And if you want to improve your skills using Bootstrap yourself, check out the ever so useful Bootstrap tutorials we have on offer.

from Envato Tuts+ Code – WordPress https://ift.tt/2un53Qt

8 Best WordPress Slider & Carousel Plugins of 2018

Whether you want to show off customer testimonials, your latest blog posts, your best images, or just celebrate the members of your team, there is a WordPress slider or carousel plugin out there that’s right for you.

But before we share the 8 hottest in the Envato Market this year, maybe we should clarify the difference (or the lack thereof) between a slider and a carousel plugin. Some say that there’s little difference between the two because they both do a variation of the same thing: display a number of images in a slideshow format while offering some controls like previous/next arrows, thumbnail navigation, and sometimes transition effects between the slides.

Others insist that though this may be true, the important distinction between the two is that a slider slides the images horizontally or vertically while a carousel rotates the images on an axis with the image always facing the viewer. While the jury is still out which camp is right, for the purpose of this article we’ll treat the two terms as interchangeable and get on with the business of revealing the 8 Best Slider & Carousel Plugins of 2018 on CodeCanyon.

1. Foxy – WooCommerce Product Image Gallery Slider Carousel

The Foxy product image slider is foxy. It’s easy to use, quick, and looks great—the perfect slider to display WooCommerce products.

Foxy - WooCommerce Product Image Gallery Slider Carousel

Features include:

  • over 150 different options
  • fully responsive
  • preview mode
  • 8 templates
  • and more

If you’re looking for a product image slider for WooCommerce, look no further; the Foxy – WooCommerce Product Image Gallery Slider Carousel has got everything you’ll ever want.

2. WP Slick Slider and Image Carousel Pro

Visual Composer users will want to seriously consider the WP Slick Slider plugin. With almost 100 predefined layouts, you’ll find what you’re looking for without having to design or code anything.

WP Slick Slider and Image Carousel Pro

Features include:

  • fully responsive and swipe enabled
  • desktop mouse dragging and infinite looping
  • powerful shortcode generator tool

Some of the design styles include:

  • variable width
  • and center mode

The WP Slick Slider and Image Carousel Pro is an option you’ll want to take seriously—especially for Visual Composer users.

3. Master Slider – WordPress Responsive Touch Slider

There’s no wonder why Master Slider is a perennial favourite on CodeCanyon. The Responsive Touch Slider offers over 70 templates which are highly customizable and as easy to use as 1, 2, 3. 

Master Slider

What I like the most with this plugin is the ability to insert or embed HTML formatted text, links, images or video directly into each slide and then independently animate each layer.

 Other great features include:

  • drag-and-drop visual builder
  • easy to display image gallery as slider
  • touch swipe navigation
  • ability to load and display galleries from services like Flickr and WooCommerce
  • and more

With over 70 customisable options to choose from, Master Slider has a wide cross-user appeal.

4. Slider Pro – Responsive WordPress Slider Plugin

Slider Pro, a top three seller at CodeCanyon, provides a clean and intuitive user interface in the admin area and a smooth navigation experience for the end users.

Slider Pro avoids unnecessary fanciness, which many times is an obstacle for end users in getting the information they need, and instead focuses on simplicity and performance, while still providing a wide range of customization possibilities.

Slider Pro

My favourite feature is the deep linking feature where each slide change will update the URL in the browser’s navigation bar with the appropriate URL hash.

 Other great features include:

  • optimised image loading
  • easy customisation
  • smooth animations
  • multiple layouts
  • and more

Slider Pro, as the name suggests, is the professional solution you need.

5. RoyalSlider – Touch Content Slider for WordPress

The single most downloaded slider at CodeCanyon, Royal Slider for WordPress is packed with irresistible features. Used by companies as diverse as Coca Cola, Ralph Lauren and Land Rover, this plugin does just about everything you could possibly want from a slider.

RoyalSlider

The most appealing feature is the full-screen feature with native HTML5 fullscreen support. Perfect for showing high-resolution photography.

 Other great features include:

  • multiple sliders per page are allowed, even with different skins
  • touch swipe navigation support
  • responsive design
  • vertical or horizontal thumbnails, bullets or tabs for navigation
  • and more

RoyalSlider will definitely wow your visitors with its clean and professional functionality.

6. Logos Showcase – Multi-Use Responsive WP Plugin

The Logos Showcase plugin is specifically targeted for users who want to create a grid of images with external or internal links or need to display a list of clients‘ or sponsors‘ logos.

Logos Showcase

The standout feature with Logos Showcase is the ability to display logos in a grayscale version with the option to display with original colors by hovering if desired.

Other great features include:

  • choice of three different ways to display images
  • control of transition speed and auto scroll is enabled
  • control of default size of logo images
  • option to set URLs to each logo which can open on the same page or in a new page
  • and more

Logos Showcase is the slider to choose if your priority is to display logos and lists most effectively.

7. All Around – Responsive WordPress Content Slider / Carousel, Creative and Fun Sliding Plugin

All Around, as the name suggests, is a really well-rounded slider. It gives you a clean, responsive design, a number of pre-defined styling options, and support for swipe gestures.

It even supports video!

All Around - Responsive WordPress Content Slider  Carousel Creative and Fun Sliding Plugin

„All Around WordPress content slider is a multi-purpose all-in-one slider solution for your website.“

Features include:

  • fully responsive
  • 6 premade styles
  • supports videos
  • vertical or horizontal
  • supports multiple sliders on one page
  • auto-play mode
  • and more

The All Around slide isn’t all-around by name only.

If this is your first WordPress slider and carousel plugin, it just might also be the last one you’ll ever need.

8. Ultra Portfolio – WordPress

Ultra Portfolio will primarily appeal to users who are interested in building portfolios with slider features included. It offers a large number of layout options and really delivers on flexibility and functionality.

Ultra Portfolio

The most appealing feature with this slider is the ability to control animation effects and animation speed.

Other great features include:

  • unlimited layouts
  • WooCommerce integration
  • Google Font integration
  • ability to control the number of columns for various screen resolutions and widths. (2, 3, 4, 5, or 6 columns)
  • and more

Ultra Portfolio should be your choice if you want to combine slider functions with a wide range of portfolio options.

Conclusion

This just a very small selection from the products available in the Envato Marketplace. If you don’t find what you’re looking for here, why not look at what else is available?

Looking for a free WordPress theme to get started fast? We have some great ones for you to choose from!

Furthermore, if you’re interested in getting more into WordPress development, don’t hesitate to review the many tutorials we have available.

Learn How to Use WordPress

Are you new to using WordPress? Learn how to use WordPress in our complete guide. This guide will take you through the full process, from the basics of creating posts and pages right through to installing and customising your first WordPress theme and setting up plugins for security and performance.

from Envato Tuts+ Code – WordPress https://ift.tt/2oPcEmH

WordPress Gutenberg Block API: Extending Blocks

Welcome back to our series on creating custom blocks with the WordPress Gutenberg Block API. This tutorial is all about extending the random image block we created in the previous post. We got as far as adding a drop-down control to select an image category. We’ll continue with this by adding more block options to allow further customization.

Specifically, we’ll see how to add block settings in various parts of the editor. That’s right, you’re not just limited to adding block controls directly on the block itself!

The final my-custom-block plugin code is available to download. Just click the link in the sidebar to the right and download the zip file to your computer, and install it as you would any other WordPress plugin. You can also find the source code in our GitHub repo.

Gutenberg development is cracking on at a fair pace, and there’s been a new significant release since the last tutorial was published. The version of Gutenberg used in this tutorial has been updated to 3.0.1, and some of the editor UI may look slightly different from screenshots shown in previous tutorials in this series.

Let’s Extend!

The drop-down control we added in the previous tutorial was located inside the editor, directly underneath the markup for the random image. This was convenient, but we have other choices too.

We can also add block controls to a pop-up toolbar (which appears when a block is selected) and a block inspector panel.

Block control locations

In the screenshot above, we can see the toolbar controls for the paragraph block [1], as well as the associated controls in the panel inspector [3]. Location [2] shows the drop-down control for our random image block.

You might already be thinking about which location you’d choose for your own block settings, but you don’t have to choose just one of these locations. They aren’t mutually exclusive. For example, for the paragraph block (shown above), you can see that the settings are split between the block inspector panel and the toolbar. 

Furthermore, it’s perfectly OK to have two separate controls in different locations in the editor that affect the same setting. You might not want to do this too often, but it’s useful to know how to implement it, so we’ll see how to do this a little later on.

Direct Block Settings

Let’s start with the easiest way to add functionality to your block, which is directly inside the block’s edit function. We’ve already used this approach to add our random image drop-down control because it requires very little extra effort.

We won’t go over adding new controls to the block itself, but we can tweak the behavior of the drop-down control to be a bit more intuitive. To make it render as close as possible to the front end, we can restrict the drop-down from appearing unless the block is selected.

Let’s make this change now. If you’re following this tutorial from last time then open up /my-custom-block/src/random-image/index.js in your favorite editor. This is the main JavaScript file for our random image block.

One of the props passed to all blocks is isSelected, which holds the status of the block’s visibility. We can use this to conditionally display the category drop-down control.

Firstly, pull out isSelected from the props object and add it to the list of constants inside the edit function. This is useful so we can reference it by a shortened name (i.e. isSelected rather than props.isSelected).

Next, we can use this property to determine if the drop-down control should be displayed:

This is a shorthand way of testing that isSelected is true, since we can’t use a full-blown JavaScript if statement inside JSX code.

Make sure you’re still watching files for changes so any block source code (JSX, ES6+, Sass, etc.) is transpiled into valid JavaScript and CSS. If you aren’t currently watching files for changes, then open a command-line window inside the my-custom-block plugin root folder and enter npm start.

Open up the Gutenberg editor and add the random image block. This time, the drop-down control isn’t visible if the block hasn’t been clicked yet.

Conditional Block Control

This gives the block a much more interactive feel to it.

Toolbar Controls

If you’ve used any of the core Gutenberg blocks (such as the paragraph block) then you’ll be familiar with toolbar settings. As soon as the Paragraph block is selected, a pop-up toolbar appears containing buttons for formatting the text. This type of control is great for block settings that have an on/off type state—for example, text alignment or formatting such as bold or italic.

We’ll use the built-in alignment toolbar control to allow the drop-down image category control to be left (the default), right, or center aligned.

First, we need to pull out the AlignmentToolBar and BlockControls components from wp.blocks. These allow us to show alignment controls inside a floating toolbar above our block when it’s selected. These are part of the core components we can use in our own blocks.

The BlockControls component acts as the toolbar container, and AlignmentToolbar is placed inside.

We still need to hook up the behavior of the alignment toolbar manually, which we can do by adding a new categoryAlign attribute to store block alignment status (left, right, or center).

Our attributes object now contains two settings.

The default for the categoryAlign attribute is an empty string, which will result in no alignment being applied by default.

To reference the new attribute, we can pull this value out into its own constant variable the same way we did for the drop-down category attribute.

All we need to do now is drop the two new components into the edit function and configure the properties.

As you can see all we needed to do was to assign the value attribute of Alignmenttoolbar to categoryAlign attribute and call the setAttributes function whenever a new toolbar button has been clicked. This function in turn updates the categoryAlign attribute and keeps everything in sync.

To apply the alignment style of the drop-down control, we need to add a style property to our form element.

Control Alignment

Note that we don’t need this control to affect anything on the front end, so we didn’t need to add any code to the block’s save function.

Adding a Settings Panel

The block inspector panel provides you with a large area to add block controls and is a great location for more complex controls.

We’ll focus on adding two drop-down controls to the inspector panel. The first one will be a duplicate of the category drop-down control to select the type of random image. This demonstrates how to have more than one control updating a common attribute.

When one control is updated, the corresponding one will automatically update too! In practice, though, you’ll usually only want one control per setting.

The second drop-down control will allow you to select the filter applied to the random image. The PlaceIMG web service supports two types of filter—grayscale and sepia—and we can select between them by simply adding sepia or grayscale to the HTTP request URL. If we don’t specify a filter then a standard colored image will be returned.

The code for the two drop-downs is pretty similar, so we’ll add them together.

First of all, let’s define the new blocks and components we need.

Here, the new variables are InspectorControls, PanelBody, PanelRow, and Fragment, which are all used to help create the inspector panel UI.

The <Fragment> component is very useful when you need to return multiple top-level elements from the edit or save functions but don’t want to wrap them in an element that will be outputted.

<Fragment> won’t output any markup at all on the front end and acts like an invisible container. It’s just a convenient way to return multiple top-level elements and is an alternative to the previous method of returning an array of elements instead.

We only need to add one new attribute called imageFilter as the existing category attribute can be reused.

Inside the edit function, we need to add a new variable with references to the new attribute.

Adding a block inspector panel is surprisingly easy. The component structure we’ll use is as follows:

The <InspectorControls> component acts as the block inspector container, and <PanelBody> defines individual collapsible sections. Inside each of these, you can have any number of <PanelRow> components, which in turn contain your controls.

We’ve already defined markup for our category drop-down control which we can reuse. To do this, abstract it out into a separate function:

This function can then be referenced whenever we need the category drop-down control rendered. The markup for the block inspector panel needs to be outside of the block markup, so we can use the <Fragment> component to wrap them both before they are returned.

Next, we need to add the block inspector components for the category and image filter drop-downs. These need to be defined inside <PanelRow> components, and we also have to define a new callback function to handle the onChange event. This is very similar to the category drop-down code from the last tutorial, so it should be familiar to you by now.

Putting this all together, the edit method’s return function now looks like this:

And the setFilter callback is defined as:

To get the filtered image, we need to update the RandomImage component to accept the new filter value every time the drop-down is changed.

Notice how we’re using this new component property in the edit method to send the new filter value to PlaceIMG.

All these code changes result in a new block inspector panel being created with two drop-down controls to change the image category and filter.

Block Inspector Controls

To get the new filter property working for the front end too, we just need to update the save method. 

Frontend Image Filter

Conclusion

In this post, we covered three different methods for adding settings to a block:

  • pop-up toolbar
  • directly on the block itself
  • block inspector panel

We only added basic settings for each block, but we could easily take this even further by adding support for multiple images, adding image captions, and controlling styles such as the border color, radius, or random image size.

I’m sure that by now you’ve probably got some ideas for creating your own custom blocks. I’d love to hear what kind of blocks you’d find useful in your own projects!

We’re just getting started with Gutenberg here at Envato Tuts+, so if there are any particular aspects of Gutenberg block development you’d like to see covered in more depth in future tutorials, please let us know via the comments.

from Envato Tuts+ Code – WordPress https://ift.tt/2HXKf6w

New Course: Coding Blocks for WordPress Gutenberg

Are you ready for WordPress Gutenberg? This dramatic redesign of the WordPress editor aims to provide a true WYSIWYG experience by breaking up pieces of posts and pages into individual blocks of content. 

In our brand new course, Coding Blocks for WordPress Gutenberg, you’ll learn how to create your own blocks to extend the functionality of the Gutenberg editor. 

Coding Blocks for WordPress Gutenberg

What You’ll Learn

In this step-by-step video course, Jeremy McPeak will show you exactly how blocks work in WordPress Gutenberg and how to write your own.

Among other things, you’ll learn how to:

  • define attributes to maintain state
  • build and refine the user interface for your block
  • store data
  • add rich text capabilities

Check out the quick intro video to get a better idea of what’s included, so that you can get fully up to speed with Gutenberg before it becomes part of WordPress core!

Watch the Introduction

//fast.wistia.com/assets/external/E-v1.js

 

Take the Course

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 550,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

from Envato Tuts+ Code – WordPress https://ift.tt/2JxDuy1

WordPress Gutenberg Block API: Creating Custom Blocks

The new WordPress editor (codenamed Gutenberg) is due for release in version 5.0. Now is the perfect time to get to grips with it before it lands in WordPress core. In this series, I’m showing you how to work with the Block API and create your very own content blocks which you can use to build out your posts and pages.

In the previous post, we saw how to use the create-guten-block toolkit to create a plugin containing a sample block ready for us to work with. We can easily extend this as required, but it’s a good idea to know how to create a block from scratch to fully understand all aspects of Gutenberg block development.

In this post we’ll create a second block in our my-custom-block plugin to display a random image from the PlaceIMG web service. You’ll also be able to customize the block by selecting the image category from a drop-down select control.

But first we’ll learn how block scripts and styles are enqueued before moving on to the all-important registerBlockType() function, which is fundamental to creating blocks in Gutenberg.

Enqueueing Block Scripts and Styles

To add the JavaScript and CSS required by our blocks, we can use two new WordPress hooks provided by Gutenberg:

  • enqueue_block_editor_assets
  • enqueue_block_assets

These are only available if the Gutenberg plugin is active, and they work in a similar way to standard WordPress hooks for enqueueing scripts. However, they are intended specifically for working with Gutenberg blocks.

The enqueue_block_editor_assets hook adds scripts and styles to the admin editor only. This makes it ideal for enqueueing JavaScript to register blocks and CSS to style user interface elements for block settings.

For block output, though, you’ll want your blocks to render the same in the editor as they do on the front end most of the time. Using enqueue_block_assets makes this easy as styles are automatically added to both the editor and front end. You can also use this hook to load JavaScript if required.

But you might be wondering how to enqueue scripts and styles only on the front end. There isn’t a WordPress hook to allow you to do this directly, but you can get around this by adding a conditional statement inside the enqueue_block_assets hook callback function.

To actually enqueue scripts and styles using these two new hooks, you can use the standard wp_enqueue_style() and wp_enqueue_scripts() functions as you normally would.

However, you need to make sure that you’re using the correct script dependencies. For enqueueing scripts on the editor, you can use the following dependencies:

  • scripts: array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-components' )
  • styles: array( 'wp-edit-blocks' )

And when enqueueing styles for both the editor and front end, you can use this dependency:

  • array( 'wp-blocks' )

One thing worth mentioning here is that the actual files enqueued by our my-custom-block plugin are the compiled versions of JavaScript and CSS and not the files containing the JSX and Sass source code.

This is just something to bear in mind when manually enqueueing files. If you try to enqueue raw source code that includes React, ES6+, or Sass then you’ll encounter numerous errors.

This is why it’s useful to use a toolkit such as create-guten-block as it processes and enqueues scripts for you automatically!

Registering Gutenberg Blocks

To create a new block, we need to register it with Gutenberg by calling registerBlockType() and passing in the block name plus a configuration object. This object has quite a few properties that require proper explanation.

Firstly, though, let’s take a look at the block name. This is the first parameter and is a string made up of two parts, a namespace and the block name itself, separated by a forward slash character.

For example:

If you’re registering several blocks in a plugin then you can use the same namespace to organize all your blocks. The namespace must be unique to your plugin, though, which helps prevent naming conflicts. This can happen if a block with the same name has already been registered via another plugin.

The second registerBlockType() parameter is a settings object and requires a number of properties to be specified:

  • title (string): displayed in the editor as the searchable block label
  • description (optional string): describes the purpose of a block
  • icon (optional Dashicon or JSX element): icon associated with a block
  • category (string): where the block appears in the Add blocks dialog
  • keywords (optional array): up to three keywords used in block searches
  • attributes (optional object): handles the dynamic block data
  • edit (function): a function that returns markup to be rendered in the editor
  • save (function): a function that returns markup to be rendered on the front end
  • useOnce (optional boolean): restrict block from being added more than once
  • supports (optional object): defines block-supported features

Assuming we’re using JSX for block development, here’s what an example registerBlockType() call could look like for a very simple block:

Notice how we didn’t include an entry for the description, attributes, useOnce, and supports properties? Any fields that are optional (and not relevant to your block) can be safely omitted. For example, as this block didn’t involve any dynamic data, we don’t need to worry about specifying any attributes.

Let’s now cover the registerBlockType() configuration object properties in more detail one by one.

Title and Description

When inserting or searching for a block in the editor, the title will be displayed in the list of available blocks.

It’s also displayed in the block inspector window, along with the block description if defined. If the block inspector isn’t currently visible then you can use the gear icon in the top right corner of the Gutenberg editor to toggle visibility.

Block title and description

Both the title and description fields should ideally be wrapped in i18n functions to allow translation into other languages.

Category

There are five block categories currently available:

  • common
  • formatting
  • layout
  • widgets
  • embed

These determine the category section where your block is listed inside the Add block window.

Block categories

The Blocks tab contains Common Blocks, Formatting, Layout Elements, and Widgets categories, while the Embeds category has its own tab.

Categories are currently fixed in Gutenberg, but this could be subject to change in the future. This would be useful, for instance, if you were developing multiple blocks in a single plugin and you wanted them all to be listed under a common category so users could locate them more easily.

Icon

By default, your block is assigned the shield Dashicon, but you can override this by specifying a custom Dashicon in the icon field.

Dashicons

Each Dashicon is prefixed with dashicons- followed by a unique string. For example, the gear icon has the name dashicons-admin-generic. To use this as a block icon, just remove the dashicons- prefix for it to be recognised, e.g. icon: 'admin-generic'.

However, you aren’t just limited to using Dashicons as the icon property. The function also accepts a JSX element, which means you can use any image or SVG element as your block icon. 

Just make sure to keep the icon size consistent with other block icons, which is 20 x 20 pixels by default.

Keywords

Choose up to three translatable keywords to help make your block stand out when users search for a block. It’s best to choose keywords that closely relate to the functionality of your block for best results.

You could even declare your company and/or plugin name as keywords so that if you have multiple blocks, users can start typing your company name and all your blocks will appear in search results.

Although adding keywords is entirely optional, it’s a great way to make it easier for users to find your blocks.

Attributes

Attributes help with managing dynamic data in a block. This property is optional as you don’t need it for very simple blocks that output static content.

However, if your block deals with data that could change (such as the contents of an editable text area) or you need to store block settings, then using attributes is the way to go. 

Attributes work by storing dynamic block data either in the post content saved to the database or in post meta. In this tutorial we’ll only be using attributes that store data along with the post content.

To retrieve attribute data stored in post content, we need to specify where it’s located in the markup. We can do this by specifying a CSS selector that points to the attribute data.

For example, if our block contained an anchor tag, we can use its title field as our attribute as follows:

Here, the attribute name is linktitle, which is an arbitrary string and can be anything you like.

For example, we could use this attribute to store the link title <a title="some title"> that’s been entered via a textbox in block settings. Doing so suddenly makes the title field dynamic and allows you to change its value in the editor.

When the post is saved, the attribute value is inserted into the links title field. Similarly, when the editor is loaded, the value of the title tag is retrieved from the content and inserted into the linktitle attribute.

There are more ways you can use source to determine how block content is stored or retrieved via attributes. For instance, you can use the 'text' source to extract the inner text from a paragraph element.

You can also use the children source to extract all child nodes of an element into an array and store it in an attribute.

This selects the element with class .parent and stores all child nodes in the editablecontent attribute.

If you don’t specify a source then the attribute value is saved in HTML comments as part of the post markup when saved to the database. These comments are stripped out before the post is rendered on the front end.

We’ll be seeing a specific example of this type of attribute when we get into implementing our random image block later in this tutorial.

Attributes can take a little getting used to, so don’t worry if you don’t fully understand them first time around. I’d recommend taking a look at the attributes section of the Gutenberg handbook for more details and examples.

Edit

The edit function controls how your block appears inside the editor interface. Dynamic data is passed to each block as props, including any custom attributes that have been defined.

It’s common practice to add className={ props.className } to the main block element to output a CSS class specific to your block. WordPress doesn’t add this for you inside the editor, so it has to be added manually for each block if you want to include it.

Using props.className is standard practice and is recommended as it provides a way to tailor CSS styles for each individual block. The format of the generated CSS class is .wp-block-{namespace}-{name}. As you can see, this is based on the block namespace/name and makes it ideal to be used as a unique block identifier.

The edit function requires you to return valid markup via the render() method, which is then used to render your block inside the editor.

Save

Similar to the edit function, save displays a visual representation of your block but on the front end. It also receives dynamic block data (if defined) via props.

One main difference is that props.className isn’t available inside save, but this isn’t a problem because it’s inserted automatically by Gutenberg.

Supports

The supports property accepts an object of boolean values to determine whether your block supports certain core features.

The available object properties you can set are as follows.

  • anchor (default false): allows you to link directly to a specific block
  • customClassName (true): adds a field in the block inspector to define a custom className for the block 
  • className (true): adds a className to the block root element based on the block name
  • html (true): allows the block markup to be edited directly

The useOnce Property

This is a useful property that allows you to restrict a block from being added more than once to a page. An example of this is the core More block, which can’t be added to a page if already present.

useOnce property

As you can see, once the More block has been added, the block icon is grayed out and can’t be selected. The useOnce property is set to false by default.

Let’s Get Creative!

It’s time now to use the knowledge we’ve gained so far to implement a solid working example of a block that does something more interesting than simply output static content.

We’ll be building a block to output a random image obtained via an external request to the PlaceIMG website, which returns a random image. Furthermore, you’ll be able to select the category of image returned via a select drop-down control.

Our random image block

For convenience, we’ll add our new block to the same my-custom-block plugin, rather than creating a brand new plugin. The code for the default block is located inside the /src/block folder, so add another folder inside /src called random-image and add three new files:

  • index.js: registers our new block
  • editor.scss: for editor styles
  • style.scss: styles for the editor and front end

Alternatively, you could copy the /src/block folder and rename it if you don’t want to type everything out by hand. Make sure, though, to rename block.js to index.js inside the new block folder.

We’re using index.js for the main block filename as this allows us to simplify the import statement inside blocks.js. Instead of having to include the path and full filename of the block, we can just specify the path to the block folder, and import will automatically look for an index.js file.

Open up /src/blocks.js and add a reference to our new block at the top of the file, directly underneath the existing import statement.

Inside /src/random-image/index.js, add the following code to kick-start our new block.

This sets up the framework of our block and is pretty similar to the boilerplate block code generated by the create-guten-block toolkit.

We start by importing the editor and front-end style sheets, and then we’ll extract some commonly used functions from wp.i18n and wp.blocks into local variables.

Inside registerBlockType(), values have been entered for the title, icon, category, and keywords properties, while the edit and save functions currently just output static content.

Add the random image block to a new page to see the output generated so far.

Bare bones block output

Make sure you’re still watching files for changes so any block source code (JSX, ES6+, Sass, etc.) is transpiled into valid JavaScript and CSS. If you aren’t currently watching files for changes, then open a command line window inside the my-custom-block plugin root folder and enter npm start.

You might be wondering why we didn’t have to add any PHP code to enqueue additional block scripts. The block scripts for the my-custom-block block are enqueued via init.php, but we don’t need to enqueue scripts specifically for our new block as this is taken care of for us by create-guten-block.

As long as we import our main block file into src/blocks.js (as we did above) then we don’t need to do any additional work. All JSX, ES6+, and Sass code will automatically be compiled into the following files:

  • dist/blocks.style.build.css: styles for editor and front end
  • dist/blocks.build.js: JavaScript for editor only
  • dist/blocks.editor.build.css: styles for editor only

These files contain the JavaScript and CSS for all blocks, so only one set of files needs to be enqueued, regardless of the number of blocks created!

We’re now ready to add a bit of interactivity to our block, and we can do this by first adding an attribute to store the image category.

This creates an attribute called category, which stores a string with a default value of 'nature'. We didn’t specify a location in the markup to store and retrieve the attribute value, so special HTML comments will be used instead. This is the default behavior if you omit an attribute source.

We need some way of changing the image category, which we can do via a select drop-down control. Update the edit function to the following:

Here is what it will look like:

Adding a block select drop down control

This is quite different from the previous static edit function, so let’s run through the changes.

First we’ve added a select drop-down control with several choices matching the image categories available on the PlaceIMG site.

PlaceIMG image categories

When the drop-down value changes, the setCategory function is called, which finds the currently selected category and then in turn calls the setAttributes function. This is a core Gutenberg function and updates an attribute value correctly. It’s recommended that you only update an attribute using this function.

Now, whenever a new category is selected, the attribute value updates and is passed back into the edit function, which updates the output message.

Image category updated

We have to complete one last step to get the random image to display. We need to create a simple component that will take in the current category and output an <img> tag with a random image obtained from the PlaceIMG site.

The request we need to make to PlaceIMG is of the form: https://placeimg.com/[width]/[height]/[category]

We’ll keep the width and height fixed for now, so we only have to add the current category onto the end of the request URL. For example, if the category was 'nature' then the full request URL would be: https://placeimg.com/320/220/nature.

Add a RandomImage component above registerBlockType():

To use it, just add it inside the edit function and remove the static output message. While we’re at it, do the same for the save function.

The full index.js file should now look like this:

Finally (for now), add the following styles to editor.scss to add a colored border around the image.

You’ll also need some styles in style.css.

Whenever the page is refreshed in the editor or on the front end, a new random image will be displayed. 

Finished editor view
Final front end view

If you’re seeing the same image displayed over and over, you can do a hard refresh to prevent the image being served from your browser cache.

Conclusion

In this tutorial we’ve covered quite a lot of ground. If you’ve made it all the way through then give yourself a well-deserved pat on the back! Gutenberg block development can be a lot of fun, but it’s definitely challenging to grasp every concept on first exposure.

Along the way, we’ve learned how to enqueue block scripts and styles and covered the registerBlockType() function in depth.

We followed this up by putting theory into practice and creating a custom block from scratch to display a random image from a specific category using the PlaceIMG web service.

In the next and last part of this tutorial series, we’ll add more features to our random image block via the settings panel in the block inspector.

If you’ve been following along with this tutorial and just want to experiment with the code without typing everything in, you’ll be able to download the final my-custom-block plugin in the next tutorial.

from Envato Tuts+ Code – WordPress https://ift.tt/2IVVh11

What Are the WordPress PHP Coding Standards?

What are the WordPress PHP coding standards? In this video from my course, Learn PHP for WordPress, you’ll learn all about the coding standards and why they’re important.

The WordPress PHP Coding Standards

//fast.wistia.com/assets/external/E-v1.js

 

What Are the WordPress PHP Coding Standards?

You can find the full WordPress PHP coding standards in the official WordPress handbook.

WordPress PHP coding standards

They’re essentially a set of best practices on how to use PHP in WordPress. We’ll go through some examples of what that means in practice in the rest of this tutorial.

As you can see, there are standards not only for PHP but also for accessibility and for the other languages that you’d use within WordPress. 

Why Are the PHP Coding Standards Important?

Why is it important that we all adhere to these standards? 

Well, there are two reasons. One of them is about quality of code, and the other is about consistency. 

So firstly, quality is important because it means that everybody coding in WordPress is creating code that will work, that will do its job, and that will be written in an up-to-date and high-quality fashion.

The second, which is about consistency, is equally important. It’s very likely that you’re going to be working with other people’s code from time to time. For example, if you’re creating a child theme, you might have to copy some of the code from the parent theme. And if you’re creating a plugin, that plugin could be a fork of an existing third-party plugin that you’re copying and adding extra functionality to. It’s really important that the way you code is consistent with the way that everybody else who codes PHP for WordPress writes code themselves. 

Examples of PHP Coding Standards for WordPress

So let’s take a look at some of the PHP coding standards. And I’m going to show you examples of these in some of the files in my theme.

Naming Conventions and Cases

Let’s start with naming conventions and cases. When you’re thinking about naming conventions, there are four things to think about:

  1. the functions within your theme or your plugin
  2. the files and the way that you name those
  3. any classes that you write
  4. any variables that you create

So let’s start with functions. Here’s the functions.php file in my theme as an example. 

the functionsphp file in my theme

You can see that I’ve got a function that I’ve defined called rachelmcc_register_widgets. That’s all written in lower case, and I’m using underscores between the words, which is how you should always write a function in WordPress.

As you’ll also see, I’ve used a prefix. That’s to ensure that this function doesn’t clash with any other functions that might be provided by my theme or by another plugin. So if I wrote a function that was just called register_widgets and one of my plugins also had a function called register_widgets, the two of them could clash. You might find that one of them overrides the other or that the plugin doesn’t work. 

So instead, I’m using a unique function that’s relevant to my theme. My theme is called rachelmccollin, so my functions have rachelmcc as a prefix. And it’s also important to use underscores for your functions and not to use hyphens.

You do use hyphens in two places. Firstly, you use hyphens when you’re defining CSS classes. So you can see that within my widgets, I’m defining CSS classes for my h3 element and also for the id of that widget area. And here, you use hyphens.

The other place that you use hyphens is in your file names. So this is front-page.php. 

the front-pagephp file

You should always use hyphens in your file names within your themes and your plugins; don’t use underscores. So here there is a call using locate_template. And loop-frontpage.php is a file, a template part that I’m calling, and you can see that that’s got a hyphen and not an underscore. 

On the other hand, my post type ID, which is a custom post type I’ve registered, uses an underscore: rmcc_blurb

Now you also might need to think about variables within your theme. Let’s look at loop-frontpage.php:

loop-frontpagephp file

Within this particular file, which is the one I was calling from that previous file, I’ve defined some variables, one called count and one called title. And you can see that I’m using lower case for both of those. 

The other place where you need to think about underscores and capitalization is when you’re using a class. Let’s go back to front-page.php:

the  front-pagephp file

And you can see here, I’m using the WP_Query class. So a class has a capital letter after the underscore, as well as at the beginning. So that’s where you use capitalization when you’re defining a class. It helps people working with your code instantly identify that it’s a class and not a function.

Using Single and Double Quotes

Now let’s have a look at how you would use single and double quotes in PHP for WordPress. 

You can use either single quotes or double quotes, depending on which works best for the specific code that you’re working with.

The reason that double quotes can sometimes be more helpful is that they make it easier to work with special characters. Here’s an example:

how to use single and double quotes in WordPress

Say you were writing a search template file, search.php. And within that, if nothing was found, you would put a paragraph that says, „I’m sorry, your search didn’t find anything. Why don’t you try again?“

I’ve put that within double quotes because the text contains apostrophes. Let me show you how that would work if we did it in single quotes. 

Example of single and double quotes

You need to put a backslash before the apostrophes in order for them to be output correctly within the HTML—otherwise, it’ll give you errors. Now I don’t know about you, but I’d rather just type it normally within double quotes than do all this within single quotes.

The other thing you need to remember is that if you need to put quotes within quotes, you either put single quotes within double quotes, or vice versa. It doesn’t matter which way around, but you can’t put single quotes within single quotes or double quotes within double quotes.

So here’s an example going back to my functions.php file. 

Example of single and double quotes in PHP

Within here I’ve got single quotes for the value of before_widget, and then within that, I’ve got double quotes for the ID and the class of that. I couldn’t use double quotes here and then put double quotes inside it, so that’s why I’m using single quotes there, because it’s better to use double quotes with your CSS. 

Indentation

Now, let’s look at indentation. And let’s continue looking at the functions.php file, which is quite a good example because I’ve indented a number of lines of code within it. 

You can see that the function name is on the left, and then within that the register_sidebar function is indented at one level. And the contents of that are indented again. 

So each time you’re putting content within braces or curly braces, everything inside that should be indented. And also for indentation, you should use line breaks. 

So let’s take a look at another file where there are single lines as well as double lines. 

Line breaks with a block of PHP

So here you can see I’ve got an if statement that’s got two lines of code within it. So I’ve put a line break above and below those two lines of code.

If there was only one line of code within that, I wouldn’t have to put those line spaces in—I would just put that straight inside my braces. 

Using spacing like this helps make it clear where your blocks of code are. And you can see also that indentation has been used. So there are multiple layers of indentation. 

The other thing you need to bear in mind is where you open and close your PHP tag and whether that is on the same line as your code or a different line. And that also depends on whether you’re coding a block of code or a single line.

Where you’ve got a block of code, you put your opening tag on one line and your closing tag on another line. That helps to make it obvious that it’s a block of PHP and that everything within those tags is PHP.

The other thing you have to make sure you do is use a full opening PHP tag. So don’t just use a question mark, as you might have done in some other systems that use PHP, because in WordPress you have to use the full PHP tag. 

If I wrote some PHP that was just on one line, I would put the PHP opening and closing tags on the same line.

PHP opening and closing tags on the same line

You can see that we’ve got some PHP that’s all in one line, and then after that I’ve got HTML. So the opening and closing tags go on the same line as my code. 

Conclusion

That’s an introduction to some of the elements of the WordPress PHP coding standards, and I’ve shown you some examples of them in my files and changed some as I’ve gone along to show you how things are done correctly. 

If you want to know more about the coding standards, there’s documentation on the WordPress website. And you can also check out this Envato Tuts+ series, which goes into all of the elements of the coding standards in detail.

Watch the Full Course

In the full course, Learn PHP for WordPress, you’ll learn all about PHP, the programming language that WordPress is built in.  

I’ll give you an overview of what PHP is and how it’s used for WordPress themes and plugins, with examples. You’ll go on to learn how to create a PHP file and use it to output HTML. Then you’ll learn to use functions, loops and if statements for coding custom WordPress themes and plugins.

You can take this course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 580,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

from Envato Tuts+ Code – WordPress https://ift.tt/2LmTlgd