Tag: WordPress plugin developer

How to Edit Your WordPress Plugin’s Code

Now that you’ve set up your WordPress site locally on your laptop so that you can easily code your plugin on the go, it’s time to add the features you want and start coding.

The code used by WordPress is English (mostly), sprinkled with a bit of math. While it might seem hard to understand right now, don’t worry about it too much. I was confused myself when I started coding. What really helped me though was just diving into the code and changing it, testing what worked and reversing the changes and trying again if it didn’t.

Edit Your Plugin Using WordPress’ Code Editor

The smart folks over at WordPress knew that site owner will want to mess around with their own site’s code. Rather than make it hard for them by forcing people to download, edit, then upload files, they just made editing possible right from the site’s admin area.

Here’s how to access that editor:

  1. Go to the admin area of your site and click Plugins, then click Editor. 
  2. Next to “Select plugin to edit:” at the top, choose the plugin you uploaded earlier then click the Select button.
  3. At the right, you will see the folders and files included in the plugin, arranged in a file browser like the one on your laptop.
  4. Inside the admin folder is a file starting with class-. If you followed along with my previous post, you’ll see that this is the same file you edited as before.
  5. Once you’re done editing, just click on Update File to save your changes.

NOTE: If you’re using InstantWP and getting an error saving your code, add the WP Editor plugin by Benjamin Rojas to fix that issue.

edit code using Coditor

Edit Code Using Coditor

There’s also a great plugin called Coditor which adds a real code editor into the admin area of your WordPress site. If you’ve seen cyberpunk-like dark coding screens in the movies, this makes your code look just like that.

To try it out:

  1. Search for Coditor it in the WordPress directory by going to Plugins > Add New.
  2. After installing and activating the plugin, you’ll see a new Coditor option at the left admin menu. Click on it.
  3. At the left panel, choose Theme to edit your theme or Plugin to edit your plugins.
  4. It works just like Windows Explorer or macOS Finder, with the files and folders at the left and the actual file at the right. Simply navigate to the file you want to edit and click it.
  5. At the upper right are buttons for saving your file, undoing and redoing, and searching the text.
  6. You’ll also notice that it highlights the syntax of the code, very useful to figure out what part of the code you’re editing.

———

While there are other ways of editing your plugin, including the roundabout way of downloading, editing and uploading the files, I’ll leave with these two simple tools so that you can start writing code right away. I’m sure you’ll be able to make simple changes from here on.

If you need something more complex or want to customize a plugin to suit your website, let me know. I’d be more than glad to help.

Need a Simple Custom Plugin for WordPress? I Can Build It for You

I’ve been writing about how to make WordPress plugins a lot lately. While I encourage everyone to try creating a simple custom plugin on their own, I also realize that not everyone is inclined to do so.

You might not have the time to spend learning and building a plugin. Or you might have tried building one but discovered that coding really isn’t for you.

If you don’t have the time to build a plugin but still want to add a simple feature or function to your WordPress site, let’s talk and I might be able to build the plugin for you.

If it’s a really useful plugin that we definitely need to share to the world, I can build it for free and then upload it here for everyone to download. We’ll work together to iron out the kinks and you have first dibs in installing it.

For plugins that need a bit of extra elbow grease to make or if you don’t want it to be publicly available, you can also hire me to build it for you. I can both create something from the ground up or modify an existing plugin for your company’s private use.

Interested in getting your plugin idea made?
Post a comment below with your idea, email me or send me a message.

Start Your First Plugin Project with WPPB.me

I think the reason I was scared to create a plugin before was because I thought that the setup would be a pain to do. Looking at other successful plugins, I saw that they often had folders upon folders of organized files and extremely well-structured code.

But it really wasn’t the complexity that put me off. It was the fact that I had to start from essentially nothing. This meant I had a lot of questions to answer even before typing my first line of code.

Should I organize files by type or by function? What framework should I follow? Do I really need a separate folder for each type of file?

So you can imagine my relief when I found that you don’t have to set up all the folders and files manually. Just use the WordPress Plugin Boilerplate Generator.

WordPress plugin boilerplate generator

Step 1: Generate the Plugin Zip File

