Select Page

Git: How to add a submodule in the root of your project – Try Git SubTree instead

This is just a short post and the title says it all … I’ve wanted add submodules to a Git repository but you get an error if you try.  So how do you add a submodule to your root folder in your Git project?  Easy — Git Subtree Merge is what you need.

Add your 2nd Git Project as a Remote

Actually, you start by adding a git remote with the source being the git project you want to pull in.

Git Remote SourceTree

The you do a pull from your Remote … and merge / diff any of the files

Gite Remote Merge

Now you have your second project added in the root of your main project 🙂

 

So .. go to your second project .. make a change and commit and push it  … then go back to your first project and you’ll see the remote has an update 🙂

 

 

 

 

Linkage

Git Subtree Merge on Git SCM

How to integrate your own Isotope jQuery plugin with your WordPress

I was recently asked if it was easy to integrate Isotope jQuery plugin into a WordPress website. It’s not uncomplicated to add isotope.js to your website – it’s just not as easy as linking a script to your header.

2 Ways to add Isotope jQuery Plugin to WordPress

As always, there are (at least) 2 ways to achieve this

  1. Create a page template for the purpose – with all the code you want
  2. Add the code to your themes function.php file and then create a page template

How to integrate Isotope jQuery with WordPress

There’s probably hundreds of tuts on the topic of integrating Isotope with WordPress and this is ‘kind of’ mine. In mid 2012 I launched my first Isotope jQuery plugin for WordPress … well it wasn’t a plugin. It was a page template you had to copy into your theme folder.

Isotope jQuery for WordPress page template

The page template and the instructions for it are still on my website … A lot of developers frown on the page template approach as novice coders will hardcode the js and CSS into the page template. Worse, the page template is stuck with your theme … so if you delete your theme, your isotope page will stop working as soon as you delete that theme folder.

Isotope jQuery for WordPress plugin

Towards the end of 2012, I launched my first WordPress plugin for Isotope — which was promptly pulled from WordPress plugin repo because the Isotope jQuery is not open source. So, if you are doing this at home, then be honest and go pay David / Metafizzy for his hard work and get a licence.

… and so the best approach is the function.php fileIf you open your theme folder then edit the file functions.php … It’s probably a blank file or includes code from whomever wrote your theme

You could then start to move code from my dbc_isotope.php file into the functions.php.

Functions you need to have are …

  1. function to register and enqueue the isotope.js
  2. function to register and enqueue the twitter bootstrap CSS (if you want) …
  3. You’d then create your own script / function to hook the CSS attributes to the isotope.js
  4. You’d then have to add a conditional function to determine what page templates will get the isotope treatment      … Look up WordPress conditionals like is_home or is_archive
  5. Now you could view your website to check that isotope.js is being called and view source to check that the js script is being printed in the footer not header .. Isotope.js like a lot of jQuery can’t be called in your header.php page template.

Finally then, you’d modify your existing theme templates or create a new page template to make it all work the way you want.

WordPress Security – protect your wp-admin with this quick .htaccess trick

WordPress is under going an attack by a swarm of Zombies – and they are after any site with an Admin user account. Securing WordPress is easy and you can do two things to protect your website and yourself.

1. Change and then delete your Admin account (if you haven’t already)

2. Only allow access to WordPress /wp-admin by your IP address

Of course, you should also have a backup strategy — and so why not setup my plugin DBC Backup 2 to do the hard work. It’s free and can run on a schedule.

I originally installed a plugin called Limit Login Attempts – which is grand. IP addresses automatically get blocked, but as you can see … it’s not stopping the brute force attacks. This is why your .htaccess is your shield and best protection.

Limit Login Attempts ‹ Damien Saunders — WordPress

Think of your WordPress website as a little application .. in a big, bad, ugly world … and your .htaccess file is your Hero and Knight .. who’ll go out and take on anyone.

Restrict access to WP-Admin to only your IP

As you’ve probably figured out, if you’re not logged in to WordPress, then you only need  to go to http://yourdomain.com/wp-admin to login.  Once logged in, your Admin pages all get accessed from here. So protecting your /wp-admin directory is excellent

Doing this will also stop brute force hackers as their IP address will get blocked … by the server!

