Schlagwort-Archive: Tutorial

New Course: How to Use Custom Post Types in WordPress

Custom post types allow you to extend WordPress’s default post with data that is useful for your own website. Learn how to use them in our new short course, How to Use Custom Post Types in WordPress.

How to Use Custom Post Types in WordPress

What You’ll Learn

In this short course of just seven videos with a total viewing time of 39 minutes, Rachel McCollin will show you how to create your own custom post types and display them in single and archive pages in WordPress. 

You’ll learn how to code a plugin that creates a project category and how to display those projects on your main blog, mixed in with normal posts. You’ll also learn how to create a template file to render individual files and a template for displaying a project archive page. 

By the end of this course, you’ll feel confident using custom post types in your next WordPress project.

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 830,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

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

Advertisements

15 Best WordPress Audio Player and Video Player Plugins

There are so many creative ways to embed audio and video content in your website, once you step away from default players and explore custom plugin options.

Whether you are showcasing content that you created yourself—as a musician, podcaster, filmmaker, or YouTuber—or simply want to add music or video content to your website, you know that how you display your content is almost as important as the content itself. Do you want users to share and leave comments on your tracks? Would you like listeners to be able to buy songs while they enjoy your music? Are you looking for a player with live streaming capabilities? Just to name a few possibilities.

At CodeCanyon, there is a wide range of best selling WordPress audio and video player plugins. No matter what your vision for your audio or video content, there is a player plugin that will meet your needs. Keep reading to see some of the best WordPress audio and video plugins that CodeCanyon has to offer.

Best Selling WordPress Audio Players

1. ZoomSounds—WordPress Wave Audio Player with Playlist

ZoomSounds WordPress audio player demo

ZoomSounds is a retina-ready, fully responsive HTML5 WordPress audio player that supports self-hosted MP3, M4A, and WAV files, as well as MP3 Shoutcast radio stations. This plugin features nine editable CSS skins, so you can customize or simply choose a style that suits your brand. Curate how users experience your audio—this plugin has options for audio looping, user commenting, and playlist or single track downloads. Optimized for Apple and Android devices and built with search engine optimization in mind, this WordPress audio player plugin is compatible with all major browsers, so it will meet the needs of both you and your listeners.

User PickWard says:

“Our soundtrack site is performing beautifully with ZoomSounds. Very stable—both on desktop and on mobile—and have had zero end-user complaints. Really great plug-in, and I’ve tried a lot!”

2. MP3 Sticky Player WordPress Plugin

MP3 Sticky WordPress audio player demo

Create an uninterrupted audio playback experience for your website visitors with this WordPress audio player. Listeners can browse other websites while enjoying to your audio on a popup player that deploys in a separate window. Compatible with MP4 and YouTube videos, this mobile ready player runs on all major browsers. Features like HTTP live streaming, deep linking, share buttons, and Shoutcast and Icecast support create a complete WordPress media player that creates a dynamic AV experience for your audience.

User 5dportal says:

“This player plugin is the best MP3 player in the market, hands down.”

3. Responsive HTML5 Audio Player PRO WordPress Plugin

Responsive HTML5 WordPress audio player demo

This high performance WordPress audio player encourages listeners to interact with your content. With playlist search, lyrics integration, download, purchase, and social share capability, this WordPress audio plugin keeps listeners engaged. Integrate this player into your existing website design with fully customizable colour schemes. Mobile-compatible, responsive design ensures that your audio will reach your audience, every time.

User leonordl says:

“Great design and great, fast support! Definitely recommend it!“

4. Radio Player Shoutcast and Icecast WordPress Audio Plugin

Radio WordPress audio player demo

Stream radio content on your website with this WordPress audio plugin. Add a radio stream, and this plugin will automatically load the name, categories, current song, and artist photo of all MP3 audio streamed. Fully compatible with responsive websites, this plugin also allows you to disable responsive behaviour for integration into non-responsive sites, should you desire. With support for Shoutcast and Icecast and over 70 customization options, this is the only WordPress audio plugin you need for radio streaming.

User rfisher68 says:

“This product has been fantastic since the day I purchased it. The free radio players available on the net are nothing shy of a complete hassle. The customer service here is top notch. In fact, I purchased an additional player, that’s how impressed I was with the first one.”

5. tPlayer—WordPress Audio Player

tPlayer WordPress audio plugin demo

Create as many playlists as you want, each with an unlimited number of tracks, with this WordPress audio player. This plugin is a powerful and highly customizable audio player, with many unique front-end options—for example, you can let listeners enjoy an automatic “Top 10 songs of the week” playlist and consult song details and stats directly in the player, or add this player to any post or page as a widget. This WordPress audio plugin runs on all major browsers, is mobile-friendly, and can be installed in any WordPress theme.

User soulshakepower says:

“I found it really hard to find a decent audio player nowadays since it’s all about video. I’ve tested dozens of plugins but I’m glad I found tPlayer. It is trendy, has a lot of features, and most importantly it works great on all devices!”

