Securing Site Cookies in PHP

Almost every site I know creates user cookies. But unlike your website, these yummy pieces of data don’t reside in your server but on your user’s browser. So while it can contain some very sensitive data like user ids and sessions, you have limited control over it once it’s with your user.

Thankfully, there’s an easy way to fix this. Put this in your config file (or whatever PHP file first loads for your app, like an includes file).

ini_set('session.cookie_httponly', 1);
ini_set('session.cookie_secure', 1);

The HTTPOnly flag lets the browser know that only the server should be able to access the cookie. Do note that while this does prevent client scripts from accessing the cookie, the same restriction applies to your own client-side scripts. So any Javascript framework you use such as React or Vue won’t be able to use the cookie, something to consider when developing your frontend.

The second Secure flag means that cookies are only sent via HTTPS, which prevents third-parties from intercepting the cookie data. Just remember that your site needs to be HTTPS already or else browsers won’t be able to create these secure cookies.

For Laravel devs, this is actually even easier to set.

Open config/session.php
Change these settings:
'secure' => true, 'http_only' => true,

These settings only apply if you created the cookie using Laravel’s own methods (aka \Cookie) and don’t apply if you made them using PHP directly (setcookie).

You can also double check your cookie security via GeekFlare. You should get a green shield if you did everything right.

Source: Stackoverflow
Learn more: developer.mozilla.org

Hide Your Folders and Directories!

As a follow up to this post, you should also hide your directories. People have no business browsing the contents of your server using their browser.

The fix is quite simple for Apache:

sudo nano /etc/apache2/apache2.conf
Look for:
<Directory /var/www/> Options Indexes FollowSymLinks
Then change it to:
<Directory /var/www/> Options -Indexes +FollowSymLinks
sudo service apache2 restart
Check your subfolders if you can browse them via the browser (you shouldn’t be able to)

Source: Vultr

Hide Your Git Directory!

It seems like one of my projects had my git repo for the entire world to see. Great if it was open sourced, but even so, it’s going to be a mess if I don’t close it up.

If you’re using Apache, this should be easy to fix:

sudo nano /etc/apache2/conf-enabled/security.conf
Then look for “DirectoryMatch”. Ctrl + W > type DirectoryMatch > Enter

Uncomment the code and replace so that it looks like this:

<DirectoryMatch "/\.git">
Require all denied
</DirectoryMatch>

sudo service apache2 restart
You can check if it worked by visiting your .git directory in the browser ex. https://example.com/.git/

source: David Egan

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:

Go to the admin area of your site and click Plugins, then click Editor.
Next to “Select plugin to edit:” at the top, choose the plugin you uploaded earlier then click the Select button.
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.
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.
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

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:

Search for Coditor it in the WordPress directory by going to Plugins > Add New.
After installing and activating the plugin, you’ll see a new Coditor option at the left admin menu. Click on it.
At the left panel, choose Theme to edit your theme or Plugin to edit your plugins.
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.
At the upper right are buttons for saving your file, undoing and redoing, and searching the text.
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.

Coding Your WordPress Plugin on the Go Using InstantWP

Since a website is online, then you need to go online to update it, correct?

But isn’t that too cumbersome? You need to connect to your server, download the file, edit it then upload the edited file. After that, you need to check if your changes worked, otherwise you do that whole dance again.

It’s better to just have a copy of your website on your computer and edit it without needing to go online. Not only does it save you a lot of the trouble, you can test all the new plugins and themes you want without breaking your website. And as a bonus, it’s also a backup copy of your live site, in case you need it.

I know what you’re thinking, “Setting up my WordPress site on my computer? Madness! Isn’t that asking for too much for someone who’s not a developer?”

Fortunately, I did find something super simple for installing a WordPress on your local computer. I present: InstantWP!

It’s the simplest way I’ve found to setup a local WordPress on your laptop. Just download the free installer and run it on your computer. Then, you get a website server without all the crazy setup and trial and error. Trust me, it can get complicated setting up locally (and I might write about that in the future).

Here’s how I installed my copy:

Go here and download the installer for your computer. It works with Windows and macOS. The latest release should be at the top. Download the one with “Win” in the name if you’re using Windows, or the one with “macOS” if you’re using a Mac.
The file is around 300MB so it might take up to an hour to download. Might be good to grab something to eat or do some chores while it works (and stay off the computer so it can download faster).
Once you download it, unzip the file and open the ReadMe file included, the one that starts with “ReadMe” and ends in “.html”. It talks about a few things you might need to do to make InstantWP on your computer.
After that, just open “Start-InstantWP” inside the folder, wait for it to load, and you get a nice friendly screen that lets you do everything you need to do with your site. This is what it looks like:

Now that you have InstantWP installed, we need to do a few housekeeping activities before starting.

InstantWP starts with very little RAM, which might affect the performance of your offline site.
1. On the InstantWP screen, click Advanced, then click Edit Config File.
2. Edit the line RAM=268 to be RAM=512 or RAM=1024.
3. Save the file, then Quit and Restart InstantWP.
Click on WordPress Admin to go to your site’s admin area. By the way, the webpage might load a bit slowly at first but that’s normal. I suggest you wait a bit and let the site load up before clicking the button.
You can also add the plugin you made via my previous post. Just go to Plugins > Add New > Upload Plugin, then activate it. Try and see if it work.
Let’s go ahead and update WordPress as well, since InstantWP’s version is a bit old.
1. Click on WordPress Admin in the InstantWP screen.
2. Go to Dashboard, then click the Update Now.
3. Wait for the update to finish. You should see a screen similar to the one below (the latest version as I wrote this was 4.9.1)