To create a plugin with all the needed files, you just need to fill in the form. In return, it sends you a zip file with all the things you need to make your plugin work. All the files themselves explain what they do which is a nice bonus.

First, let’s talk about the parts of the form:

  • Plugin Name. This is the name of the plugin that will show up when you install the plugin.
  • Plugin Slug. This is the code-friendly name of the plugin. The slug is used as the filename of your main plugin file, as well as an identifier of some of the other important files in it. Since I’ll be referring to this a lot, let’s call it “{plugin-slug}“.
  • Plugin Uri. This is the link to your plugin’s website. I suggest you use the link to your personal site or company’s site here for now unless you already have a website for the plugin itself.
  • Author Name. Enter your name here, or the name of your company
  • Author Email. Enter the email you want to share as part of the plugin. Note that this will be accessible to the users of your plugin so make sure it’s an email you want to share with the public.
  • Author Uri. Add the link to your personal website or company site here.

Step 2: Download and Unzip the File

Once you download the zip file, you’ll need to unpack it to edit the files so that you can add the functionality you need. For the next discussion points, keep in mind that we’ll use “{plugin-slug}” as a placeholder for the Plugin Slug you entered above.

After you’ve unzipped the file, you’ll see a lot of folders and files in it. Let’s focus on the important files and folders first and discuss the others later:

  • {plugin-slug}.php. This is the main file of the plugin. It’s what WordPress uses to build the description of your plugin when added it to the user’s plugin page. We can actually add the code needed to make the plugin work right here, but I think it would be better to modify the files below instead.
  • admin. This folder is where the admin part of your plugin lives. That includes your plugin options, internal menus found in the WordPress admin area, and so on. You’ll add the code in the  class-{plugin-slug}-admin.php file found here.
  • public. This folder is where the public-facing part of your plugin will be. If you change the way your blog looks, you need to add the code for that in class-{plugin-slug}-public.php.

Now I mentioned that you don’t want to modify {plugin-slug}.php directly. That’s because you want to make it easy to find the code you need if and when you need to modify it.

From my experience, adding all the code into one file can turn into a huge mess. Much better if you put the admin-facing code in the admin folder, and the public-facing code in the public folder. The generator even separates the files by type within each of those folders.

testing your plugin

Step 3: Testing Your Plugin

Obviously, the plugin doesn’t do anything right now. Let’s add a bit of test code now and add the plugin to your site to check if it works.

  1. Go to the admin folder of your plugin and open class-{plugin-slug}-admin.php using your favorite text editor, either NotePad for Windows users or TextEdit for Mac users.
  2. Look for this line: 
    $this->version = $version;
  3. In the next line after that, type in this text: 
    add_action('admin_head', function() { echo '<style>body{background:gold;}</style>'; });

    then, save the file.

  4. Go to the top folder of your plugin and turn it into a zip file. Often, you’ll just need to right click on the folder and choose the necessary menu item.
  5. After that, open up your site and go to the admin area. Navigate to Plugins > Add New.
  6. Click Upload Plugin at the top of the page, then click on Browse and upload the zip file you made earlier.
  7. Click Install Now and then click Activate Plugin.

admin area

If the background of your admin area is now in bright gold like the one shown above, congrats! You’ve just installed your first working plugin! Just deactivate it to revert to your normal color and uninstall it if you’d like.

PS: If you’re having trouble uploading the plugin, you might want to ask for some help from your site admin.

Now that you’ve made your first plugin, it’s time to modify it to add the features you want. But first, let me teach you a couple of things that will help you code better: creating a local WordPress setup for coding offline and how to edit your plugin’s code.

How to Get Your WordPress Plugin Approved Without Problems

Good news, my plugin’s been approved and is live in the WordPress directory! If you need a way to collect emails without feeling sales-y, grab my Create Content Offers plugin here.

To celebrate, I’ve put together a few things that helped me get my plugin approved without any issues at all. All it took was a couple of days of waiting, some uploading and my plugin was ready to use for WordPress owners and marketers.

Creating the Plugin