6. Native HTML5 Radio Player WordPress Plugin

Native WordPress audio plugin demo

Weave cross platform radio streams into your website with this WordPress audio player. This plugin plays all MPEG and AAC audio streams using HTML5 live streaming technology. Mobile-ready for both iOS and Android, this fully responsive player features a streamlined design that works on all major browsers. Simple and straightforward to use, the audio player features “Now Playing” song information and displays album cover images with links to iTunes.

User danmason says:

“Stylish, simple to use, and very well designed player. Support was fast and helpful, too. This is an outstanding plugin worth every penny.”

7. Disk Audio Player for WordPress

WordPress audio plugin demo

This easy-to-use WordPress HTML5 audio player is customizable with multiple skins and unlimited colour options. Retina ready and mobile responsive, this audio plugin features keyboard control, external links to support purchases and downloads, track info, and playlists with an adjustable scrollbar. Configure your audio player easily with a drag-and-drop admin panel.

User TooCrazyMedia says:

“Really good player. Best support!”

8. WavePlayer—WordPress Audio Player With Waveform and Playlist

WavePlayer WordPress audio player demo

Host your own audio tracks and play them in this beautiful, modern WordPress audio player. This plugin’s interface is built around the waveform of the audio file that is playing, and it allows you to insert custom track information for your files. Ideal for music and podcast websites, this WordPress audio plugin is fully integrated with WooCommerce, and uses Font Awesome 5 for high quality icon design.

User herringla says:

“There are just too many good things about this plugin. Basically, if you’re using anything else to play your music files on your WordPress website you’re missing out!”

9. HTML5 Audio Player WordPress Plugin

HTML5 WordPress audio player screenshot

This mobile-compatible WordPress audio plugin can be used as a fully functional player, or to play background music on your WordPress site. This plugin features continuous playback and shuffle options, as well as the ability to automatically generate a playlist from a folder of .mp3 files. Insert multiple instances of this player into your website or a page and customize the design by changing the colour or hiding elements, to best complement your website.

User Paully says:

“The support I received regarding this plugin is fantastic. I would highly recommend any plugin from this developer. Thanks for your A-class service.”

Best Selling WordPress Video Players

1. WordPress Responsive YouTube Playlist Video Player

Responsive WordPress video player screenshot

Play YouTube content on your website using this fully responsive and intelligent resizing WordPress video plugin. Simply enter a YouTube playlist, channel, or single video ID as a source, and this plugin will run your video content smoothly on mobile and desktop devices. This WordPress video player has a fully-customizable CSS-built interface rather than the default YouTube player. With total control over play options, unlimited playlist length, and integrated social sharing features, this plugin is a full-service solution for your WordPress video player needs.

User Splash1 says:

“Great looking playlist, easy to use, and does exactly what I need. Great job!”

2. Elite Video Player—WordPress Plugin

Elite WordPress video player screenshot

This powerful WordPress video player supports the most popular video platforms and includes multiple advertising options. Truly versatile, you can play content from YouTube, Vimeo, self-hosted videos, Google drive, local videos, live streaming content, and more. This WordPress video plugin supports pre-, mid- and post-roll video and pop-up ads, so you have full control of the advertising potential of your content. Play videos from multiple sources in your playlists, track plays and advertising data using integrated Google Analytics, and expect seamless performance across platforms with this WordPress video player.

User davidmfraser says:

“Quite simply the best video player I have used in connection with WordPress, and I have tried several. Easy to set up and customize the player. Very simple and intuitive, even for those with not much of a tech background. Aesthetically, fantastic to look at. The support is very good, quick as well. Very happy—5 stars!”

3. Ultimate Video Player WordPress Plugin

Ultimate WordPress video player screenshot

Stream audio or video from a server, YouTube, or Vimeo with this WordPress video player. Features like responsive layouts and skins, multiple playlists, optional deep linking, and VR support enhance this video player’s functionality. This WordPress video plugin incorporates multiple video engines which allows it to work on mobile or desktop devices no matter which browser is used. This player includes advertising support and is integrated with both Google Analytics and Google AdSense, so you can make the most of your views.

User wollesen1 says:

“Elegant, seamless plugin with a lot of customizations available. I needed a responsive video player that would host local video, and also pause when clicking anywhere on the video, among other things. I’m very happy with this purchase.”

4. WordPress Vimeo YouTube Popup Plugin

Popup WordPress video plugin screenshot

Use this WordPress video player plugin to easily create popup videos on your website. Users can click any designated element on your site—image, link, or other elements—to play YouTube or Vimeo videos in a popup player. This WordPress video plugin includes shortcodes to make your job easy. This player is responsive to browser sizes, has a scrollspy so that your video is always visible in the browser, and supports autoplay, so you can be sure that your visitors will view your featured video content.

User wipeoutmedia says:

“Thank you for creating this awesome solution. I have been looking for something like this for a while now and am so happy to have found it. Five stars for quality!”