[php]
# Limit logins and admin by IP
# this goes in the /admin folder NOT root folder .htaccess
<Limit GET POST PUT>
order deny,allow
deny from all
allow from 12.34.56.78
</Limit>
[/php]

Allow users to access Ajax

If you’re running an ecommerce site, or your themes or plugins are using Ajax, chances are that you’re using admin-ajax.php, a file in the /wp-admin folder. You need to allow everyone to access this file.

So here is the full content for your .htaccess file that allows only you to login and everyone can still use the Ajax.

[php]
# Limit logins and admin by IP
# this goes in the /admin folder NOT root folder .htaccess
<Limit GET POST PUT>
order deny,allow
deny from all
allow from 12.34.56.78
</Limit>
<Files admin-ajax.php>
Order allow,deny
Allow from all
Satisfy any
</Files>
[/php]

Hints … iPad’s & Smartphones
You usually cant control your IP address on your mobile phone and some iOS / Android apps won’t work if you have restriction to IP Address in place. But then, what’s the price of security??

Differences between a plugin and a theme

In WordPress, as with many things, there are two ways to add features and customise your website, either with themes (php template files) or plugins.  There are multiple threads about what’s the difference between a theme and a plugin. A plugin ‘should not’ change your website design / look and feel … But a theme can do everything a plugin does (including installing other plugins). 

Difference between a plugin and a theme

To make things sound simple … Primarily, a plugin gives you the user, fine control via the shortcode as to when my plugin function is activated, and of course you can just turn off the plugin at any time.  You can’t do that with a theme.

So what is a plugin that includes design & HTML elements?

My WordPress plugins fall into what I’d like to call a ‘middle ground’ … I don’t create plugins that mean you need to add code to your theme and page templates.  … But I do include jQuery, HTML & CSS in my plugins. I deliberately wanted to make plugins that add to your site without the need to change your theme. For many people I speak too, they love their theme, they just want added features.

It is possible, to develop a plugin which moves page templates from the plugin into your theme folder – but it does become difficult to maintain these – what happens if you tried to change your theme? The plugin would break 🙁

 

WordPress themes that include plugins

A few WordPress theme developers are now including default plugins which get installed when the theme gets installed. This sounds like a good idea, because

1. The developer can add more features without coding by using existing plugins

2. The user should be able to turn off plugins they don’t want

3. The developer can separate the design from the ‘code’

Actually, the last point is not true at all … the Developer wants to install plugins to include their functionality in the theme they are designing. So in away, the developer is just adding prerequisites before the theme can be used.

 

WordPress plugins are not dependent on any theme

The key benefit of a plugin, is building something independent, which can run on any number of themes. In my experience, you have the potential of getting all WordPress users to use your plugin (Hello Dolly, anyone?) – but you’re less likely to convince someone to change their theme as easily.

Aside from that, WordPress plugins can be just 2 files in a folder – the main plugin.php and its readme.txt file … a theme is likely to have 20 – 30 files. This also gives a bit of an indication about testing and a plugin vs testing a theme.

 

So i’ll carry making plugins for now 🙂

 

 

 

Custom Images in WordPress – Getting your own thumbnail

In WordPress, images are automatically re-saved in different sizes like creating a thumbnail. But what happens if you want to use your own image? or want a different size?

WordPress default image sizes

The standard WordPress image sizes are:

  • Thumbnail (no more than 150px wide)
  • Medium (no more than 300px)
  • Large

These basically are crops and the size (width) is based on the aspect ratio. So you can’t always guarantee that your thumbnail will be exactly 150px x 150px.

How to get your image thumbnail

In my plugins, I use the standard WordPress image sizes like this:

Get the standard thumbnail
get_the_post_thumbnail($id, 'thumbnail', array('class' => 'dsimage'))
Get a custom image of 200×200 px
But you can tell WordPress to give you your own image size like this
get_the_post_thumbnail($id, array(200,200), array('class' => 'dsimage'))

Note: each image will also get a custom class added called dsimage … this means you can style it.

Managing a WordPress plugin with SVN and Git

I’m not trying to torture myself — which is why for the past 18 months managing my plugins in the WordPress SVN repository has been separated from my development work which is all saved in Git (Bitbucket to be totally honest).

