Select Page

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.

Teaser – Visual Layouts Pro (freetile)

Development has finished on my next plugin … Visual Layouts Pro (Freetile) plugin.

This takes the Freetile jQuery plugin and mashes it up with Filtrify and Twitter Bootstrap to give you an awesome plugin for a responsive, visual layout …
Visual Layouts Pro freetile

 

Key Features of Visual Layouts Pro

  • Tags & Category based filters
  • Show / Hide content
  • Show Excerpt
  • Works on posts, pages
  • Includes Twitter Bootstrap with powerful options for CSS and web design
  • Pagination

Mac OSx replacing MAMP – install and configure MySQL, PHP, Apache

MAMP (Mac, Apache, MySQL, PHP) is the first go to solution for anyone developing anything web based on your Mac. Even more so as Apple removed the easy controls to enable ‘web sharing‘ as it was called in 10.8 Mountain Lion. 

I had wanted to use WP-CLI – which is a set command line tools for WordPress, only that they don’t install / like MAMP. Which means, now is the time to replace MAMP with my own stack.

 

Apache

Apache is installed on your Mac in 10.8 Mountain Lion – it’s just probably not running.

 

Open Terminal and enter the following

httpd -v

The version installed on a Mac is 2.2.22

 

to start it

sudo apachectl start

to stop it

sudo apachectl stop

to restart it

sudo apachectl restart

 

After you’ve started it, just head to http://localhost

Document Root 

By default, the Apache web pages are stored in

/Library/WebServer/Documents

 You’ll want to change this. So follow the linkage or look up Mac osX and VirtualHosts

 

VirtualHosts and VirtualHostX

If you want to have more than one local domain  (live wild) think about having a host for dev.local & staging.local, then you’ll need VirtualHosts.

The easiest app to use is VirtualHostX, then right the Setup Wizard. It’s free for 15 days so that should be long enough to setup your Vhosts.

VirtualHostX

 After that, you can create all the VirtualHosts you want  (something you couldn’t easily do with MAMP ‘lite’). 

 

MySQL

Is a little bit harder – you need to download and install it.

Head to http://dev.mysql.com/downloads/mysql/

Download the Mac version

Open the installer pkg files and run the Installer and when its done double-click on the Pref Pane to install it (In my testing, you don’t need to run the Startup pkg installer if you install the Preference Pane).

Mac MySQL Prefpane

From System Preferences, you can start MySQL and set it to run at boot … do that 🙂

 

Set Root Password

(or MySQL won’t work)

/usr/local/mysql/bin/mysqladmin -u root password 'yourpasswordhere'

 

Fix MySQL Unable to Connect Error

There is a bug in Mac OSx and the MySQL install location is not correctly linked.

You’ll confirm this, if you try to run a WordPress setup so ..

sudo mkdir /var/mysql 
sudo ln -s /tmp/mysql.sock /var/mysql/mysql.sock

That’s fixed — now you can go try to install / setup WordPress or whatever.

 

SequelPro

Now that you have MySQL running, you’ll want to launch SequelPro and create MySQL database.

Remember to use the Root user and the Password you set 🙂 

 Screen Shot 2013 04 21 at 15 04 28

 

PHP

PHP is also on your Mac but not running.

Open Terminal and enter

sudo nano /etc/apache2/httpd.conf

(I prefer Nano – you can use Vi or whatever you prefer)

 Ctrl W to search

Look for php5_module

Remove the Hash # from the start of the line

Ctrl X to Exit

Yes to Save

sudo apachectl restart
 
 
 

Linkage

Setup Apache, PHP and MySQL – http://coolestguyplanettech.com/downtown/install-and-configure-apache-mysql-php-and-phpmyadmin-osx-108-mountain-lion

How to set VirtualHosts in Mac http://coolestguyplanettech.com/downtown/how-set-virtual-hosts-apache-osx-108-mountain-lion

WP-CLI http://wp-cli.org/

Things to do post format with a dual partition Mac OSx #reformatted-my-mac

So I had to do, what I had to do! and reformatted my Mac and now … I’m getting up in running again. I’ve been using Mac for a few years now and before that I’ve been used to running partitioned hard drives – it saves time when you reformat and usually means (touch wood) you can keep your user data safe from your OS.

 

Critical Apps to Install and get up in running in no time  

Immediately after logging in for the first time — I did the following …

  • Update User preferences and point my home folder to the second partition (and reboot) 
  • Download and Install Chrome (then login and all my bookmarks, extensions, etc are syncd)
  • Download and Install Dropbox – point to my Dropbox folder on my other partition (done)
  • Download and install 1Password (yay, all my passwords and product keys are safe)

 

Software Installed from App Store

Now that I have Chrome, Dropbox and 1Password … I can do anything (pretty much)

Open App Store and Login – check for system updates and go away for 30 minutes

Open iTunes – play a song and sync that iDevice

 

Apple Software I couldn’t install from the App Store

I had to dig out the discs for the following — and also the licence keys!

Install Aperture from DVD Image (ahem I had to find the original Aperture v2 DVD and licence key)

Keynote, Pages, Numbers (as it came bundled with a iWorks when I brought this Mac)

I’ve now taken a note of the serial numbers and will try to make an image in case I ever lose the discs.

I’ve not installed Microsoft Office – in the hope that I can use Numbers instead of Excel. Which I can’t really. But so far I’m trying to live with Google Docs instead.

 

3rd Party Software installed from the Web

There is a ton of software I realised was installed from the web. like …

VLC

Onyx

SequelPro

MampPro

Sourcetree

Git

Coda 2

Transmit

Jollys Fast VNC

 

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??

2012 Website Statistics – Content Strategy is not buzz words like SEO

2012 Website Statistics – Content Strategy is not buzz words like SEO

2012 was the biggest year to date for web site visitors – and with good reason! So Thank You to everyone who came, read and left (and came back, again).

55,266 unique visitors clocked up 5.1 million seconds of visit duration but more importantly pages / visit and average visit duration also grew.

Analytics 2012 detail

 

So what happened in 2012?  Search Engine Optimisation (SEO) didn’t work out … but having a content strategy did.

I’ll go into this in another post on another day, but SEO failed … What Google thought I was an expert on, just wasn’t the case. I was getting great traffic for a couple of articles — but nothing that I was consistently writing about.

On the other hand … I setup a sub-domain wordpress.damien.co and started writing regularly about stuff I love. That content strategy is paying off. You can see in 2012, that from July on my weekly uniques has consistently been about 1000 visits per week. The people who are coming (maybe like you reading this) are starting to come back too read other stuff.

Well actually having a content strategy is working out in a way … I still get good visitors for topics like ‘Android Wifi Apps’ – but I’m getting more benefit from visitors reading up on WordPress.

Having a content strategy has also paid off – I’m now making and selling WordPress plugins!

Analytics 2012 com 2011

Most importantly, thanks to Google Analytics, I’ve got a good history now and had great experience in setting up GA tracking for events, campaigns and other bits.