5. Video Player and Fullscreen Video Background

Fullscreen Video Background WordPress video plugin screenshot

Enhance your website with a full-screen video background using this WordPress video player. Responsive and mobile-friendly, this player supports YouTube, Vimeo and self-hosted video files, and can automatically pull video thumbnails, titles, and descriptions for YouTube content. Customize your player style and functionality with over 30 parameters, choose a fixed width or full width, or even add texture over your video images.

User sandasusin says:

“Great plugin and great (!!!) support.”

6. Facebook Live Video Auto Embed for WordPress

Facebook Live WordPress video plugin screenshot

Embed Facebook live streams to your WordPress site with this WordPress video plugin. Compliant with new Facebook data policies, this plugin detects if your Facebook account, page, or group is currently live and automatically embeds the video stream on your site. This video plugin features many customization options, including custom messages for website visitors during live streams and when offline. This WordPress video player is responsive out of the box, which allows to you easily embed your Facebook video content on your website for an effortless viewing experience.

User rmangram says:

“The support is awesome, especially when you have to keep your website accurate and up-to-date. They have been responsive, and the app works great and easy.”

Conclusion

Have these plugins given you some ideas for an audio or video player to enhance your website? I hope so. From popups to playlists, livestreams to fullscreen, and everything in between, these plugins have the potential to transform your website and keep visitors engaged. If you would like to explore more audio and video plugins, visit CodeCanyon to see more options.

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

Create a CSS Grid Image Gallery (With Blur Effect and Interaction Media Queries)

In this tutorial we’re going to take a bunch of ordinary thumbnail links and turn them into a responsive CSS grid gallery with a blurred hover effect. We’ll also use a great CSS trick to make sure touch screen users don’t miss out!

Here’s what we’ll be creating:

https://codepen.io/tutsplus/embed/rQrVBg/?height=500&theme-id=12451&default-tab=result&embed-version=2

A Little Background

Recently, Rachel McCollin wrote a tutorial explaining how to add a gallery of thumbnail links in WordPress themes. 

The links act as navigation for child pages of whichever page the user is on (or whichever page you specify) and the resultant plugin outputs something a bit like this:

wordpress thumbnail links to child pages
Grab the plugin and theme files from the repo on Github

Using the markup generated by Rachel’s plugin, we’re going to do the following:

  • Arrange the thumbnails using CSS Grid, giving us a responsive gallery.
  • Create a hover effect using CSS filters and transitions.
  • Use a nifty CSS media query to make sure touch screen users can still see each thumbnail title, even without hovering.

1. Change the Markup (a Bit)

Let’s a have a quick look at the markup generated by Rachel’s code. When cleaned up it looks effectively like this:

We have a parent <div>, which holds an <h2> and a few <article> elements. When we’re using CSS Grid we first define a grid container. In this case we could use the parent <div>, but that would make each direct child–including the <h2>–a grid item, so we need to change things a little.

We’ll wrap all the <article> elements in another <div> (feel free to use whatever element you feel most suitable) which we’ll imaginatively give a class of grid-container. Use this starter pen as a basis.

2. Responsive CSS Grid, in Three Lines

With just a few rules we can turn our thumbnails into a grid:

The easy lines here are the display: grid; (which turns all direct children into grid items and lays them out) and the grid-gap: 1em; (which defines our gutters). 

The slight complexity comes from the value we’ve given to the grid-template-columns property, which defines our columns. You might normally expect to see something like repeat(3, 200px) which would give us three columns of 200px. In this case we’ve used the auto-fill keyword for repeat(), and then some values. This gives us as many columns with a minimum of 300px and maximum of 1fr as will fit in the grid container.

Resize your browser window and see how it behaves!

One last detail you’ll need to add:

This will make sure the images fill their containers properly (particularly necessary for use with Rachel’s demo, as we need to overwrite the inline width and height properties WordPress outputs).

3. Hover Effect

We’re going to use the titles as overlays for the thumbnails, revealing them on hover. We’ll also give the hovered images a red effect, and a slight blur to help readability of the overlaid text. 

Overlay the Title

To overlay the title we need to position it, so we’ll begin by making the article position: relative; and the title position: absolute;. We’ll also give it a red background and make it fill the available space:

Good start! 

thumbs step 1

There are one or two things to improve already, including that extra space at the bottom (the title is slightly larger than the thumbnail). This can be solved by removing any line-height on the image’s container:

Style the Title

Some typographic styles will improve the look of our title, and three lines of flexbox magic will align it centrally for us:

Much better:

Hide the Title

Now let’s hide the title by removing its opacity so that we can only see it on hover. A couple more rules underneath the ones we’ve already added to our .location-title should do it:

Here we also set a transition rule so that when we do bring the opacity back it will happen gradually (over the course of 0.5 seconds). Let’s bring it back now:

Great! Now our title appears again on hover:

title back on hover

Blurred Lines