That’s it! Some minor changes and a bit of waiting is all you need to get your WordPress site running on your computer.

If you need more info on how to use InstantWP, you can read the user guide, browse the FAQ or check the troubleshooting guide.

Right now, I’m assuming you’re building something from scratch so you don’t have a website yet. If in case you want to copy your live site into your local one, here’s a guide I found that will help you export your site. Note that it’s a bit comprehensive but I’m sure you can tackle it no problem.

Create Content Offers: Autogenerate Content and Collect Emails Easily

What do WordPress site owners really need? I thought about this a lot when I was trying to figure out my first plugin idea. And the thing that came to mind was actually quite simple: they want more engagement.

Previously, creating lots of content was the best way to get more engagement. It might still be. After all, we always go back to our favorite sites because we expect some fresh content waiting for us there.

But creating content is hard and you need to create regularly just to catch people’s attention. At the same time, more and more people are creating content so standing out is getting more difficult.

This kind of content is the passive type though, one where people just sit down and scroll. Maybe they give a like or heart, but the interaction stops there.

What I propose is instead of making passive content, create active content instead. It’s content that people will use and maybe even use often.

Create Something They Will Use Instead

Engagement is all about interaction. The events we remember the most are ones where we were part of the action. So what we need to do is add some interaction in our content.

One of the ways to do that with your existing content is with a simple checklist. Since I personally find guides and lists fascinating, one thing I thought most of them lacked was a handy way to tick off each item on the list. It would help me check off which of the steps I’ve done and what else I need to do.

Say you’re following a guide on how to increase your dopamine levels (that’s the feel-good chemical our body produces to make us productive). You can read the article, say “huh, you learn something new everyday” then immediately forget about it after a minute or so.

If there was a checklist with the article, you could go through each item and discover what else you need to do to boost your dopamine. Maybe you’ll try the rest out later, just to complete the list. It’s a simple interaction but this makes the content way more useful versus a vanilla “how to” article.

So I thought: why not make it easy for WordPress folks to create this checklist? Maybe even build the checklist automatically, just install the plugin and boom! Instant content!

So my plugin Create Content Offers was born.

What’s a Content Offer?

I guess your next question is: what’s a “content offer“? In the most basic sense, a content offer is something you give to your readers in exchange for something, usually an email. For my initial plugin version, the checklist would be the content offer, automatically generated from the headings of your article.

So we’ve solved the first engagement hurdle but it’s better if you can pull the reader back for future posts. So I also added a way for you not just to create a checklist, but to collect emails before you show it to your readers.

You can add them to your mailing list and send them new posts, subscribe them to your newsletter, or send interesting offers later on.

So to sum it up, this plugin:

Creates a content offer automatically for you. It builds a checklist out of your existing blog post’s headings. If there’s enough interest, I might also add ways to automatically generate PDFs, spreadsheets, and more.
Collects emails in exchange for access to the checklist. You can view this list at the admin part of your WordPress site.
Gives you the ability to customize the text and buttons in the form. You can do this while editing the post where you want to add the checklist.

But the other thing I want to figure out is if this plugin would actually be useful to WordPress site owners out there. So I’m releasing the beta version of the plugin here so you can test it out. And yep, it’s free!

Download the Create Content Offers plugin here!

To install the plugin:

Grab the plugin zipped file from the download link above.
In the admin area of your WordPress site, tap on Plugins in the menu at the left.
At the top of the page, tap on Add New, then tap on Upload Plugin, also found at the top of the page.
Tap on the Browse… button and find the zipped file you just download. Tap on Install Now once you’ve added the file.
Wait for the upload to finish and then tap on Activate Plugin.

To add a checklist to a post:

Choose an existing post that has some headings already. That means some of the text is formatted as Heading 1, Heading 2, etc.
Tap the checkbox beside Show Checklist in Post.
If you don’t use Heading 1 in your post, you can choose which heading type will be turned into a checklist. I use Heading 2 myself.
Tap on the Update button and then go to the live blog post to see how it looks. You can always edit the text included later if you don’t want the defaults.
You can see the emails you’ve collected in your Dashboard or when visiting the Content Offer Emails page in your admin menu.

Was this plugin easy to use? Did it help you in any way? Post a comment below with your feedback, email me or send me a message. In particular, I’d like to know:

What’s the #1 feature you need that’s missing in the plugin?
What bugs have you encountered while using the plugin?

Thanks and I hope you can help me improve this plugin so I can help you get more subscribers!

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.

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.

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.

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.
Look for this line:
```
$this->version = $version;
```

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.

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.
After that, open up your site and go to the admin area. Navigate to Plugins > Add New.
Click Upload Plugin at the top of the page, then click on Browse and upload the zip file you made earlier.
Click Install Now and then click Activate Plugin.

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.

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:

Comprehensive guide to how the readme works. This is from WordPress themselves.
Readme generator. Fill out the form, and you’re done!
Readme validator. Upload to check if your file passes or not.
Cheatsheet for Markdown, which is the formatting used for the readme.

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.

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.

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:

Tips for getting your plugin approved, straight from a plugin reviewer himself (also founder of EasyDigitalDownloads and AffiliateWP)
More tips for submitting plugins, from the most active representative (in my opinion) of the WordPress Plugin Review team.
The full WordPress plugin developer FAQ. Yes, I did read the entire thing, thank you very much. 🙂

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!