Browsed by
Tag: wordpress

WordPress Debugging: Optimising and making slow instances run faster

WordPress Debugging: Optimising and making slow instances run faster

I have a client whose WordPress site was compromised in the past and I managed to make some huge improvements by some use of a simple plugin – P3 Profiler.

It was very easy to install and setup (I had to add a profiles directory to the wp-content/uploads directory and also make sure that the Media links directory was correct – I was testing on a local version so needed to update this).

After running the scan I could see that there were clearly some slow plugins working – mainly a re-captcha plugin. I decided it was probably better to have the site running faster than have this in place, and I could always look for another solution further down the line if there was too much spam on the forms.

I also played around with a lot of the theme’s settings. In my case “Brooklyn” that had a progress bar load on every page which simply wasn’t needed and slowed things down. Removing these slow unneeded plugins and updating the theme options makes the site run a lot quicker.

We also had issues with a virus that had got into the site. The best way to get rid of it was to install and Anti-Malware plugin (Anti-Malware from GOTMLS.NET) and run a scan to simply check for compromised files and remove them automatically or manually.

I’m learning a lot about how to keep WordPress clean and fast, and these tips should help you too!

Creating a WordPress Theme from Scratch: Adding Menus

Creating a WordPress Theme from Scratch: Adding Menus

As discussed in previous post, functions.php is automatically included in the processing of a theme. This is therefore the best place to add default settings that you want to a theme, as well as helper functions.

To make sure that a function is called on the initialisation of a theme you should use the following in the functions.php file:

function add_menus(){
// Do Stuff Here
}
add_action( ‘init’, ‘add_menus’ );

In order to register the menus for your theme you need to use: register_nav_menus with an array of ‘slugs’=>’descriptions’:

register_nav_menus(
array(
‘main_nav’ => ‘The Main Menu’,
‘footer_nav’ => ‘The Footer Menu’,
)
);

This will do two things.

1) It will add an ability to edit menus on the theme once activated:

Adding Theme Settings

 

It will also add all the menus that you have specified to the list of possible menus that you can use:
Menus of a Theme

 

Now to actually display the appropriate menu you just need to call wp_nav_menu(‘slug’).

So our example would be wp_nav_menu(‘main_nav’); or wp_nav_menu(‘footer_nav’);

This will print out whatever menu you have in those drop downs above.

However if one isn’t selected it seems to still show the menu with Home and About. So I created a wrapper in my functions.php as so:

function get_menu($menu){
$locations = get_nav_menu_locations();
if ($locations[$menu]){
wp_nav_menu(array(‘theme_location’=>$menu));
}
}

Now I simply call get_menu(‘main_nav’); and it will either show nothing if the menu is blank or it will be the actual menu selected.

That is it for menus for now. Remember to check how WordPress outputs the menus and change the CSS to suit how you want it to. (e.g. by default it uses menu-top-menu as the class). Or you can use a custom class  when calling wp_nav_menu():

wp_nav_menu( array( 'theme_location' => 'extra-menu', 'container_class' => 'my_extra_menu_class' ) );
Creating a WordPress Theme from Scratch: Getting Started

Creating a WordPress Theme from Scratch: Getting Started

There are actually only two files that you need to get a basic theme up and running: index.php and style.css. If you add these to a new theme folder (wp-content/themes/new-theme-dir/) then you can choose your theme from the dashboard (Appearance->Themes):

New blank theme

 

To populate this data with the details of your theme, you need to create an initial comment in the style.css file like so (I called my theme Raul just because…):