We’ve created a great-looking hover effect already, but let’s take things a step further shall we? Let’s add a blur filter to the image too. We’ll begin by setting the blur filter on the normal state, in order to give us something to transition from. Then we’ll blur things by 2px for the hover state (make this number as extreme as you wish, but I think 2px gives us a great visual):

Here’s what that gives us:

A couple of things to note:

  1. The title has disappeared because the browser is now rendering the blurred graphic over the top of it.
  2. The blurred effect looks good, but it gives us a blurred edge too (we can do better than that).

Fixing the hidden title is as simple as adding z-index: 1; to the .location-title.

Fixing the blurred edge is a little more involved. To begin with we scale the image to make it a bit larger, then we set overflow: hidden; on the image container (.location-listing) so that when the larger image blurs its edges are effectively cropped. Here are the finished properties for the two elements in question:

The transform: scale(1.1); rule scales our image in all directions to 1.1 (where 1.0 would keep things exactly the same size). Here’s the much neater result:

no more blurred lines

4. The Problem With Touch Screens

So there we have it! A great-looking image grid with a blurred hover effect on each thumbnail. The only thing is that the titles are hidden to anyone who can’t hover over the images (a good number of tablets and smartphones don’t emulate hover with a prolonged “press”) which isn’t very accessible.

Fortunately, CSS has some very useful interaction media queries which can help us out (and they enjoy fairly decent browser support too). These queries will detect a browser’s input mechanism–the pointing device quality, the ability to hover, and some other special definitions–so we can fairly accurately determine if our thumbnails are being viewed on a touch screen device.

Take this media query for example (it does exactly what you might expect):

Within these curly braces we’d put any styles we want to apply to a browser which can’t handle :hover.  Let’s do that–we’ll state that for devices where hover is either impossible, or at least inconvenient, the thumbnail image will always be blurred and the title will always be visible:

Take a look:

Note: As mentioned, support for this is pretty reasonable, but discussions about the implementation of interaction media queries are still ongoing. There’s a good chance this spec will change, or have parts removed.

Conclusion

And we’re done! Thanks for following along, I hope you’ve learned one or two things and enjoyed playing around with CSS (who doesn’t enjoy that?). Here’s one more look at the final demo–enjoy adding it to the theme files created by Rachel in part one!

https://codepen.io/tutsplus/embed/rQrVBg/?height=500&theme-id=12451&default-tab=result&embed-version=2

Further Reading

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

Create Style Variations for WordPress Gutenberg Blocks: Part 1

Now is an exciting time for WordPress developers with the official release of version 5.0 just around the corner. This will mark the debut of the brand new editor: code-named Gutenberg. If you’ve have anything to do with WordPress on a regular basis, whether as a developer or as a user, then you’ll probably understand why this is big news.

Not everyone’s looking forward to the new release though, as it does bring a very different editing experience to WordPress. There is a bit of uncertainty about how this will affect the broader WordPress ecosystem. However, the new editor the potential to revolutionize how you create content for WordPress sites. And even though it may meet with initial resistance when it hits users en masse, I think it could ultimately give a much more tangible connection with your content in a way that isn’t possible with the classic TinyMCE editor.

You can try out the new editor ahead of the planned WordPress 5.0 release by installing the Gutenberg plugin from the WordPress plugin repository. If you’ve not had chance to try it out yet then I’d strongly recommend you do so, to get a preview of the future editing experience in WordPress!

Creating content in the new editor is entirely block based. Every piece of content you add to the editor is a block. This includes all your favorite elements such as sliders, paragraphs, buttons, lists, images, testimonials, and so on. Once added to the editor you can configure settings that control the block’s appearance and behavior. These can be edited either on the block itself or via the inspector panel (located to the right of the editor screen). Block settings are sometimes duplicated in both locations but this varies from block to block.

Almost all blocks though have an option in the inspector panel to manually add one or more CSS class names to allow further block customization. This can be very useful if you wish to override styles for a core block or 3rd party block.

Additional CSS Class text field

While this works fine it would be beneficial to extend this behavior and allow adding block customization options via a set of predefined style choices. This is exactly what block style variations give us, and we’ll be focusing on them exclusively throughout this tutorial.

Prerequisites

We’ll also be taking a look at how to add block style variations to your own blocks as well as how to extend existing blocks, so in order to follow along you’ll ideally need to be familiar with the basics of WordPress plugin development and how blocks are created.

Don’t panic though, if you need a crash course then check out my four-part tutorial on creating custom blocks. It covers pretty much everything that you need to know for this tutorial—apart from block style variations, the focus of this particular tutorial!

Also, if you want to follow along with the code and try it out yourself then you’ll need a local development server to run WordPress on(eg. WAMP, MAMP or the like), and a code editor.

Background

The block style variations API was introduced to the Gutenberg project in v3.2 of the plugin and allows you to apply alternative block styles directly via the editor interface.

