Select Page

Messing with your Head – when to use WordPress template parts vs JavaScript

Here I am … I’m messing with your head. I wanted to see how easy it is to get my Isotope Visual Layouts plugin for WordPress to change your your homepage. Actually it was too easy and the result is destruction and chaos.

No-No – I’m Never Going to Mess with your Head

First thing to note – Never do anything with a plugin that ‘you’ the User doesn’t expect. That’s bad bad karma. So over-riding your theme is a Big No-No. 

Isotope js mess

 

Template Parts or JavaScript

While this can all be done in JavaScript it is wrong to do it this way. There is nothing graceful here – In the image above, I used JS to manipulate the CSS attributes for width and height. This created a table based grid layout which worked with Isotope.js

The key learning here is you need to use WordPress Template Parts and create a new layout which you can then apply a whole range of CSS styles and attributes too.

 

Even better – I’ll stick with creating my plugin and use short codes so that you can add Isotope Visual Layouts where you want.

 

What do you think? Template-parts or invasive JavaScript?

HOW TO Get Started with WordPress Multisite – build it in 5 minutes

WordPress Multisite or WordPress Network or WPMU – any of these refer to WordPress when it has been setup as a network of blogs or websites.

I’ve been using WordPress Multisite for about 3 years now – many more famous WordPress people have written about setting up WordPress Multisite, but this is my take on it.

I want to show you that it is easy to get started with WordPress Multisite in fact you can have your network of WordPress sites up in under 5 minutes (supposing you already have WordPress installed).

 

How to Enable WordPress Multisite

WP-Config – Enable Multisite

Open your favorite editor and then open wp-config.php which is in the root of your WordPress directory.

Insert these 2 lines in your wp-config.php file, save the file.

Wp_config multisite

[php]
/* Multisite */
define(‘WP_ALLOW_MULTISITE’, true);
[/php]

WordPress Admin – Network Settings

Login to WordPress Admin and turn off all your plugins first … then go to the link for Network Setup.

Follow the instructions carefully and edit your wp-config.php again … and also edit your .htaccess file.

Then you’re all done.

Network Setup ‹ Network Admin WordPress

WP-Config – Additional Settings

Add these extra changes to wp-config.php

[php]
define(‘MULTISITE’, true);
define(‘SUBDOMAIN_INSTALL’, true);
define(‘DOMAIN_CURRENT_SITE’, ‘http://your_website.com’);
define(‘PATH_CURRENT_SITE’, ‘/’);
define(‘SITE_ID_CURRENT_SITE’, 1);
define(‘BLOG_ID_CURRENT_SITE’, 1);
[/php]

If you wanted, you can delete the 2 lines you added before – but this will hide the Network Settings menu links.

.htaccess – Multisite Rewrite Rules

Add these to your .htaccess file, replacing all the existing WordPress rules. If you can’t save the .htaccess file, or you can’t access wp-admin after making these changes, then check your permissions on the file or check with your ISP that Permissions are set properly including Allow Overrides=On for your virtualhost file.

[php]
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ – [L]

# uploaded files
RewriteRule ^files/(.+) wp-includes/ms-files.php?file=$1 [L]

# add a trailing slash to /wp-admin
RewriteRule ^wp-admin$ wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ – [L]
RewriteRule ^(wp-(content|admin|includes).*) $1 [L]
RewriteRule ^(.*.php)$ $1 [L]
RewriteRule . index.php [L]

[/php]

Finished

Once you’ve saved both the WP-Config.php and .htaccess files – then click the link to Log back in.

You’re all done here … Now you can go to the Network Settings Admin page and setup your new WordPress Multisite.

Network Settings Network Admin WordPress

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.

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 🙂

 

 

 

How to disable Jetpack WordPress plugins

Enabling and Disabling Jetpack for WordPress individual plugins presented a bit of a challenge recently. Not having used Jetpack before, I thought it time to try out this collection of plugins developed and maintained by Automattic over the past 4 weeks.

I’ve discovered that Jetpack is a feature rich collection of plugins but I seriously doubled-up on plugins doing the same job. I didn’t need Google Analytics as well as WordPress Stats. Another concern is that a number of these plugins are activated by default .. so I really wanted to get them turned off.

 

 

How to admin your Jetpack Plugins

With Jetpack enabled (from Admin > Plugins ), you’ll now have a new Jetpack menu item.

Click it and see the list of plugins

 Jetpack ‹ Damien Saunders — WordPress

If a plugin is not active, just click on the blue box to Activate it.

Jetpack ‹ Damien Saunders — Activate

Deactivate Jetpack Plugin

If a plugin is active, it’s options are Learn More and Configure.

Click on Learn More …

Jetpack ‹ Damien Saunders — Learnmore

Now the Plugin description window will expand and the button next to Learn More — will change to Deactivate.

Jetpack ‹ Damien Saunders — Deactivate

Click on Deactivate

All done 🙂