Advanced

Hacking WordPress

This isn’t as dubious as it sounds, but there are some really cool modifications you can make to your WordPress install without actually learning how to code. We will dive into a couple here including:

• Updating the Login Screen for members – this will
• Hiding WordPress (front end) – along with changing the login screen you might also want to disable the admin bar at the top of the screen for logged in users. This can be done within the theme or even easier with a plugin called Custom Admin Bar. You can choose which access level has visibility of the admin bar. Another neat trick which is also a good security practice is to remove some of the tell-tale signs you are using WordPress in the first place from the front end. To do this you can use a paid plugin called “Hide My WP”. It’s $20 and actually covers many great security areas to help secure your site.
• Hiding WordPress (admin end) – if you are building a site for someone who insists on admin access but doesn’t know the first thing about WordPress or coding, it might be a good idea to make some modifications to the backend so they can’t do as much damage. There is a great plugin which pretty much hides the fact that it’s a WordPress install all together. There are a multitude of options to allow or restrict access to almost every option.

Hacking themes (actually – just child themes 🙂

First and foremost, if you are going to make any changes to your themes, please follow this super simple guide to creating and using a Child Theme. If you are using a Framework, there are other options for you below.

Now you have that completed, you are free to make adjustments and not miss out on your theme’s critical updates and security patches.

Depending on what type of setup you are using (I’ll assume you are either using a standard theme – Option 1, or a framework like Genesis – Option 2) there are 2 different ways to go about making minor theme tweaks or even wholesale changes.

Using plugins it is possible to make changes to your .php files and .css files from your site without having to update the actual files. As this is usually a quicker option and definitely safer for first time hackers, we will show you how to do this here. Once you are confident with how to make this sort of change, you will eventually move away from plugins and make the changes directly within the files themselves.

Option 1: For function.php updates, a plugin called “Snippets” is great. It allows you to make code changes as posts, all collected in an easy to use menu. Each saved snippet can then be activated and deactivated with a simple click for your site. For CSS updates there is a CSS Editor that comes with Jetpack. I’ve had mixed results with theme-based sites where the updates within this editor are overwritten by changes in the theme or just don’t show up at all. Many of the good themes will have a Custom CSS option in their customisation menu which is usually much cleaner and more reliable than the Jetpack option.

Option 2: There is an amazing plugin for Genesis called “Genesis Extender“, which collates most of how the whole framework hangs together in a very easy to use collection of editors. You can update your css, functions.php, add javascript code, add widget areas, and loads more. It is the best $39 I’ve spent on a plugin. There is also a built in front-end updater, which allows you to make changes to your theme, layout, colours, etc, live on the page. More on this later.

Hacking plugins and contributing

Early on in my WordPress journey I had created a sales page with a Pricing Table on it. It was basic and it used a free plugin. After finalising the site, I noticed in the admin panel that I had a whole heap of plugins that needed to be updated. WordPress provides a quick tool for updating all plugins via the network update menu option. Not really understanding what the implications of just blindly updating like this, I clicked update-all…everything seemed fine.

The next day I received an email from a customer complaining that the sales page looked all screwy. I went and had a look – woah. It was bad. The table was all out of alignment, the colours had all but disappeared and worst of all – the buy buttons were white, with a white background and white font…which means you couldn’t see them!

A little hunting around and trying to fix this with a few of the CSS hacks that I showed you in the last section and nothing was working. I decided that it had to be the plugin. I took some screenshots and grabbed the version number from the plugins page and headed over to the plugin support page on WordPress.org.

I read through a few comments and realised that it would be much easier for the developer and would make me look a lot more helpful (and smart) if I was able to grab some of the details from INSPECT ELEMENT (as seen above) from Chrome that could be the cause of the problem. So I right clocked on my Buy Now button and went over to the CSS. There was a large greyed out section which seemed to have all of the colours that were in there previously. Hmm…”why is it greyed out?” I asked Google…the response was quite simple “there is a syntax error in the CSS”. Ok.

So I then discovered this little gem and went hunting through the plugin files for the CSS file to validate it.

Oh, the CSS is fine.

Deflated I left the site and closed my laptop. Man, I really thought I had that one nailed. The next day I came back to grab the screenshot of the CSS to send over to the developer thinking this might be enough, but I took one more look at the plugin files.

I had never used PHP before, but when I searched around for syntax checker I found this: JS Fiddle. Basically, it lets you split out all the code from a page and edit it on the fly, much like we did with the CSS above in Chrome. So I grabbed the code from the View Source option in Chrome, added everything to JSFiddle and made some adjustments as it asked me and BAM – it showed me where the problem was. An extra 2 inverted commas in one of the statements. I removed them, re-ran the code and it was fixed!

The answer was staring me in the face and it couldn’t have been so obvious and minor, yet so disruptive to my site. Armed with this knowledge and very chuffed grin, I posted an update to my original post letting the developer know that I had found the problem. This was his reply:

Yep, 6 weeks of WordPress and I am now a community hero!

CSS – the tricky stuff

We covered an intro to CSS in the previous module, here we will get into some more technical aspects and show you how to make those last-mile changes to your site that have been bugging you.

By now you should have found the best place within your install to update your CSS.

If you use Chrome as your web browser, there is a neat little tool that is an absolute miracle when it comes to fixing those tricky little CSS look and feel items on your sites. Go to your site now and right-click on the page. The option at the bottom is call “Inspect Element”. Click it and you will get a status window open up on the bottom of the page like this:

First things first, right-click on something like a coloured button or section that has a “background-color” associated with it. Now go to the Styles section on the bottom right and find that coloured item. You can click on the colour and change it, right there on the page and see the change on the site straight away. It’s not a saved change, you are only updating the static page that is in your browser, if you refresh the page it will return back to the original.

Something that you will probably use more often than not is either removing or adding white space between elements. Many themes have minimal, impacting pictures to make the site look good in the demo but when you try to put your own images in there things just don’t seem to line up. If you select an image and see an orange, yellow, or green gap around it, this will indicate it has either a border, margin, or padding like in the image here.

Within CSS there is a concept called “specificity” (say that 10 times without spitting!) It is one of the most difficult concepts to grasp and we won’t be going into it here apart from covering how you can conquer it and get those last few stubborn changes to your sites. The rule of thumb here, you need to try and get as close to the actual element id itself to make sure the change will be applied. Here is a quick example:

!important – not always bad coding: If you still can’t figure out how to make the change stick, don’t worry there is a hack. If you take the following:

“.button {background-color:green;}” and you want to change the button colour to RED, you would normally say:

“.button {background-color:red;}” and be done with it yeah? But what if you have made this change in your editor and it’s not sticking? Here you can invoke the power of important. Not to be used lightly, this attribute will pretty much force the browser to make this change. You use it like this:

“.button {background-color:red !important;}” – that will make the stupid button red, no questions!

The White Screen of Death (WSOD) and how to fix it

If you have tried any of these items above you would no doubt have reached a page that looks a lot like this…
Never fear, 3 quick checks and you should have learned your lesson (maybe)

1. Disable plugins if that doesn’t fix it
2. Change to a default or parent theme and if that doesn’t help
3. Recreate your .htaccess file. To do this

Frameworks – the new world order

There are a few Frameworks coming online now as this model is good for resellers and theme designers but for the framework owners it’s like creating their own ecosystem. Thesis from DIY Themes and Genesis from Studiopress are the 2 front-runners at the moment. Not for any reason other than a great introduction to them from a few sites and a great deal on the package, we are currently Raving Fans of Studiopress.

What is a Framework?

You can think of frameworks like a car. WordPress is the engine running under the hood, the Framework is the cars’ body – the structure holding it all together, the Child Theme is the paintwork – the spoilers and fenders, the bluetooth connectivity and automated locks.

Normally a theme is customised to look and function a certain way. This means hard-coding php and css, baking in these changes and making it trickier for you to make the site do exactly what you want it to. Not with a framework.

The framework sits comfortably on top of the core functionality of WordPress, enhancing it if you will, pulling all the security, SEO, and core foundations of your site into a streamlined, easy to manage area.

The child theme is then the pure design element of your site and all frameworks have an extensive list of these made by the framework’s developers. As the framework is so easy to work with and reliably coded, third party developers are flocking to design child themes for them as well. There is no shortage of great design and layouts for you to choose from.

Enter, Genesis:

Let’s take a quick look at the Genesis framework.

This site is built using the Streamline Pro child theme on Genesis. There are only a handful of changes, but look at the difference!

Let’s take a look at those changes and how easy the Genesis Framework is to work with.

Our Genesis Goodie-Bag

As we move away from 232132324 plugins and get back to keeping everything simple, we have now simplified back to these 3 additions on our sites:

1. Genesis Simple Edits – tiny little plugin that makes tweaking the simple bits of your site, like the Footer info, just too easy. You could use a snippet and copy this around to each of your sites, modifying it to suite each theme, or you could just activate this plugin and copy and paste..
2. Genesis 404 Pages – customising the experience for the user when they stumble “off-the-grid” on your sites is critical to gracefully recovering from a goes a long way to ensuring a visitor doesn’t think your site has been hacked or is just plain shoddy. This simple plugin gives you a post-style editing layout, complete with page title, that allows you to put content that let’s the user know it’s not their fault and you are all over the problem. You can even use it as an opportunity for interaction – including a mail form and ask them to let you know you found the page.
3. Genesis Extender from Cobalt Apps – We will go into this absolute masterpiece in the next section below, for now think of Genesis Extender as the swiss-army knife for your framework. You can pretty much do anything at all to your site – Edit php, modify CSS, add Javascript, the list goes on, all in once place and all safely and reliably.

The other menu options here come standard with Genesis including SEO, which is a core extension of the Genesis framework.

Genesis Extender – Super Awesomeness!

While working on a few sites and making similar snippet and CSS changes across them, a common phrase kept appearing on the blogs and in comments on developer sites – “if you use genesis extender..” so doing what everyone does these days when they need an instant answer I Googled the it.

This quickly turned up this site – Genesis Extender and within 3 minutes of looking at the demo and FAQ I was hooked. Everything I was spending time and effort on doing to my sites could be done in one place, so much easier and more reliably. It just worked.

 

WordPress Security

• Plugins – no go (eg Hosts vs User lockout)
• .htaccess
• Backups
• Changing Your Admin User
• Hiding Your WordPress login and admin pages

Automation

Automating your website (and by extension your business) is the holy grail. Not exactly the easiest task but thankfully there are some tools available to help you get there.

If you are writing content, managing email subscriber lists, sending out marketing newsletters, or selling products getting these processes on autopilot isn’t just a pipedream – it’s a necessity.

When I first started my blog, everything was seat-of-your-pants stuff. Writing, designing, creating images, pulling together the post, finding related articles and social media to push to, tweeting, emailing, responding…aargh! All this just for one post!! It took a lot of time and each time it was the same, totally unsustainable. I remember thinking to myself that people who blog regularly are either superhuman or they have secret teams of people doing all this for them. (Turns out both are true, but we will get into that in another course)

Let’s start with email, still the number one in your online business arsenal. So you have a post, you have set up your Mailchimp opt-ins and optimised with SumoMe and are growing your subscriber lists. You might also have a handful (or millions) of Twitter followers too. Now, how do you get that post into a Tweet and out to your email list without having to create campaigns, login to Twitter, copy out all the details and work out what wording you are going to use for each? Clear your schedule for the next 2 hours and get to work? No, there is an easier way.

We are going to need 2 things here for this – Autochimp (if you use Mailchimp) and Jetpack. If you don’t like using Jetpack, there are a stack of Twitter integration plugins. Let us know in the comments below if you need help finding the best one to suit your needs.

1. Autochimp – allows you to add new subscribers automatically to your lists and it’s best feature allows you to create emails from your posts, also automatically. Setup is quite simple:
   • Install and activate the plugin. The Autochimp options are under the Settings menu
   • Sync with Mailchimp by opening up the API Key tab and copying in your API key and hitting the Save API Key button.
   • You can then select the Mailing Lists tab and choose which list you want to use as a default
   • Next you need to set a campaign up in Mailchimp, which is where you will configure all the template options for the emails. Select RSS Feed type, which is automatically configured to work best with WordPress.
   • This campaign will now appear in the Campaigns list. The option I found most useful for sending out compelling emails but still encouraging people back to your site for the full article is to send an excerpt. If you trust your editing and want to go Fully-Auto you can select the first option to automatically send the campaign as soon as your post is published.
2. Jetpack – Activating the Publicize add-on to Jepack will enable a Sharing option in the settings menu. This allows you to connect your Google Plus and Twitter accounts to your site and you can even set it to Tweet out your posts once you publish. The other cool feature of this is the additions of sharing buttons which you can put on your posts and let your readers do the social marketing for you.

The best part of all this – once you have it set up, you never have to worry about these tasks again – create a post, schedule your publish, go away for the weekend completely disconnected – it will do everything for you automagically!! Wonderful.

 

Mobile Management

Running a website might sound like a really time-consuming and difficult task and it can be, unless you have a solid system to help you. Following our suggestions on keeping it simple and not installing too many plugins or unsupported add-ons or themes can go a long way to ensuring you stay out of trouble and spend as little time as possible on maintaining your site.

The other great time saving and convenient benefits to running your own site and using the mobile-friendly WordPress platforms means you can literally manage your site from anywhere. On a recent trip to Bali with the family, I checked into Wifi while the kids were asleep and found some comments left on one of my sites. I was able to reply from the native WordPress app in a matter of seconds, no logging in, no selecting profiles, no browsers or urls, just click on the notification, type my response and send – bam! It’s on my site and my audience is happy.

Here is my setup of must-have tools on my phone. I keep them all on a page so it’s easier to find them, but you can arrange them however you like. The four that are stacked into a group are listed in the section below. (As we aren’t talking about Windows servers here let’s leave out VNC for now.)

The following list of apps are for Android and the setup will cover this type of device as well. We have scouted around and also found a list of iPhone equivalent apps for doing the same tasks, which are listed below also.

ANDROID:

• WordPress App – the folks at WordPress.org have created a great app
• AWS Cloud Hub app to restart instance
• ConnectBot for SSH into instance
• AndFTP for file management

APPLE (iPHONE):

• WordPress App – yes, its available here from the iTunes store
• AWS Concole – to administer your instance
• Cathode $4.99 or Prompt $7.00 to SSH into instance
• CodeAnywhere for file management (includes a great code editing app too)

WordPress for Android: This is a must for anyone running a WordPress site. The core of the app is aimed at enabling quick blogging from any device.

You can access multiple sites from the app using the drop down list as seen here. When you select Pages and open up a page, you will see the VISUAL version of the page. You have options to add a new page (the plus symbol at the top), along with sharing, comments, and an EDIT (pencil) function.

Editing in the front end isn’t as intuitive as you might like, but it gets the job done for minor wording, spelling updates etc. Once you hit edit you will see the TEXT version of the editor (i.e. you see the html markup version of the page).

The real power of this app comes from the Admin side, which you access from the Settings menu.

Once you access the settings you will see a list of all your sites. Select one.

Now you will see your login details for your site along with the View Admin option.

Once you log into the Admin section you should see some more familiar elements.

Select the menu option on the top left and you will see all the normal WordPress menu options that you have in your admin panel via a web browser.

 

AWS Cloud Hub: Being hacked or suffering an apache or WordPress meltdown shouldn’t be a common experience at all, but when it does happen restarting your instance can get you right back on your feet. By far the best function of this app – reboot instance. It takes about 20 minutes to set this up and only around 5 seconds to reboot an instance once it is done, which is great news if you need to get your site back up fast. Almost all EC2 functions are available on this app natively so it’s great for managing your instances on the go.

ConnectBot: If like many of us you have a day job, you will probably find that if you try to SSH into your server from your work you will get a “network timed out” error. This is because many corporate environments have locked down the pathway that SSH uses (namely port:22). This is actually a good thing and we certainly don’t condone using company time to run your side-business! Having said that, fixing up a crashed site during your lunchtime is your business..so now you can do that from your phone.

AndFTP: Like above, many sites will block FTP traffic, so being able to check your .htaccess file or wp-config.php to make a quick tweak can save you loads of time. You can also use it to upload a new plugin or theme from a third party site or even get that file uploaded that is over your site’s upload limit.

 

The other apps I use to manage my websites too, here is a quick summary:

1. Evernote – thats the big widget at the top showing POST tags for the blog posts I am writing for Lifeonauto.com. It’s my go to app for ideas, writing, notes, todo’s, it pretty much runs my life and it’s on every device
2. Skitch – by the guys at Evernote, this is the tool I used to create all the markup on the images you see in this website. The coloured arrows and writing etc, all done on Skitch, many straight from my phone. Awesome little tool.
3. Google Apps Admin (the spanner) – this allows me to configure my webmaster, email, and Google Apps administration, straight from my phone. Need to add an email address on the go like “newidea@yourdomain.com” to capture an email from new leads, 10 seconds and you are live.
4. Analytics is Google Analytics – this is quite a useful tool and gives you realtime access to how your traffic and site is performing. You can set up alerts based on your reports and goals.
5. Control Pan. is a CPanel app which I use to connect to my WPEngine site’s cpanel. This does most of the major functions out of the box. Neat and a must have if you are using a shared hosting service instead of the tools in the above section.
6. Australia Post is on there for our shipping business as it’s got some great features for anyone who ships physical products around and from Australia.
7. Mailchimp is the email service I use for all my businesses at the moment and their app is great for checking your list stats and campaign reports on the go.
8. The others are a collection of research tools I use to aggregate information and search for great products, reviews, and tips that I can share. Pro Tip: If like me you hate the distraction of Facebook but are part of some great online communities based there, you can integrate Flipboard (and many other news apps) to your profile and just have your Facebook Group feed pumped straight into a really easy to read format. I rarely need to log in to FB at all anymore.

What apps do you use to maintain your sites and save yourself time? Leave a comment or suggestion below and we will update our recommendations.