To achieve the same result prior to block style variations you had to manually enter custom CSS classes in the Additional CSS Class text field in the block inspector panel, located under the Advanced section.

If you’re interested in the original proposal for block style variations then you can read up on the full details in the pull request in the official Gutenberg repo.

Any style variations defined for a block can be accessed directly in the block toolbar. Select the block then click the top left icon on the toolbar to display the Block Styles pane.

Block Styles pane

Remember earlier when I said some blocks settings can be accessed directly on the block and in the inspector panel? Well this is exactly the case for block style variations! Make sure the block is selected and take a look in the inspector panel.

Block style variations in the block inspector

This is for convenience and you can choose style variations from the location which suits you best. For example on larger screens you may opt to change block styles via the inspector panel as it enables you to swap between styles via a single mouse click. But when on smaller devices you might want to hide the inspector panel and just change styles via the block toolbar instead.

Core Block Support

A few core blocks currently support block style variations including:

  • Button
  • Pull Quote
  • Quote
  • Separator
  • Table

I’m sure support will be added for other core blocks in the future as this feature becomes more widely adopted. It’s so flexible I’m sure a lot of users will come to expect a selection of predefined style options for most blocks. Once you’ve used block style variations it’s easy to see why this could be the case.

You can add block style variations to your own blocks too of course. We’ll explore the specific implementation details next.

Implementing Block Style Variations

There are two methods for implementing custom block style variations. If you have access to the block definition then you can specify block style variations directly inside the registerBlockType() function via the style property.

For example, this is what the button core block styles property definition looks like.

Here, three new block style variations are registered. Notice that the Rounded style is also set as the default.

However, if you don’t have access to the block source code then there’s another approach you can take. In Gutenberg 3.4 two new functions were added to register and unregister block style variations from outside of the block definition.

To register a custom block style variation use the registerBlockStyle() function as follows:

This adds a new block style variation named custom-button-style to the core button block. Now when a button block is inserted into the editor you’ll see the new block style variation available.

Custom block style variation available

As soon as it’s selected the block style variation adds an is-style-custom-button-style CSS class to the Additional CSS Class text field in the block inspector panel.

CSS class added to Additional CSS Class text field

This is turn triggers an update to the block output and the class is added to the HTML markup.

Block markup showing the style variation class added

You might be wondering where you add the registerBlockStyle() function in your own code. Don’t worry we’ll be covering a full example in the next post and you’ll be able to download the final plugin code so you can test it out yourself.

A Small Gotcha!

When you first insert a block that supports block style variations it’s interesting to note that no CSS class is actually added to the block markup until you specifically click on a block style variation, even though one is shown as being selected by default.

Try it out for yourself.

Insert a new button block into the editor and open up the block style variation options. You should see the Rounded option selected by default. If you open up the Advanced section in the block inspector no CSS class has been added to the text field yet. And thus no CSS class will be inserted into the blocks markup. Check out the HTML outputted for the button block in the editor to confirm for yourself.

Now go back to the block style variation settings for your button block and click the default option (the one that’s selected) or any of the other block style options. You’ll immediately see the CSS class is added to the Additional CSS Class text field and the blocks wrapper markup. Any custom CSS rules that have been defined for the custom class will also be applied as soon as the block style variation has been selected.

This behavior a little confusing on first exposure as intuitively you’d expect the CSS class to be added automatically for the block style variation that’s selected by default.

Conclusion

We’ve learned what block style variations are and why they are a useful addition to the block editing experience. A basic implementation of a block style variation was demonstrated.

In the next post we’ll go through fully working examples of how to register your own block styles and hook up the CSS via a plugin, and also via a child theme.

We’ll also take a look at how to unregister block styles and how to set which style variation is selected by default when a block is first inserted into the editor.

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

UberMenu and 7 Other Best Mega Menu Plugins

Building a streamlined navigation panel for your website is the logical next step after creating your content. Beautiful and functional—these are the gold standards when it comes to your navigation menu.

If your site manages a lot of content, many products, or complex services, chances are you need a Mega Menu—in other words, a drop down menu that is triggered by hovering over a link or defined area. These menus usually contain all the navigation options of your website in one easy-to-use panel.

At CodeCanyon, there are many great options that can help you build a Mega Menu that meets the needs of both you and your website visitors. Read on to see some of the best selling options for WordPress Mega Menus, and find one that works for you.

Best Selling WordPress Menu Menu Plugin

UberMenu—WordPress Mega Menu Plugin

UberMenu Mega Menu

Develop customized Mega Menus for your WordPress site quickly with UberMenu. One of CodeCanyon’s best selling WordPress Mega Menu options, this plugin works right out the box to build fully responsive, touch-enabled menus that perform consistently across platforms. User-friendly, with full WordPress 3 Menu Management System integration, you can quickly build advanced submenu layouts in a system that you are already comfortable using.