The time has come to find out just what ‘git svn‘ is all about and see if I can make it work!  I’ve yet to become a master or ninja of Git .. but thanks to persistence on my part in setting up continuous integration with Jenkins and automated testing with Selenium I’m getting to know Git more.

How to manage a Git SVN WordPress Plugin Repo

Get Ready — Migrating away from Subversion

You have to assume you already have a WordPress SVN plugin repo … otherwise what are you reading this for 🙂

It doesn’t matter if you use Bitbucket, Github or something else. Essentially we are going to setup a Git repo on your local machine, checkout the code from WordPress SVN and then pull in your code from Bitbucket.

This is going to use my WordPress plugin DBC-Backup 2 so you just need to replace it with your plugin name.

SVN WordPress Plugin Log and History

We need to find the earliest commit on the WordPress SVN repo for your plugin so that we don’t end up spending days checking out all the code from SVN.

Open Terminal or your CLI …

svn log http://plugins.svn.wordpress.org/dbc-backup-2

(hint: your WordPress Plugin SVN URL should look like mine, except with your plugin name)

Depending on how much you have used your SVN repo, this could take awhile … but you’ll get a list of all your commits

What you are looking for is the 1st commit like this:

------------------------------------------------------------------------
r570197 | plugin-master | 2012-07-10 18:57:59 +0100 (Tue, 10 Jul 2012) | 1 line
adding dbc-backup-2 by damiensaunders
------------------------------------------------------------------------

SVN Log

GIT SVN Clone

Now navigate to where you want your plugin repo on your local machine (hint all my plugins reside inside the wp-content/plugins folder).

git svn clone -s -r570197 http://plugins.svn.wordpress.org/dbc-backup-2

-s = The SVN repo is in standard layout (trunk, branch, tags)
-r = start from revision

Git SVN Clone

Hint: don’t do this without a revision, or you could be waiting days as your local machine scours the whole of the WordPress Plugin SVN repo.

I tried using

git svn clone -s -rxxxxxx --no-minimize-url

but that ended up generating an error so I don’t use that switch

Now you just need to change directory and fetch everything from your SVN repo like this:

cd plugin-name/
git svn fetch

What this is doing is getting all commits starting from revision r570197 when my plugin was first created.

Even starting from the revision, this takes a bit of time (20 – 30 mins was enough for my plugin). The screen will start filling up with info on each file if it was A(dded) or M(edified).

When its done, you’ll have a new folder on your local machine with all your SVN contents (except no Tag or Branch folders and no ‘assets’ folder).

Add Bitbucket to your new Git SVN Repo

This way you can start to pull down your code (if it already exists in Git).

git remote add origin git@bitbucket.org:damien1/dbc-backup.git

Hint: you can use the same command for Github, etc.

Git SVN add remote

Git Rebase

We’ll do a bit of a clean up and check

git svn rebase

This should be quick … we’ve not done any local changes yet and hopefully no-one else committed to WordPress SVN 🙂

Merge Git and WordPress SVN

This is the powerful command which does a lot of good work

git pull –rebase origin master

Git SVN Pull

What will happen is that Git will pull everything from your Git remote that we added (called origin) and it start to match and check your SVN. It’s very likely you’ll have merge conflicts and will need to resolve them … which is easy to fix!

Git SVN Pull Err

If you don’t have any merge errors you’re a Saint!

If you do have errors — then its time to launch your fav Git app and do some visual diff / detective work.

Bitbucket and SourceTree

I’m a fan of a SourceTree and use it for most of my work — my Git friends tell me I should do more from the CLI, but thats never going to happen. SourceTree does work with Github too.

So now you can open SourceTree and just add a new Repo from the local working copy.

Git SVN SourceTree Add

SourceTree

Now you’re done … you can go about your dev work and safely use Git to commit to Origin

Remember to not commit often to SVN as it will affect your trunk for one thing!

SourceTree Git

Bitbucket — SourceTree SVN Fail?

SourceTree has an option to clone from SVN. I thought I’d be smart and try to clone from WordPress SVN repository for my plugin. But it failed me.

Further Reading

How to properly use Git with WordPress.org Subversion