4elements, Amsterdam, Holland

  1. Easy Digital Downloads: Style Settings

    I have covered the first three tabs of Settings of Easy Digital Downloads. In this article I will discuss the fourth tab, which is for Styles. In this section there are options for some default styles and for different buttons.

    Styles Settings

    It is extremely important for you as a digital store owner that your website should be styled well, yet user-friendly. This combination is difficult to achieve, but EDD has solved this problem, and now styling your store is a matter of few clicks. This tab allows you to configure different Styles so that your website gets a presentable appearance. You can enable and disable different styles of the plugin from here.

    Easy Digital Downloads Styles Settings

    The fourth tab in the section of Settings is for Styles. To access this part of the plugin, go to Downloads > Settings > Styles.

    Various configuring options are listed here. So let's discuss them one by one.

    Disable Styles

    Easy Digital Downloads Styles Settings

    The first option is a checkbox for Disable Styles. When you check this box, it will disable all kinds of styling which are included in the plugin, to help you add your own custom styling through CSS.

    Easy Digital Downloads Styles Settings

    For example, if I check this option then on the front-end all kinds of styling will disappear. The figure shown above is sufficient to explain this setting. You can clearly see that the keywords like price of the product, the purchase button, etc. are written as plain text and are not distinguished from each other.

    Easy Digital Downloads Styles Settings

    Now when I uncheck this option, the corresponding results on the front-end change subsequently. The figure displayed above shows a styled version of the digital product. The price and the option for purchase are now enclosed neatly in a button. Such styling enhances the readability factor so in my opinion you should go with the default setting unless you plan to style it with CSS programming language.


    Next, there is a separate section for Buttons in the Styles tab. Here you can see two different configuring options:

    Easy Digital Downloads Styles Settings
    1. Default Button Style
    2. Default Button Color

    Let's take a look at these two options.

    Default Button Style

    Easy Digital Downloads Styles Settings

    You will set the Default Button Style from here. This is a drop-down menu which offers two options:

    • Button
    • Plain Text
    Easy Digital Downloads Styles Settings

    By default, Button is selected. The figure above shows its result on the front-end where you can see a proper styled line around the price tag and the purchase button.

    Let's now choose Plain Text and see the results.

    Easy Digital Downloads Styles Settings

    With this configuration, you will notice that the outline which was seen around the purchase area has disappeared. 

    So the purpose of configuring this setting is to ensure that a particular style for buttons will be applied over the entire site, no matter which part of the website you are visiting. I usually prefer to go with the default setting, i.e. the button option, because it gives a neat and tidy look.

    Default Button Color

    Easy Digital Downloads Styles Settings

    The last option in this tab allows you to choose the Default Button Color from a drop-down menu. By default White is selected, but you can select different colors from the list. This color will be displayed on places like the purchase button, the add to cart button, etc.

    Let me show you the results with some custom settings, e.g. Red.

    Easy Digital Downloads Styles Settings

    With this color being selected, you will notice that all the buttons on your site will appear Red. I prefer to use a bright and vibrant color for buttons because they are the important part of your site and must be highlighted. 

    There is another way through which you can apply any other color apart from the listed ones. By adding the "[purchase_link]" shortcode at the back-end you can supersede the selected color and can easily replace it from the color palette.

    After configuring these settings in the Styles tab, hit the Save Changes button to save all the settings which you have just made.


    Till now I have covered four tabs in Settings. In my next article, I will discuss the next tab which is for TaxesI hope now you will not face any problem while configuring the basic settings of EDD.



    Leave a comment › Posted in: Daily

    1. The Beginners Guide to WooCommerce: Shipping Settings Part 4

      In the previous beginners guide I explained half of the Shipping settings. Today I'll be guiding you people about how to configure the two remaining options termed as Local Delivery and Local Pickups. So, let's get to it.

      Local Delivery

      Shipping via Local Delivery means that you will deliver items to your customers locally, i.e. within the geographical boundaries of your base location within the same city or country. WooCommerce allocates a separate section for this type of shipping. Let's see how you can configure it.

      Enable local delivery

      The first two options are:

      • Enable: This is used to Enable/Disable this shipping option.
      • Title: Set the title of this form of shipping for the front-end display.

      The default setting is an unmarked Enable/Disable checkbox, while Local Delivery is the Title.

      Fee type and amount

      The next two fields, Fee Type and Delivery Fee, are dependent upon each other. 

      • Fee Type: This manages how the delivery charges for local shipping are calculated, and offers various options through a dropdown menu.
      • Delivery Fee: This quotes the exact amount that a store owner will charge customers if they select local delivery as their method of shipping. 

      Let me explain the role of these two options in Local Delivery shipping via examples. Consider three cases.

      Case 1: Fee Type = Fixed Amount & Delivery Fee = 10.

      Cart showing order total of 47 pounds

      Fixed amount means that a standard rate will be charged to customers for the delivery of their product. In the above figure you can see that the cart page displays £10.00 as a fixed rate for local delivery. So the actual product price was £35.00, and when this fixed amount is added (i.e. £10.00) along with the VAT value (£2.00), the total cost of the order becomes £47.00.

      Case 2: Fee Type = Percentage of cart total & Delivery Fee = 10.

      Cart showing order total of 39 pounds 20

      Percentage of cart total means that whatever you write in the Delivery Fee field will be considered as a percentage value and the delivery charges will now apply as a percentage of the item price/value. 

      In this example we have set Delivery Fee = 10, which corresponds to 10%. So charges for local delivery will be calculated by "10% of cart total" i.e. 10% of £35.00 = £3.50. Similarly, in Case 1 VAT was £2.00, and now VAT becomes £0.70. All these costs generate a total price of £39.20 (i.e. £35.00 + £3.50 + £0.70). 

      Case 3: Fee Type = Fixed amount per product & Delivery Fee = 10.

      Cart showing order total of 83 pounds

      This option for Fee Type is somewhat similar in function to Fee Type=Fixed Amount, because with this option a fixed amount will be charged on every product. The figure above shows that two products are there in the customer's cart worth £35.00 and £20.00. This means a delivery fee of £10.00 will be imposed on every product. Hence, the total cost of local delivery becomes £20.00. Similarly, VAT will apply separately on every product, so that now becomes £8.00. The total cost of the order becomes £83.00.   

      Make sure you click the Save Changes button after every configuring every option.

      Zip codes and Method availability

      In the last two fields you will specify all those Zip/Post Codes and Countries where you will offer shipping via local delivery. You can add multiple codes, each separated by a comma.

      Local Pickup

      In my opinion the least preferred method of shipping is Local Pickup, where customers have to come and collect their products directly from the store owners. This shipping service nullifies the concept of an online store. Despite all these facts, WooCommerce offers Local Pickup.

      Local Pickup options

      The first two options are:

      • Enable: This is used to Enable/Disable this shipping option.
      • Title: Set the title of this form of shipping for the front-end display.

      The default setting is an unmarked Enable/Disable checkbox with Local Pickup as the Title.

      As no additional charges or geographical boundaries are involved in this type of shipping, the settings in this section are quite simple and straightforward. The figure above shows various options which can be configured. 

      Quite similar to the last shipping settings, in the last two fields you will specify all those Zip/Post Codes and Countries where you will offer shipping via local pickup. You can add multiple codes, each separated by a comma.

      In the next article I will start configuring the Accounts section in WooCommerce. Till then if you have any query regarding the shipping settings you may ask in the comment box below. Cheers!



      Leave a comment › Posted in: Daily

    1. Creating a List of Posts With the Same Categories as the Current One

      If you're running a large blog, you'll need to find a way to help your readers find content that they're going to want to read, based on what they're currently reading or have just read.

      One way to do this is by using one of the many plugins out there that identify related posts. These use various methods to identify other posts which have similar content to the current one, but sometimes they don't give you quite the results you want.

      One logical way to identify posts like the one currently on display is by using categories, tags or taxonomy terms. If you could identify the posts in the same categories as the current one, you could then display a list of the most recent posts in the same categories, to help readers find related content.

      In this tutorial I'll show you how to create a plugin to do just that. The plugin will give you a function which you then add to your single.php template file to show the list under the content of the current post.

      What You'll Need

      To follow this tutorial you'll need:

      • a development installation of WordPress
      • an existing theme with a single.php template file
      • a code editor

      Setting Up the Plugin

      Let's start by setting up the plugin. Create a new file for your plugin—I'm calling mine tutsplus-related-posts.php.

      In your new file, add the following:

      You'll want to change the author details to your own details, but this gives WordPress what it needs to recognise the plugin and enable you to activate it in the dashboard.

      Identifying the Current Post's Categories

      In order to identify other posts with the same categories, you need to get the list of categories the current post is in, and add them to an array.

      Start by creating the function to hold your code, along with a few initializations:

      Now inside your function, use the get_the_category() function to fetch an array of data relating to the categories the current post is in:

      The function has just one parameter, the post id, which specifies that it's the current post whose categories you want to get.

      Next, you need to create an array which will hold the IDs of all of the categories:

      Let's take a look at what this code does:

      • First it checks that $categories hasn't returned null or an error.
      • Then for each category, it adds the ID to the array.

      Your function will now look like this:

      Writing a Query to Output Posts in the Same Category

      Now that you have an array with the category IDs in it, you can use it as an argument for a query to identify posts with those categories.

      Still inside your function, set the arguments for the query:

      These arguments will find posts of the same post types as the current one, in the same categories, and exclude the current post. I've set it to output five posts, but you could always change this, or any of the other arguments such as post type if you've applied categories to more than one post type.

      Now run the query:

      This outputs the post titles inside links to them, in a list.

      Adding the Function to Your Theme

      The final step is to add the function to a template file in your theme. I've created a child theme for the Twenty Fourteen theme with a new single.php file, and I'm adding the function there, below the content. It can be added anywhere, as long as it's within the WordPress post loop.

      In your template file, add the following:

      You can see the result below:

      End of a post with a list of five related posts shown at the bottom

      Note: The demo site is a little confusing as tags and categories are listed at the end of each post. Our list doesn't use tags, just categories, of which each post in this site has one.

      Alternatives: Tags and Taxonomy Terms

      You can quite easily alter this function to work with tags or taxonomy terms instead.

      To identify tags instead of categories, you would replace the get_the_category() function with get_the_tags(), and then replace the 'category__in' argument for the query with 'tag__in'.

      To identify taxonomy terms, you'd use get_the_terms() in place of get_the_category(), adding the taxonomy slug as the second parameter. You'd then replace the 'category__in' argument with an argument using 'tax_query'.

      You could also search for posts with the same terms in more than one taxonomy (including terms and categories), by creating two arrays and using two arguments in your query.


      In this tutorial you've learned how to identify the categories the current post is in, add their IDs to an array, and then use that array to run a query displaying posts in the same category. This gives you more control than you get from most related posts plugins, and means you can define the arguments for your query so that the posts are displayed in exactly the way you want.

      You can also adapt this technique to work with tags, taxonomy terms, or a combination of two or more.



      Leave a comment › Posted in: Daily

    1. Why Is jQuery Undefined?

      For the advanced JavaScript developers (and the advanced jQuery developers) among our readership, this article is not going to be of much help. Instead, we're going to be focused on those who are just getting started with jQuery.

      Perhaps you've gone through several JavaScript tutorials, built several small sites or projects that incorporate JavaScript into the page (or the site) to some degree, and now you're ready to get started with a new framework or library.

      If you're reading this tutorial, then I assume you're interested in getting started with jQuery. Or perhaps you've already started with jQuery but you're encountering a couple of hurdles that are hindering your learning.

      As frustrating as it can be to learn something new, hit a roadblock and then have to repeat it a little bit further down the line, the silver lining is that the chances are that your problems have been solved by someone else.

      This isn't necessarily true for more complex applications, but when you're learning something new, you're not the first person to bounce along the learning curve. To that end, you're likely able to learn something from someone who has been there before.

      And that's exactly what we're going to be covering in this tutorial. Specifically, we're going to be talking about the problem when you receive the error message:

      Uncaught ReferenceError: jQuery is undefined

      Understanding the Problem

      Before getting to the solution, let's review exactly what's happening. That is, in order to understand how we arrive at our solution, we need to understand the problem. Only then can we know how to solve what's being displayed in the console.

      Uncaught ReferenceError jQuery is not defined

      If you're familiar with JavaScript, then you know how confusing undefined can really be—that is, are we talking about the global object or a primitive value? That's beyond the scope of this post (no pun intended!), but even if you're not familiar with either definition, that doesn't mean you're not capable of diagnosing the problem.

      Set Up a Sandbox

      First, let's go ahead and set up a page that includes the basics of what we need in order to work with the jQuery library to reproduce the error that we see above.

      Start by creating the following HTML file and saving it somewhere on your local machine where you will be able to easily load it up in a web browser.

      Take notice that we're including some CSS in this file. It's completely optional, though if you'd like to follow along with this tutorial step-by-step, you can download an archive of all of this from the right-hand side of this post.

      Although the CSS is optional, the JavaScript is not. Note that we're including the jQuery library from a content-delivery network (or a CDN) so that we don't have to include it within our project's source files.

      Next, let's create a JavaScript source file that we can use in order to recreate the error above and to write some test code in order to solve the problem. We'll call it main.js.

      After that, include the source file in your HTML document such that the final file looks like this:

      Now you should be able to load up the page in your browser and see something almost exactly like the console image shared above.

      Verify Your JavaScript Is Loaded

      Before going any further, let's go ahead and make sure that the JavaScript file is loaded correctly. In order to do this, we'll set up a simple alert so that a message is displayed whenever the page is loaded in the browser.

      JavaScript Loaded

      To see this screen, make the following change to your JavaScript source file:

      Next, make sure that you re-order the JavaScript files from:


      We'll talk more about this in a little bit.

      At this point, refresh the page. Assuming all went well up to this point, then you should see the dialog as demonstrated in the image above. If that doesn't work, look over the code that's above (or download the files attached to this tutorial) and make sure you've got everything loaded correctly.

      Reproducing the Problem

      Now that we've got the sandbox set up so that we can begin exploring the problem in-depth, let's take a look at some potential problems that you may see when working with jQuery.

      1. jQuery Is Loaded After Your Code

      Whenever you opt to use jQuery in a project, this means that jQuery becomes a dependency for your work. And whenever you're working with dependencies, you generally need to make sure that they are loaded before your code so that your code can take advantage of it.

      If you notice in the first bit of code above, our JavaScript file is loaded before jQuery, so anything we'd like to do with jQuery can't actually be done. The reason that you're seeing the undefined error message that we discussed earlier is because jQuery is literally not defined within the context of your code.

      That is, your code has no idea that jQuery even exists because jQuery is loaded after your code. Luckily, this is a simple fix. Simply change the order in which the files are loaded—that is, place jQuery above your source file, and then try to execute the code once more.

      After the change, the full HTML should look like this:

      Your code should work and the console shouldn't be displaying any errors. This is likely the easiest problem to solve, but it's probably one of the least common errors to see, as it's generally assumed that jQuery will need to be loaded first.

      2. A Conflicting Plugin or File

      When working with jQuery, sometimes developers like to modify the $ function so that it doesn't conflict with something else that their source code uses.

      Specifically, jQuery is the name of the function within the jQuery source code. The library uses $ as a synonym or a shortcut since it's likely going to be used so often. It makes the code easier to type and easier to read.

      No Conflicts

      But it's not the only JavaScript code that uses that function and sometimes developers will need to use a different function or relinquish the $ to another bit of source code. In order to do that, they may end up using jQuery.noConflict().

      Straight from the API:

      Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $.
      If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.

      So somewhere in the code that you've included, there's a chance that another developer has made a call to this function. Thus, the $ function will not be accessible. It could potentially be calling a function other than jQuery itself, or it could be calling a function that is undefined.

      In our case, we're interested in the latter. To address this, we can try a couple of solutions. First, we can try to reclaim access to the $ function by simply calling jQuery.noConflict() once again. Though this may solve the problem, it may also result in another problem that exists if another framework, library, or some other module is included with your code.

      To that end, I only recommend using this whenever you're absolutely sure you know what you're doing and that it won't affect other frameworks.

      Properly Scoping $

      But what if you don't know that it won't affect other frameworks. What then? In this case, you have the opportunity to initialize your code such that it will start with the basic jQuery function and then use the $ to scope the shortcut function into the context of your own code.

      Sound complicated? Don't worry. It's not bad. Let's edit our JavaScript source file to contain the following:

      Alright, here's what's happening:

      1. We're declaring an anonymous function that accepts a single argument (in our case, jQuery).
      2. The function will be passed and referenced by $ and will be scoped only within the context of our anonymous function.

      This means that we're free to use the $ function however we see fit, without actually interfering with any other implementations of that particular function. In fact, for what it's worth, this is somewhat the de-facto way to set up your jQuery-based code.

      Not everyone does it this way, but this is a very common, very safe way to handle it so that you're able to avoid the whole undefined error message.

      3. Are There More?

      Absolutely. But the challenge is figuring out how to cover them all. The truth is, I don't know if it's actually possible because, at some point, the complexity of web projects becomes so great that tracking down where the problem exists can be tough.

      Furthermore, changing jQuery to do what you want it to do might end up breaking something else (which is obviously never a good thing).

      Instead, it's best to stick with what we know is safe—like the anonymous function approach mentioned above—and not to abuse things like the noConflict() method. After all, part of good development is not only playing nice with other people's code, but writing code with which others may play nice, as well.


      As outlined above, there are a number of different things that could trigger the jQuery is undefined message in your console. We've attempted to look at several of the most common problems in the examples above.

      That said, it's hard to be exhaustive because it's near impossible to cover all of the combinations and permutations you may have set up in your project. Perhaps you're using a conflicting library, maybe it's a poorly written plugin, or maybe there are just dependencies that are not properly ordered.

      Whatever the case may be, this hopefully helps explain what the problem is and some ways that you may move forward with diagnosing it. If your solution wasn't outlined here, then please feel free to leave it in the comments.

      Additionally, if you have any other questions, feel free to leave them in the comments below and I'll aim to answer them to the best of my ability.



      Leave a comment › Posted in: Daily

    1. Toolbox of the Smart WordPress Developer: The WordPress Plugin Boilerplate

      Did you know that you can actually cause death by writing a WordPress plugin? It's true: If you make a plugin that's poorly-coded enough to cause a security problem, and say, somebody hacks the website of a small country with a dictatorial rule, some heads might roll.

      While it's a slim chance and not reported to be true (yet), it's actually a valid reason for you to write better plugins. And in this part of the "Toolbox of the Smart WordPress Developer" series, we're going to save some lives by going through the WordPress Plugin Boilerplate.

      Writing Plugins in WordPress

      What is the most important superpower of WordPress? I've asked and answered this question more than a few times in my tutorials, but you probably already know the answer: extensibility.

      One way of harnessing this power is by making WordPress plugins and putting them into use for the community. You can release a plugin on GitHub, in the WordPress Plugin Repository, on CodeCanyon, or on your own website. You can give it away free, or ask for money or donations.

      In any case, you will be extending the functionality of WordPress in some way and on your own terms. You're a part of the WordPress community and you're letting the community grow by extending WordPress. How cool is that? This is indeed the prime superpower of WordPress, and you're allowed to use it.

      But you also need to remind yourself that with great power comes great responsibility. You must use this power for good, and use it well. By making poorly-written WordPress plugins, you might cause some really bad things—especially in terms of security. That's why you need to act cautiously and make well-coded plugins with a solid foundation.

      While it doesn't solve all your coding problems, the WordPress Plugin Boilerplate will help you start off on the right foot by providing that "solid foundation" and guiding you to code better.

      The WordPress Plugin Boilerplate to the Rescue!

      WordPress Plugin Boilerplate

      Back in December 2011, Tom McFarlin, our editor of Tuts+ Code, released the first version of the WordPress Plugin Boilerplate. Over three years, the project has been watched by over 250 people, forked almost 700 times, and got over 2,700 stars on GitHub.

      On March 2015, Tom announced that Devin Vinson had taken over ownership of the WordPress Plugin Boilerplate project. As of today, the project's GitHub repository is hosted in Devin's account.

      What Is the WordPress Plugin Boilerplate and Why Should We Use This Tool?

      On the WordPress Plugin Boilerplate homepage, the project is defined as "a standardized, organized, object-oriented foundation for building high-quality WordPress plugins."

      Basically, the WordPress Plugin Boilerplate is one of the best tools around to start a new WordPress plugin with a solid foundation. It provides the essential file and folder structure to stay organized, and using the starter codes inside the files, you can optimize your workflow and write the plugin the right way.

      Using the WordPress Plugin Boilerplate

      Granted, this tool is not for WordPress beginners. But you don't have to be a WordPress guru either: Even if you have a basic understanding of WordPress plugin development, the WordPress Plugin Boilerplate will be an easy-to-understand tool for you to make better WordPress plugins.

      Starting a WordPress plugin project with the WordPress Plugin Boilerplate is pretty straightforward, actually. In the beginning, all you need to do is change the plugin-name folder to your plugin's name and edit all files (PHP, JS, CSS files and images) to change the "boilerplate values" to your own plugin's values.

      You'll notice that there are quite a few files to work with, and lots of parts to edit even before writing your own code. Don't let this put you off—it's just a one-time thing, after all.

      Let's quickly go over some of the files and folders:

      • plugin-name/admin/: Includes CSS files, JS files, partials and the PHP file for an admin-specific class (class-plugin-name-admin.php).
      • plugin-name/includes/: This folder is kind of the "backbone" of your plugin. It consists of:
        • plugin-name/includes/class-plugin-name.php: The main PHP class of your plugin.
        • plugin-name/includes/class-plugin-name-activator.php: Includes the plugin activation functions.
        • plugin-name/includes/class-plugin-name-deactivator.php: Includes the plugin deactivation functions.
        • plugin-name/includes/class-plugin-name-i18n.php: Includes the internationalization functionality.
        • plugin-name/includes/class-plugin-name-loader.php: Includes the actions and filters for your plugin.
      • plugin-name/languages/: This folder includes your plugin's language files. Includes a default plugin-name.pot file.
      • plugin-name/public/: Includes CSS files, JS files, partials and the PHP file for a public-facing functionality (class-plugin-name-admin.php).
      • plugin-name/LICENSE.txt: A copy of the GPL-2 license.
      • plugin-name/plugin-name.php: The main plugin file.
      • plugin-name/README.txt: A default README file for your plugin. Don't forget to change this one!
      • plugin-name/uninstall.php: File to run when the user deletes your plugin.

      Please note that the folder structure is based on the system of the WordPress.org Plugin Repository.

      Quick Tip: Using the WordPress Plugin Boilerplate Generator tool, you can generate a customized copy. You provide your plugin's name, slug, website, and your name, email address and website; then the tool replaces all the corresponding values in the boilerplate files. Neat!

      In Conclusion

      The WordPress Plugin Boilerplate surely is a great tool (even the best tool, maybe) for creating better WordPress plugins. But as I said at the beginning of this article, it's not enough. You have to be mindful about WordPress Coding Standards, comply with the plugin writing processes, and be watchful about security issues in general. And if you want to learn more about writing better plugins, be sure to check out the "Introduction to WordPress Plugin Development" video course, also created by Tom McFarlin.

      What do you think about the WordPress Plugin Boilerplate, and making plugins with it? Share your thoughts with us by posting in the Comments section below. And if you liked the tutorial, be sure to share it with your friends!

      See you in the next part where we'll talk about the Envato WordPress Toolkit, a toolkit to install and update themes purchased from ThemeForest.



      Leave a comment › Posted in: Daily

  • Page 3 of 83 pages  < 1 2 3 4 5 >  Last ›
  • Browse the Blog