This plugin is fully customizable, so you can build a Mega Menu that works perfectly with your website. Generate menu content from posts with dynamic items. Customize colours, fonts, and design elements with simplified CSS selectors. Choose from multiple layouts, configure click and hover behaviour, show or hide content for different screen sizes—this plugin has the flexibility you need when building a Mega Menu that captures the depth and breadth of your WordPress site.

UberMenu Mega Menu demo

User alexis_delhi says:

“Amazing Customer Support! The plugin itself is a visual gem and I will most definitely use it on forthcoming projects.”

More Great WordPress Menu Plugins

Mega Main Menu—WordPress Menu Plugin

Mega Main Menu demo

Build a dynamic WordPress dropdown menu with this highly customizable plugin. The Mega Main Menu plugin allows you to place many different object types in the dropdown menu, so get creative with links, text, images, widgets, and shortcodes. This plugin has more than 10 fully responsive dropdown menu combinations to choose from. With unlimited colour variations, more than 600 Google fonts, 1600 vector items, and RTL support, this WordPress menu plugin is able to blend perfectly with existing visual design elements to enhance your site.

User rodrigocy says:

“Mega Main Menu runs perfectly in my WordPress page. It is very intuitive, easy to configure, and visually fantastic. And the customer service is impressive. 100% satisfied. 100% recommendable.”

Superfly Menu—Responsive WordPress Menu Plugin

Superfly Menu demo

Superfly is a responsive WordPress menu plugin that will help you create a vertical menu for your site. This plugin generates a space-efficient vertical mega menu that can be used as a standalone navigation tool, or as a compliment to your main menu. Choose between push, sliding or static navigation, and customize with an icon toolbar or fullscreen menu. The optional mouseover interface removes an unnecessary click for your users, and reveals your menu with an on-trend flow visual that suits all modern sites. This plugin works beautifully on both mobile and desktop sites, and behaviour options like push content and smooth scrolling for anchored elements enhance the versatility of this plugin.

User castorpollox_285 says:

“A great plugin with highly customizable settings. And the support is great, too. They answered all my questions, very detailed and helpful. I recommend this plugin very much!”

Hero Menu—Responsive WordPress Mega Menu Plugin

Hero Menu demo

Be your own hero! Whether you are a WordPress expert or a complete beginner, the Hero Menu plugin is so easy to use that you will have your menu up and running within minutes. From a complex, feature-rich Mega Menu, to a simple, streamlined dropdown menu, this plugin will meet your needs. Fully responsive with touch support, you can style with custom CSS or use one of the 60 colour presets. With the drag-and-drop menu layout builder, it only takes three steps to build your Mega Menu. Save time and enjoy the creative process of your build—and the final results!

User AlexanderMCrow says:

“Rich features and fantastic documentation, simple for those of us who aren’t too confident with coding to build a beautiful menu. Also, I had an issue with integration following a major update to my theme, and the customer support was marvellous—solving my problem very quickly and professionally—highly recommended.”

TapTap—A Super Customizable WordPress Mobile Menu

TapTap Menu demo

If you are looking for total creative control, TapTap is the Mega Menu plugin for you. With this WordPress menu plugin, you can build a mobile-first, off-canvas menu versatile enough to be used on any site. Mix and match fonts, icons, letter spacing, colours, buttons and logo positions, backgrounds, alignments, and more, to create a menu that is unique to your site. TapTap lets you review your changes in real time, which makes it so easy to customize your WordPress menu. With this plugin, you can forget predetermined layouts and build the exact Mega Menu you want.

User flowonfiction says:

“Hands down the most elegant and infinitely customizable mobile menu on the market. Beautiful design, intuitive features, and lightning-fast customer support. Can’t imagine building a site without it.”

WP Mega Menu Pro—Responsive WordPress Menu Plugin

WP Mega Menu Pro demo
Choose from fourteen beautifully designed Mega Menu skins for your WordPress site, or use customization options to create your own unique template. The WP Mega Menu Pro plugin supports both horizontal and vertical menus, along with flyouts and sub-menus. Use the drag-and-drop visual builder to choose from built-in menu icons, colours, and widgets, or take advantage of unlimited styling potential and customize with CSS. This plugin is fully responsive, touch friendly, and tested on all major browsers to ensure an enjoyable and functional experience for website visitors.

User Ohgugun says:

“Great quality plugin with a very diverse set of components and options. Really well designed. And the support is great, and fast!”

WP Floating Menu Pro Plugin

WP Floating Menu demo

Enhance your WordPress site’s usability with a one-page scrolling navigator and other sticky navigation menus available from the Floating Menu plugin. With 13 elegant template layouts and an unlimited number of custom templates, you can build according to the needs of your site. Use the easy menu builder to create mobile ready mega menus by selecting from a wide range of editable components such as background and hover colour, icon sizes, typography, and more. This plugin will allow you to quickly add one-page scrolling to your WordPress theme—just define the sections on your website and create a navigation menu in minutes.

User shawnrosvald says:

“Very flexible plugin with plenty of options and terrific customer support.”

Touchy—WordPress Mobile Menu Plugin