There aren’t many rules you need to follow when coding your plugin. The directory allows everything from single file plugins to massive apps that need external APIs. That said, it does help to follow a few rules, both to get your plugin approved and to make your programming work a bit more sane.

Use WordPress core libraries if available (don’t add your own!)

WordPress already includes many popular PHP and Javascript libraries as part of its core code. It has jQuery, jQuery UI, and even Backbone and SWFObject. Check the others here and here.

If the library you use is in there, don’t call an external script but just enqueue the one that’s already inside WordPress. And since these libraries already implement many of the most common functions you need, consider using them instead of adding other libraries that do similar things. It makes your plugin look more consistent with the rest of WordPress, and you don’t need to babysit another piece of code if it updates or breaks in the future.

Only use code and assets that you have permission to use

Seems like a no-brainer but we often forget the stipulations of use for many of the extra code we add into our plugins. Not all the code you find in Github can be copy-pasted without attribution.

Similarly, make sure that if you do use third-party code like APIs or assets like images, give credit where credit is due. Or just exclude them and find something you can use freely.

Use WP_DEBUG to test your plugin extensively

I’ve now made it a habit to turn WP_DEBUG on when coding on my machine, instead of keeping it off to hide the notices and warnings. It can be annoying but it does catch a lot of the problems you might have when submitting the plugin to WordPress. At the very least, doing so made my plugin’s approval process go without a hitch, so I encourage you to do the same.

Don’t add links to the plugin user’s front-facing site

We all need backlinks, tracking and attribution for our work. But adding a link to the front end of a user’s site is explicitly forbidden if you want your plugin in the WordPress directory. Usually, these are “Powered by” links and similar things.

Yes, they check this and will reject your plugin. No, don’t try sneaking your links in.

But there is a way to add front-facing backlinks: have an option in the admin area that gets the user’s permission to turn it on. It has to be turned off by default though.

plugin documentation

Updating Your Plugin’s Documentation

While our handy plugin template generator will address many of the issues below, it’s still worth your time to double check these just to make sure your plugin doesn’t get rejected.

Use a GPL v2 license

This is already what your template has so it shouldn’t pose a problem. But still, it pays to read the license itself so you know what you’re getting into.

Fill out the header information completely

For the most part, the template already takes care of the details of the header. By the way, this header shows the plugin info that your users see in their plugin list. So make it relevant if you don’t want them removing it because they don’t know what your plugin actually does. Go here to learn more about how to fill it up.

Fill out the README.txt completely, too

This is one part that needs your attention since the plugin generator doesn’t add much to it. The “readme” text file is what the plugin directory uses to build its description of your plugin, among other things. But often, plugin developers forget to add information here since it’s really not necessary as part of the approval process.

Since making the readme can be difficult, here are a few tools to help you out:

Plugin page's images

Adding Images for Your Plugin Page

While your plugin page doesn’t need to have images, it does make it prettier and sometimes the images also help people decide whether they will download your plugin or not. Here are some of the things you need to take note about images, taken from the plugin assets guide.

Screenshots should be named screenshot-1.png or screenshot-1.jpg

This gives users a glimpse of what your plugin looks like in their admin area as well as how it will change their site.

Name screenshots sequentially, like screenshot-1.jpg, screenshot-2.jpg, etc. You can upload either PNGs or JPGs of your screenshots.

In your readme is a section named screenshots. This is used to caption the screenshots you add. See the sample below.

screenshots caption

 

Create a 128×128 pixel icon

The icon is what the user first sees when they search for plugins, so it pays to make this as memorable as possible. I prefer to make sure the icon is relevant to my plugin, like a checkbox in my case.

For you it can be your company logo, something free from the NounProject or make your own.

Create a 772×250 pixel banner

Make this attractive as possible, possibly adding some information in as well (but not too much). Some developers add contact details and their website here, though.

Personally, I prefer to add a screenshot here of what my plugin looks like as my draw for new users. You can use your logo, custom banners or even your Facebook cover photo if you want.

wordpress plugin developer submitting plugin to WordPress

Submitting Your Plugin to WordPress

Get a WP.org account

It’s funny that some people forget that you need an account to submit a plugin. After all, how will they reach you to say your plugin is approved?

