Category Archives: EnvatoTutsCode

How to Add a Free WordPress Music Player to Your Site

Any website which lets users discover, buy, share, or download music or other sound effects should always have an audio player. Every user would like to preview the audio or music to determine if they want to purchase or share it or not. Giving users the option to play this audio from the webpage itself, without the need to download anything, will result in a better user experience.

Luckily, WordPress offers both free and premium plugins to add audio players to any webpage. Most of the free plugins will do the job for you, but only a few of them allow you to adapt the look of the player to the overall design of the website.

In this tutorial, you will learn about a completely free-to-use plugin called Audio Album that will allow you to embed audio files in a webpage and design your own music player interface with full control over its appearance.

WordPress Adding a Music Player to Your WordPress Site Kyle Sloka-Frey

  • WordPress
    How to Add the Stellar Video Player to Your WordPress Site
    Ashraff Hathibelagal

  • WordPress
    15 Best WordPress Audio Player and Video Player Plugins
    Jane Baker

  • Overview of Audio Album

    This plugin is basically meant to group different audio files together. For example, let’s say you have ten different songs from a single artist. Using this plugin, you could group them all together under a single heading as an album. Consistent styling could then be applied to the whole album in order to make it stand out. You can use the plugin to add multiple albums on the same page.

    Here are some of its features:

    1. The plugin is fully responsive. By default, it will cover the full width of the enclosing element.
    2. You can use custom fonts for the music player. By default, the plugin will inherit the fonts from the theme itself, but you can also specify other fonts.
    3. The plugin is easy to customize and allows you to change the color of the album, the player, the text, and the time and volume bars.

    The plugin is also very easy to use and set up. Now, let’s get started and create a music player!

    Creating the Music Player

    The plugin offers two shortcodes: [audioalbum] and [audiotrack]. Both of them are required to create the player.

    The [audioalbum] shortcode creates the header of the album. You can use the title, detail and date parameters inside it to provide relevant information about the album or the music list you are creating.

    The title will appear in big letters, and the detail or date will be shown below it. Here is an example to show how you can use this shortcode.

    [audioalbum title="Stay Motivated" detail="Upbeat music by different artists" date="May 2019"]

    The [audiotrack] shortcode also has a couple of parameters to allow you to specify the audio source and properties like whether it should be played in a loop, autoplayed, or preloaded. The title and songwriter attributes can be used to provide information about the song title and its creator. Here are some examples:

    [audiotrack title="Inspiration" songwriter="Rafael Krux" mp3="path/to/music/inspiration.mp3"]
    
    [audiotrack title="Funshine" songwriter="Kevin MacLeod" mp3="path/to/music/funshine.mp3"]
    
    [audiotrack title="Pickled Pink" songwriter="Kevin MacLeod" mp3="path/to/music/pickled_pink.mp3"]

    Make sure that you specify the correct source for the song. Just these four lines will create a music player on your webpage that looks like the image below.

    Audio Album Default Player

    You could add the attributes autoplay="true" and loop="true" to one of these songs, and it would keep playing endlessly, without the user ever pressing the play button.

    Customizing the Music Player

    There are two different ways to customize the appearance of the music player that we just created.

    The easiest way would be to simply go to Appearance > Customize > Audio Album. There, you will be able to change the album background, the player background, and the color of all the text and buttons.

    Audio Album Customization Page

    If you want to make other changes to the appearance of the music player,
    you will have to write your own CSS to replace or override the
    styling provided by the plugin. You can remove the CSS applied by the
    plugin by checking the Manual CSS checkbox at the bottom.

    Now, you can apply your own CSS to the player and customize its appearance exactly how you want. Instead of starting from scratch, though, it might be better if you simply take the CSS applied by the plugin as a starting point and put it into your own stylesheet so that you can just make changes where necessary instead of rewriting the whole thing.

    I created the following theme for the Audio Album music player by overwriting some CSS rules in the plugin stylesheet.

    Audio Album CSS Customization

    Here are the CSS rules that I changed in order to get the desired look for my music player:

    h2.audioalbum {
            font-family: 'passion One';
    	font-size: 3rem;
    	background: black;
    	border-top: 10px solid red;
    }
    
    p.audioalbum {
    	font-family: 'Exo';
    	font-weight: 600;
    	font-size: 1.25rem;
    	text-transform: uppercase;
    	background: linear-gradient(70deg, red 70%, black 70%);
    	border-bottom: 5px solid black;
    	padding: 10px 10px 5px 10px;
    }
    
    .track .songtitle::before {
    	box-sizing: border-box;
    	content: counter(track);
    	counter-increment: track;
    	display: inline-block;
    	width: 40px;
    	background: black;
    	position: relative;
    	top: 10px;
    	left: 10px;
    	height: 40px;
    	line-height: 1;
    	text-align: center;
    	border: 4px solid white;
    	padding-top: 5px;
    	font-weight: bold;
    	font-family: 'Passion One';
    	font-size: 1.5rem;
    	margin-right: 20px;
    }
    
    .track .songtitle {
    	clear: right;
    	display: block;
    	font-size: 1.5rem;
    	padding: 10px 0 0 0;
    	font-family: 'Exo';
    }
    
    .track .songwriter {
    	color: #fff;
    	display: block;
    	font-size: 12px;
    	line-height: 1;
    	opacity: 1;
    	padding-left: 60px;
    }
    
    .track .wp-audio-shortcode.mejs-audio .mejs-inner>.mejs-controls,
    .track .audiobutton a {
    	background: black;
    }
    
    .track .mejs-controls .mejs-time-rail .mejs-time-total,
    .track .mejs-time-rail .mejs-time-total .mejs-time-loaded,
    .track .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    	background: orange;
    	border-radius: 10px;
    }
    
    .track .mejs-time-rail .mejs-time-total .mejs-time-current,
    .track .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    	background: red;
    	border-bottom: 5px solid white;
    	border-radius: 10px;
    }

    read more

    New Course: Build an App With GraphQL, Laravel, and Vue

    If you want to learn about a useful new web API that offers a more dynamic and robust API for fetching and submitting data, try our new course, Build an App With GraphQL, Laravel, and Vue.

    What You’ll Learn

    Join Jeremy McPeak in this course as he teaches you how to create GraphQL APIs with PHP and consume them with JavaScript. You’ll learn how to create a GraphQL server for your Eloquent data with minimum boilerplate, and then you’ll learn how to consume the GraphQL API from Vue.js. 

    GraphQL app to be built in the course

    On the front end, you’ll learn how to query GraphQL without any special client libraries as you understand how all the requests and responses work. Along the way, you’ll build a complete single-page web app with this cutting-edge API technology. 

    read more

    Create a JavaScript Contact Form With the Smart Forms Framework

    In our earlier posts, we listed some free plugins and tools that you can use to create your own forms. One major downside to using free tools to create forms is that the end product might not look as professional and polished as you expect. Similarly, using free libraries to code your own forms might not be possible for people who don’t have a lot of coding experience.

    JavaScript Create JavaScript and HTML5 Forms for Free Monty Shokeen

  • HTML5
    Form Input Validation Using Only HTML5 and Regex
    Monty Shokeen

  • JavaScript
    Best JavaScript Forms of 2019
    Monty Shokeen

  • JavaScript
    Easy Form Validation With jQuery
    Monty Shokeen

  • In such cases, you can either use third-party services—which can be a bit expensive—or you can purchase a premium framework, form builder, or plugin which offers free support for a certain period of time. In this tutorial, we will take a look at one of the most popular and feature-rich form frameworks available on CodeCanyon to create your own JavaScript forms.

    Smart Forms Overview

    The tool that we will use today to create our own forms is Smart Forms. This form framework has gained 3,819 sales at the time of writing, and it has an average rating of 4.5 based on 159 reviews. Most buyers who have used the framework in their website like its code quality, features, design, flexibility, and active customer support.

    Some of the features of this framework are:

    • responsive framework with over 40 starter templates
    • multi-step forms and modal forms
    • date picker, time picker, month picker, and color picker widgets among others
    • drag-and-drop file uploads
    • AJAX and PHP based, with support for Google reCAPTCHA
    • and the list goes on!

    If you want to create a lot of professional-looking forms, using the Smart Forms framework would be a good choice. Do check out all the features and reviews on the framework home page.

    Example Forms

    To show what you can create with Smart Forms, here are a couple of examples with varying themes and layouts. You can choose to have a social media login button placed either at the top or side by side. There are a lot of color schemes and three different themes available.

    Here’s a login form.

    Login Form Black Theme

    And here’s that same login form with a different color and the social sign-in buttons on the top:

    Login Form Green

    Similarly, here are two forms related to placing orders. As you can see, it is possible to create entirely different layouts based on your needs.

    Order Form Purple Theme

    In the next form, you can see how Smart Forms can create attractive styling like large product option cards.

    Order Form Green Theme

    The download files contain hundreds of such template files, so you will almost always be able to find a template that suits your needs and styling. Not only that, but the documentation in the download is easy to understand in case you want to create an entirely new layout for your forms.

    File Structure and Other Basics

    Once you purchase Smart Forms, you will get detailed documentation about the process of creating your own forms and adding them to your own website in the zip download. Here are some key points that you have to remember:

    1. The forms rely on a single main CSS file for most of the styling. Make sure that you load any CSS reset files before loading the CSS for the plugin.
    2. The forms support Font Awesome icons and JavaScript features like AJAX submission and form validation. However, you can disable these features if you don’t need them.
    3. The framework loads an additional fallback stylesheet for IE8.

    There are three folders inside the extracted archive called dark, flat, and light. These are the three main themes for different forms. Each theme contains three different folders. These are:

    AJAX PHP: This folder contains working AJAX PHP forms like a contact form, order form, and more.

    JavaScript enhancements: This folder has all the samples for form validation, as well as the date picker and other widgets.

    Template samples: This folder includes HTML- and CSS-based form templates to help you build your forms faster. These templates can also act as a basic guideline when you create your own forms.

    When creating your own forms, the first step is to load the necessary CSS files using the following lines:

    <link rel="stylesheet" type="text/css"  href="css/smart-forms.css">
    <link rel="stylesheet" type="text/css"  href="css/font-awesome.min.css">

    You’ll have to wrap your forms in two div elements with the smart-wrap and smart-forms classes.

    Creating a Contact Form With Smart Forms

    The documentation provides a detailed and easy-to-follow guide on creating different kinds of forms, explaining how to add text input elements, check boxes, radio buttons and file inputs with the theme of your choice applied to them.

    In this tutorial, we will create a contact form with a blue theme and fields for name, email, subject, and message. We will need to load one additional CSS file in order to apply the blue theme.

    <link rel="stylesheet" type="text/css"  href="css/smart-forms.css">
        <link rel="stylesheet" type="text/css"  href="css/smart-themes/blue.css"> 
        <link rel="stylesheet" type="text/css"  href="css/font-awesome.min.css">

    Here is our initial markup for creating the form with a basic skeletal structure:

    <div class="smart-wrap">
        <div class="smart-forms smart-container wrap-3">
        
            <div class="form-header header-blue">
                <h4><i class="fa fa-comments"></i>Contact us</h4>
            </div>
            
            <form method="post" action="/" id="contact-form">
                <div class="form-body theme-blue">
                                                                                                    
                </div>
                <div class="form-footer">
                	<button type="submit" class="button btn-blue pushed">Submit</button>
                </div>
            </form>
            
        </div>
    </div>

    read more

    How to Create a Mega Menu With a Free WordPress Plugin

    In this post, we’ll explore the WP Mega Menu plugin, which allows you to create content-rich navigation menus on your WordPress site. We’ll go through the different aspects of this plugin, and we’ll also build a real-world example for demonstration purposes.

    10 Best Restaurant WordPress Plugins

    With the evolution of online shopping, more and more shoppers are buying food and groceries online. But in order for your restaurant website to stand out, you need the right plugins. In this tutorial, we are going to review some of the premium best restaurant plugins on CodeCanyon, and some great free plugins you can start with today.

    WordPress Plugins for Restaurant Websites

    As a restaurant owner, having a website is the best way to lure customers to your establishment. In this digital age, many diners order meals from restaurant websites, and an even larger percentage look up restaurant locations from their devices.

    read more