Touchy Menu demo

Touchy is a quick, reactive, and comfortable-to-use menu plugin that is designed for smartphones and works well on desktop sites, too. The strength of this mega menu plugin is in its customizability. With just a few clicks, you can change the colours of elements, alter positions, hide buttons, or change transparencies. You can use unstyled widget locations to add call-to-action behaviour to your menu, embed content, insert shortcodes, or virtually anything else you might need—the default appearance is just one of endless options. With easy setup and customization with WordPress Live Customizer integration, Touchy is a complete mobile navigation and header solution for any WordPress theme.

User AlexT-WebDesign says:

“Amazing plugin, very flexible. A good move in modern UI design. Super fast, great support. Will be looking at more of your plugins.”

Conclusion

As you can see, there are many options when it comes to WordPress Mega Menu plugins. If you haven’t already done so, be sure to check out CodeCanyon for more inspiration. From beginners to expert coders, and no matter what style you are prefer, there is a Mega Menu plugin that will improve and enhance the navigation of your WordPress site.

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

Displaying the Date and Time in the WordPress Loop

Adding the date and time to the WordPress Loop seems like a simple enough task, right?

Well, yes. It can be a case of coding a simple template tag and letting WordPress do the work for you. But sometimes you can run into problems along the way.

In this quick tip, I’ll show you the different functions WordPress gives you for displaying the date and time, and tell you which ones to use if you run into snags.

The Available Template Tags

WordPress gives you four functions to output the date and/or time. These are:

  • the_date(). By default it will echo the date of the post in the format F j, Y, so if the post was published on 20 November 2018, it would echo November 20, 2018.
  • get_the_date() – this fetches the date and doesn’t echo it out. To echo it, you’d use echo get_the_date() which gives you the same result as the_date(). It’s useful if you’re already using echo in your code. It can also help you get round the problem of dates not being displayed, as you’ll see shortly.
  • the_time() and get_the_time() – these fetch the time by default, but if you specify date formatting, you can also include the date. You could even this just to output the date if you configured the formatting to do so, but it would more sense to use the_date() or echo get_the_date().

Formatting the Date

Each function has a default format, which you can override if you need to. To do this, you’ll need to use standard PHP date and time formatting.

Here are some examples, all for a post published on 20 November 2018.

  • the_date() would output November 20, 2018 by default.
  • echo get_the_date( l, S M Y ) would output Tuesday, 20th Nov 2018.
  • the_time( 'g:i a' ) would output 2:03 pm.
  • echo get_the_time( 'G:i' ) would output 14:03.
  • the_time( 'g:i a, D, j F y' ) would output 2:03pm, Tues, 20 November 18.

Troubleshooting Dates in the Loop: Missing Dates in an Archive Page

If your’e using the_date() to output dates on an archive page, and you find that the date isn’t being displayed with some posts, that’s because the_date() doesn’t repeat the date for subsequent posts published on the same day as a first.

Sometimes you might want to keep it like this, if you don’t want to repeat the date for every post published that day.

But if you want to ensure that all posts have their date output with the title and any other content you’re outputting, you’ll need to use another function. You can use any of the other three functions above.

The simplest option is to replace the_date() with echo get_the_date(). If you wanted to add the time, either the_time() or echo get_the_time() will work.

Note: If you’re puzzled by the fact that the_date() throws up this problem, but the_time() doesn’t, it’s because posts published on the same date weren’t published at the same time. You’d have to go to a lot of effort, either scheduling posts, editing the publication times, or co-ordinating efforts between two bloggers, for that to happen!

I had this problem in the front page template of a theme I coded for a client. In this template were a number of loops, all leading to different content types on the site and all coded using WP_Query. The problem wasn’t apparent until the day they added two posts, (not something they normally did). They were puzzled as to why the second post’s date didn’t appear on the home page, and kept editing it, refreshing it and republishing it until they gave up and asked me.

Here’s the original code:

I edited the one function so it read like this:

In the line beginning li class="home newsletter", I replaced the_date( 'j, F' ) with echo get_the_date( 'j, F' ). It fixed the problem.

So if you ever find that dates aren’t showing up in your archives, this might be the solution.

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

Target CSS for Specific Content With WordPress Template Tags

Final product image
What You’ll Be Creating

Learning WordPress development isn’t just about learning to code PHP.

You’ll also need some HTML and CSS skills if the sites, themes and/or plugins you create are going to work well.

In this tutorial, I’ll show you an incredibly useful feature of WordPress that mixes PHP with some simple CSS. It’s an easy-to-use but powerful technique which will give you more control over the way your content is displayed.

The feature I’m talking about is the body_class(), the_ID(), and post_class() template tags. If you add these to your theme template files (or to your loop files) in the correct place, they will generate CSS classes that you can then use to style your content with laser-like precision.

In this tutorial, I’ll show you how and where to add these to your theme, and how to then write CSS styling that targets the classes and IDs generated.