/*
Theme Name: Raul
Theme URI: http://www.dezco.co.uk/
Description: A nice clean news looking design.
Author: Robert Desmond
Author URI: http://www.dezco.co.uk/
Version: 1.0
Tags: responsive, white
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Detailed Theme

To add a screenshot of how you want your theme to look you simply need to add a file called screenshot.png to your theme directory (dimensions 600×450). (I took a picture of my drawing on paper until I would finally get a real screenshot!)

Updated Screenshot

There you go! You now have a theme that you can activate although you are probably a fair way from making it look good!

Next steps: Structure of a Theme…

Facebook Like Button: Add it to your WordPress or other Website

Facebook Like Button: Add it to your WordPress or other Website

A nice thing to have on each of your blog posts or web pages is a like button from Facebook which will allow users to like individual posts. This will help you gauge how people have received each post in comparison to others.

Facebook Like

With the like button, there is a nice feature to prompt the user to share it to their feed. This will exposure your post to more people (you should be able to try it above – you can always un-like and un-share it too!).

The code is very simple to add, but it is code, so it looks scary!

The latest code at the time of writing is here. It requires that some Javascript be added on the page and also a “div” (read division or section) where the like button will actually go.

There are a few different parameters (and you should play around with them); but for the purpose of getting the current page (and hence post) leave the URL to Like blank. Alternatively if you want people to just like your Facebook page then put that in the top box. Then use the settings you want (you get a nice preview of what it will look like in the top right too):

Like Settings

Hitting “Get Code” gives you potentially a scary looking dialog box. This contains the Javascript I mentioned at the top and the “div” where the like button should go.

Like Code

Next steps:

In WordPress go to Appearance->Editor.

Don’t be scared!

You will now need to find the page on the right hand side which has the template for a post. Usually called “post” or “content” but each theme has it’s nice intricacies. If you are not sure then perhaps add the number “1” to the very beginning of the file and save your changes – refreshing the site will show that “1” and you can check it is the correct page.

For my current theme it is is in “content.php”:

Content Php EditorAt the top of this file (for simplicity), before any other text, add the Javascript section as above.

For me I wanted to put the like at the top of the post below the title (you could put it at the bottom of the post too?!). So I found where title was on the page and simply pasted the “div” code a line below it.

Div Like Below Title

Hitting save changes will automatically add it to the page and will immediately update the site. Check back on the post page to see if and where it has got to and play around with where it is as it isn’t an exact science! You are unlikely to break anything – but if you are playing around a lot then I suggest backing up the file before doing anything you are unsure about (copy it all into notepad or textpad).

Hope this helps those out there! I may even create a widget that does this automatically – but I’ll save that for a rainy day…

p.s. One thing worth mentioning is that if you update your theme then you might lose the button – you can always add it back in because it was simple though – right?!

Setting up a WordPress Blog Website (live and staging/testing versions)

Setting up a WordPress Blog Website (live and staging/testing versions)

I wanted to document the “proper” way to setup a WordPress blog on your server with a decent staging/test server.

To start off it is probably worth mentioning why WordPress is a great system to use. It is probably one of the oldest but continually updated pieces of software out there for blogs. Not only does it work well with blogs and dynamic websites but it can be used to create a static set of pages in a very easy way. There are a few pitfalls with some of the plugins that don’t seem to just work – but hey that’s what hacking away at them for hours is for right?!

First of all you can get a free wordpress blog, fully hosted at wordpress.com which is nice and easy to setup.

Alternatively you can download the latest version and upload the directory to your webserver. You will need a mySQL database to connect to with login details which you will have to input when you navigate via a browser to the directory you just uploaded those files to.

I created a live server and a staging/test server so I can play around with themes, plugins and posts without worrying about what my real users are seeing.

If you copy your live database over to your staging server you will need to update the database connection details in config.php and change a couple of rows in your database.

wp_options table: siteurl and home need to point to the correct place

I would also recommend “Discourage search engines from indexing this site” in Settings->Reading.

Perhaps also including a robots.txt file that disallows indexing of your staging site.

I also recommend using a different colour scheme on the back end.

Changing the settings on each version so I can tell by looking at the back end whether I am on the staging or live system
Changing the settings on each version so I can tell by looking at the back end whether I am on the staging or live system

This is if you can be bothered to create a test server – otherwise you would be good to go in a very short amount of time! Happy blogging!