You can use your existing account but if you’re like me, it’s probably an account you used for personal stuff like reviewing plugins or getting support.

I suggest making a new professional account for the plugin and registering here. This will make it easier to hand over support requests and customer question later on. Don’t forget to also edit the gravatar for that account so it has a relevant avatar and not just something autogenerated.

Choose your plugin slug carefully

It’s something repeated time and again in the plugin docs, so make sure that the plugin slug WordPress chooses is the right one. You can’t change this later (though you can change the name of your plugin).

Usually this slug is automatically generated from the title of your plugin, but if you reply to their first email and as long as the plugin has not yet been approved, you can choose another one that fits better.

Make sure the file you send is zipped and less than 25MB in size

Just like how we install zipped files in our WordPress sites. And I’m pretty sure that if you want to include a huge file with your plugin like a video, you can host that elsewhere and just link to it instead.

Learn how to use Subversion / SVN while you wait

It usually takes a few days before you get word on whether your plugin is approved or not. In the meantime, try learning about Subversion (also called SVN) since that’s what you’ll be using to upload your plugin to the directory.

Here’s a guide from WordPress on how to use SVN.

PS: Don’t forget to put your images into the /assets folder.

More Plugin Submission Tips

If you need more guidance for submitting your plugin, here are a few other resources I found:

 

If you’d like to try out my plugin, you can download it here. Or read here to learn how and why I made it.

And if you want a handy way to follow all the tips above, just grab the checklist I made below!

Why Build a WordPress Plugin?

I’ve always been impressed with all the things you can do with plugins.

Remove the annoying bar at the top of the site? There’s a plugin for that. Want to collect emails on your home page? There’s a plugin for that as well. And yep, there’s even a plugin if you want to turn your site into a full-blown marketplace.

Ah, so much good stuff, so little time (and server space).

But if there’s already a plugin for everything WordPress, why should you build one yourself? After all, it’s not like plugins are hard to add to your WP site.

First, let me answer that from my own perspective.

Why I Built a WordPress Plugin

I’ve been working on WordPress sites for over 5 years now, mainly via our microjobs marketplace and some tinkering for side project. But I really haven’t made a plugin from scratch before and I wondered why.

Then it hit me that I’ve always been making plugins, just not in the usual way.

  • I modify free plugins all the time, making them my own. I add extra features, format the display and even sometimes remove code that doesn’t fit my needs.
  • I actually built a few one-file plugins (yes, you can do this!) but have since absorbed the code into the theme I use.

All those are nice for personal projects but I think it’s high time that I make something I can share to the world. After all, it’s bad manners to edit someone else’s work and push it as your own.

build a WordPress custom plugin from scratch

Why YOU Should Build a Plugin

So I made this plugin mainly because I wanted to learn WordPress plugin development. But I think even non-developers like digital marketers, creative freelancers, and consultants would benefit from building their own plugins.

Since you already own a WordPress site, why not discover how you can modify it to suit your needs?

  1. Building a plugin helps you understand how WordPress works. This way, you know what goes on when a developer tinkers with your site. It also gives you an insight how the non-coding side of WordPress works, like publishing to the plugin directory.
  2. Building a plugin teaches you how to modify other plugins to suit your needs. Often, you just need to change a single line of code to change a plugin to how you want it to work, much better than hiring a dev.
  3. Building a plugin means you make something new. There’s no better feeling than getting that first person to install your plugin and tell you that it works on their site without a hitch.
  4. Building a plugin also builds up your career (or business, as the case may be). You add one more skill to your toolbox and the plugin can be used to improve your site’s SEO, gather future customers, and expand the range of services you offer.
  5. Building a plugin means you solve other people’s problems. Sure, you can install an existing plugin to make your own site better. But what if you can make something, publish it, and help dozens of other site owners without any extra effort? Everyone wins!

To my last point, I think making plugins is all about being helpful. Software is the most scalable way I know to help others, and plugins are an easy entry point for anyone who’s familiar with WordPress.

If you’re a WordPress site owner but don’t have programming skills, don’t fret! Making a plugin is a great starting point if you want to learn how to code and get something useful out of it.

But I think the next question is: what plugin should I build?