Adding the body_class() Tag to Your Theme

The first tag is body_class(). As you might guess, this applies to the body element.

In your theme’s header.php file, find the line that opens your body element:

To add the template tag, edit it so it reads like this:

Save the file and close it. Now open a site using your theme and take a look at the underlying code of your pages.

Here are a few examples of the code generated in my demo site.

First, the home page:

That tells us a few things about the page:

  • It’s the home page.
  • It’s using a page template.
  • It’s a full-width page.
  • It’s a page (as against a post or a custom post type).
  • Its ID is 7.

That’s quite a lot we now know about the page. Now let’s take a look at a category archive:

This tells us that we’re in an archive, that it’s a category archive, and more specifically that it’s the category archive for the ‚basics‘ category with the ID of 154.

You might be wondering why all of those classes are needed: why have an archive class as well as a category class, for example? The reason is so that you can set your CSS styling to be as targeted as you need. So if you want to style all archive pages, you’d target the archive class. If you wanted to target all category archives, you’d target the category class, and if you wanted to target this category in particular, you’d use its slug or ID.

Finally, let’s take a look at a single blog post:

Now we’re getting even more information:

  • It’s using the default post template.
  • It’s a single post of the post type post.
  • Its ID is 3522.
  • It’s using the standard format template.

Once again, you could use any of those to target at whatever level you like: single posts of any post type (including pages and custom post types), single posts of the post post type, posts using a given format, or even this one specific post.

Later in this tutorial, I’ll demonstrate how to add styling to target these classes. But first, let’s look at how you can add another template tag that’s used for styling.

Adding the post_class and the_ID Template Tags to Your Theme

As well as adding classes to the entire page, you can also add a class to each post within the page. In a single post or page, this would add just one set of classes, but in an archive page, you’d generate different classes for each post in the archive.

You add this code in the loop, when opening the article element for each post.

The code without the template tags is this:

But when you add the template tags, it looks like this:

There are two template tags here:

  • The the_ID() tag adds the post ID as a CSS ID, meaning it will be unique.
  • The post_class() tag adds a list of classes depending on the properties of the post, in a similar way to body_class().

Let’s take a look at the code they generate.

First, in the homepage:

This gives us:

  • An ID of post-7, using the post ID.
  • A similar class of post-7.
  • A class of page, telling us this is a page (not a post).
  • type-page tells us this is the ‚page‘ post type.
  • status-publish tells us this page has been published.
  • has-post-thumbnail tells us this page has a thumbnail (or featured image)—you can use this to style posts with and without them differently so the featured images fit into the layout.
  • hentry is a class that’s designed to help styling in RSS feeds.

That’s a lot of classes you could potentially target!

Now let’s take a look at a post in the archive page from earlier:

Whoah! There’s a lot to take in there. 

I’m not going to go through the full list in detail, but to summarize, you’ve got classes relating to the post ID, the post type, its status, category, post thumbnail, the categories it’s in, and the tags it’s been given.

Finally, a single post:

This is very similar to the post in the archive page, which means that if you want to target single posts, you don’t use these classes, but instead you use the single class generated by body_class.

Using the Generated Styles in Your Stylesheet

Once you know what the generated styles and classes are, you can start to use them to style your content.

A common example is to style posts from different categories differently.

Here’s the blog page in my demo site:

A blog page with blue styling for titles and black for content

You may have spotted from the navigation menu at the top that I’ve used different colors for each of the main categories. In each category archive page, I achieve this by targeting the relevant category archive using the classes generated by the body_class() template tag.

Here’s the CSS for the basics category:

This makes the headings and borders a shade of cyan in the category archive page:

I’ve also added styling to the category description, giving that a cyan background and white text:

The reason I’ve used styling for the .archive-meta class for the text and layout is that I want all the category archives to have the same styling for that. It’s only for .category-basics .archive-meta that I’m adding the background color.

Note that in both cases, I’m targeting the classes output by the body_class() tag, as I want to style all posts in the category archive.

But what if I wanted to style posts in the main blog by category? I’d do this by targeting the classes generated by the post_class() tag.

So to add cyan styling to posts in the main blog page from the basics category, I’d add this styling:

This targets two classes generated by our template tags:

  • the blog class added to the body element by the body_class() tag
  • the category-basics class added to the article element by the post_class() tag

After adding that, the blog page looks like this:

the blog page with cyan styling added to a post from the basics category

I could then go further and add color styling by category to every post in the blog. In this case, I won’t do that as many of the posts are in multiple categories. But if your site has posts in clearly delineated categories, targeting the category classes like this can help give each category in your site a different style.

WordPress Template Tags Combined With CSS Can Be Very Powerful

Now you know how to add the body_class(), post_class(), and the_ID() template tags to your theme, to generate classes and IDs in your output pages, archives, and posts.

You can use this in many ways to target styling on specific post types, categories, formats, or even on individual posts.

Try thinking of ways you can use this to add an extra dimension to the design of your site.

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