Many people have asked me how easy it is to create a jQuery plugin so I thought I’d have a go at trying to explain it, I hope this makes sense.

I am presuming you know the basics about setting up jQuery on your page and how to include a javascript file.

Step 1

Firstly create a new javascript file (advanced javascript users can code this within their current javascript pattern, although advanced javascript users probably wont be reading this, am I still talking?) call the file something relevant to your plugin, in this example we will call it external.jquery.js, this file needs to be called after the jquery library file:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="external.jquery.js"></script>

Step 2

No you can begin to build the plugin, within the external.jquery.js file setup the self invoking function:

(function($){
    //code in here
})(jQuery);

Step 3

Now you need to add the function extension so calling your function will work, we will call our extension plugin externalLinks:

(function($){
    $.fn.externalLinks = function(){
        //function routine here
    }
})(jQuery);

Step 4

We can now add our routine to the function, this can be what ever you want to do, in our example I will check for a rel attribute with a value of external and if present then add on a target=”_blank”, obviously you can do what ever you want:

(function($){
    $.fn.externalLinks = function(){
        //loop through the selected dom elements
        this.each(function(i,obj){
             //find the anchors tags within
             $anchors = $(obj).find("a").get();
             $.each($anchors, function(j,ele){
                 //if external rel set target _blank
                 if (ele.rel == 'external'){
                     ele.target = '_blank';
                 }
             });
       });
    }
})(jQuery);

Step 5

All that’s left to do now is tell the function which elements you want to run the external links function on, to do this you need to put in a separate call using the jquery selector call shown below:

$('body').externalLinks();

That’s it, the above snippet will run the external links function on all links with the body tag. Here is our example external links plugin.

Need a developer in Buckinghamshire?

Why not get in contact with us, we have a vast amount of experience and should be able to complete most web project requirements, if not we will make a recommendation to set you on your way successfully. We dont charge for consultation so drop us a line.

Here at Amersham Websites we take website security very seriously, we now provide all of our websites with a Limit Login Attempts plugin, this allows you to administer the amount of login attempts accepted before locking the user out, and also you can administer the amount of time the user is locked out for, we find this very useful and will restrict hackers constantly bombarding your login page with attempts to gain entry.

The problem

If you have insalled wordpress somewhere other than the root of your site how can you access the wordpress functions on a non wordpress page? So for example I had installed wordpress at ww.mydomain.com/wp/ but I wanted to access the wordpress functions on a page at www.mydomain/nonwordpress.php

The solution

Took me a little while to work this out and I tried lots of different methods but then I discovered simply adding in a call to the wp-blog-header.php did the trick, I actually replaced my own db connect as the wp-blog-header.php will connect you to the wp database, luckily for me my sites database was the same as the wordpress one.

So on the page you need the wordpress functionality simply include:

require('wp/wp-blog-header.php'); // wp is the location your installation of wordpresss

This helped me anyway, hope it helps someone else too.

This week has seen the staged migration of topteks across to the wordpress platform.

Top-teks.co.uk were one of Amersham Websites first customers and where the first to have a bespoke admin system built for them. This was built from scratch and was a really cool admin system built specificaly for their business requirements.

With the ever improving power of the wordpress platform it was a simple decision for them to request to be migrated across, however this was not an easy task for us to implement as the existing catalog and orders data was to remain on the old platform until stage 2 of the migration.

So the first stage was to create an admin system to be able to create stand alone pages and have these pages look and feel part of the main current site, this was pretty technically straight forward however the issue came when trying to link it all together. When on the wordpress pages it was easy to link out as everything is all administrable but trying to link from the old platform to the new platform was an issue unless we hardcoded the links, but even then we would have the problem that the links would change structure so this would not be very reliable.

What we managed to find out was we could include all the functions and power of wordpress within the non wordpress structure by adding an include to point at the new platform, simple as that, now all the regular wp functions are available so we could change the old links to now be dynamically created through either a wp menu item or a wp links. If any one else is trying to do a similar thing then read my article about wordpress functions on a non wordpress platform.

Top-teks new wordpress pages

After spending numerous hours explaining to many clients how to use the wordpress platform I thought it would be helpful to produce a basic guide to using and performing basic functions, whilst most people do know how to do it I thought it would be a good idea to document for those who have forgotten through lack of use or those who are new to the wordpress platform.

Logging in

The first hurdle will be to get into the admin area, you will have been given a link and a user name and password already but if you are not sure of the link most domains admin web address will be your domain name then /wp-admin/ so for example www.yourdomain.com/wp-admin/. From here you can enter your credentials and on success will be taken to the admin area (or other area if you have a redirect rule on).

Adding a post

Another basic that will become like second nature when done a few times. From the admin home page (dashboard), on the left hand side of the page there will be a posts link, hover over this (if you’re on wp 3 or above) and a dropdown of options will appear, choose the ‘Add New’ option and this will take you to the add new post page.

From here you can add a title in the ‘Enter title here’ input box and below this is the text editor box, to make life easier make sure the visual tab is selected (you will need to know basic HTML for the HTML tab), in here you can put your post content, maybe it would be a news article post so you would put your  news content in the text editor area. You have the option to add media (pictures or video) with the button just above the text editor area.

Remember to categorise your post, fo example if this was a news article you would categorise it in that category, if that category doesnt exist you can add a category, the categories are on the right hand side of the page.

Adding a page

This is very similar to adding a post, find the pages link in the left hand navigation, then click add new, here you will presented with a simiar page to the add post page, similar to this you will hve to fill in the ‘page title’ and then populate the page with text from the text editor pane.

You will not have categories but you can however choose a parent page for this page if the page was belonging to another page, you can also selected a page template which you might have different layouts on if you have had that configured for you.

Adding an Image

From the left nav click media then click ‘Add New’, dependent on what browser you have, you might see an image like the one shown or you could just see a select files button, if you see the ‘Drop files here’  you can simply drag the files from your computer into that area on the web page and it will upload the image automatically. If you only have the select files button this is pretty simple too, just click that button and it will pop up the normal style file locator, simply select your image from your computer and submit and this will initiated the same process.

Once the image has loaded you will see a list of options for your image, the most important of these is ‘title’ and ‘alt’, make sure these are filled in and represent a description of your image, this is for accessibility, some users are unable to see images and have tools to read to them the description.

If you are on the post page when you are trying to add an image (most likely you will be) then you will also see some option to insert into post, you will see an array on image sizes select the most suitable for you and click insert into post, that’s it.

Do to increasing questions about the wordpress admin platform I get, I have now created a wordpress article category and any questions or issues I come across I will post about to help aid support on your wordpress platform, hopefully some of these will help you solve your issues. Let me know any other questions you have and I will attempt to answer them.

Amersham Websites WordPress Help

I am trying to post little snippets of help as I remember them and this issue was a bit annoying when I started out with wordpress but like most issues once solved it was pretty straight forward to fix, now a few clients have asked me about this too so here is the issue and solution.

The Issue

Trying to insert an image into a file (not using the wysiwyg editor, but manually coding it) and the relative image path is not looking into the right folder for the images for example:

<img src="../../images/facebook.png" alt="Facebook" />

The Solution

My solution for this was to try and form the whole image url without making it relative thus making the path a lot more reliable. Using the bloginfo() function you could retrieve the directory that you needed, so for most themes you would form the image path like this:

<img src="<?php bloginfo( 'template_directory' ); ?>/images/facebook.png" alt="Facebook" />

In some cases you might have a child theme and need to point the image towards the child themes image directory, in which case the code would look like this:

<img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/facebook.png" alt="Facebook" />

Obviously this is presuming your images are kept in a directory called ‘images’ you can substitute this folder name for your own name if it different.

This has had me stumped for hours but I finally got to the bottom of it. I will do a more comprehensive article on this subject at a later date, but here is the issue and solution for those who come across this.

The issue

When dragging a widget into the widget area in the admin panel it successfully drags and seems to save but if you do a refresh of that page the widget has been removed from the widget area.

The solution

When declaring the widget ID and Widget name they need to have a relationship, the id needs to be the same as the name but lower case and spaces substituted for hypens, so below is a correct declaration for a widget area:

register_sidebar(array(
'id' => 'header-login',
'description' => __( 'The widget area for the logon form'),
'name' => 'Header Login',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));

I hope this helps as it wasted 3 hours of my day

Shortcodes are a really useful tool to perform functionailty or grab data that you require in your post without the need for complex code knowledge. Using predefined snippets you can pull in the required data you need. We have developed this shortcode for ourselves specificaly for pulling in posts, if you feel this would benefit your wordpress platform then let us know and we can install for you.

Using this show posts shortcode could not be simplier, the shortcode will just list out posts from a certain category, with this you can configure the amount of posts, the order of the posts. The snippt below is the shortcode you would just paste into your post, and below that is the shortcode results working.

Shortcode:

• Creating a jQuery plugin
• Developer Buckinghamshire
• Website Security
• Wordpress functions on non wordpress pages
• Wordpress Basic's
• Get Directory for Image Paths
• Wordpress Widgets not saving
• Show posts short code
• Wordpress 3.3
• HTML Canvas tag
• Why use wordpress?
• Search Engine Optimisation
• What is HTML5?
• Choosing a website
• Web Term Glossary
• What is the difference between CSS and HTML?

Category – The id of the category you want to display, this defaults to showing all.
Num – The amount of posts you want to show, defaults to 5, -1 will show all.
Order by – Defaults to date.
Order – Either asc for ascending or desc for descending, defaults to asc.

Shortcode in action:

• Creating a jQuery plugin
• Developer Buckinghamshire
• Website Security
• Wordpress functions on non wordpress pages
• Wordpress Basic's
• Get Directory for Image Paths
• Wordpress Widgets not saving
• Show posts short code
• Wordpress 3.3
• HTML Canvas tag
• Why use wordpress?
• Search Engine Optimisation
• What is HTML5?
• Choosing a website
• Web Term Glossary
• What is the difference between CSS and HTML?

With the new release of wordpress 3.3 Amersham Websites were real keen to try it out, named ‘Sonny’ after a Jazz musician, here at Amersham Websites we are calling it wordpress 3.3 as we are not as geeky.

There is a new drag and drop uploader which makes uploading media that much easier, as if it wasnt easy enough anyway this new method allows it to be even more user friendly. There are also new pointer tips for first time users which is excellent help if you are a first time user to the wordpress platform. The left admin navigation now has flyout sub navigation making it easier to see all the navigation on the screen.

We have installed it here on Amersham Websites and are pretty impressed with it, it has caused no compatibility issues with any of our existing plugins.

I have recently been playing around with the new html canvas tag and seeing what its capabilities are, I’ve been quite impressed and it seems for drawing dynamic data this is going to be a real strong tool. You can also use it for animations which could mean this will replace flash, at the moment it is only supported in the latest browsers so is a little way off being available to all users however as most good developers will do, you can code a fall back if the users browser doesn’t support the canvas tag, either a description or an advisory message would be a good fall back.

Here is a clock I found that is used with the canvas tag and javascript. Have a look:

Older browsers will not see the canvas object, please upgrade to see.

Using the setinterval function every second it changes the canvas image, you can change the colours, widths, heights and even shapes to what ever you want.

It’s with great pleasure Amersham Websites launch one of their first recruitment themed websites, www.pppronline.co.uk was launch in the early evening of 7th December 2011.

This website has a fully customisable admin panel wth the requirement to add jobs, news, testimonials and edit pages. There are numerous custom widgets that have been built for PPR.

Amersham Websites would like to thank everyone at PPR for their help during the development process.

Check out their site www.ppronline.co.uk

PPR Online are a recruitment company, they required a website that not only was as visually appealing as a brochure website but also had the user friendly nature of a jobs board website, I think we successfully delivered this.

PPR’s homepage has a fully customisable rotating banner animation, it has a jobs widget that scrolls the latest jobs, it shows all the brand colours in the form of icons and also has a useful footer widget area all of course fully customisable.

This site as all at Amersham Websites is content managed, every element is controlled within the admin panel.

PPR’s site also needed the ability for users to register and login, so it has a custom user management system integrated too.

Amersham Websites Ltd (AWL) view

We use WordPress at AWL as it is a very easy to use interface. Our clients often do not have any coding knowledge and so WordPress provides the perfect software to enable them to update web content without the need to have any coding knowledge.

It is an open source software, meaning that it is free to install. The fee we charge covers the use of a theme, which is the unique way in which the website is styled, and this can be chosen from our theme selector.  We also charge for tailoring this theme to your company’s individual taste however if you do not want to have us create a style for you and you think you have what it takes to create your own look then we can just set you up a themed website and host it for you.

More about WordPress

WordPress started in 2003 with a single bit of code to enhance the typography of everyday writing and initially had fewer users than you can count on your fingers and toes. Since then it has grown to be the largest self-hosted blogging tool in the world, used on millions of sites and seen by tens of millions of people every day.

WordPress started as just a blogging system, but has evolved to be used as a full content management system and so much more through the thousands of plugins, widgets and themes: WordPress is limited only by your imagination.

WordPress is also a piece software that has been developed to follow all of the Web Standards and so keeps your blog or website compliant to all of the rules that have to be followed when running a website.

Search Engines have to be definitely kept in mind when building a website to ensure that its design attracts maximum traffic for your business. WordPress uses different functions which allow it to be search engine friendly. For example sending pings to other sites, making categories, tagging your posts and use of h1/h2 tags etc.

There are of course alternative pieces of software that compete for attention in this market however the above outlines why we at AWL feel that WordPress is the most accessible software for our clients.

This is a beauty blog website that is currently in development, this site is fully content managed with a wordpress powered admin system.

Amersham Website lauch the first stage of the new look Aquatic imports, there are plans to move the the back end admin system across to one of Amersham websites bespoke content management systems.

See Site

Amersham Websites have sponsored 4 golfers to take part in a charity golf marathon. This event will see the 4 amateur golfers completing 4 different golf courses in 1 day for Muscular Dystrophy.

The 72 holes will be completed in an estimated 16 hours covering an estimated 20 miles. The director of Amersham Websites director Danny Jordan will be one of the 4 golfers, he is hoping with the help of his 3 other golfing buddies to raise over £1000 for Muscular Dystrophy.

Amersham Websites would like to encourage people to give generously to this wonderful charity and to do so please use this link  http://uk.virginmoneygiving.com/DannyJordan

All the best from Amersham Websites.

Search engine opitimisation is taken very seriously by companies as even the most aesthetically pleasing of websites with the best content don’t always generate enough traffic from search engines. Here is a few tips that we have come up with to help you get up to speed.

How do search engines work?

Spiders are sent out by search engines across the internet, these spiders check websites for words that have been searched for on the internet, anything relevant gets inserted into a database of links.

This database is where the search engine looks every time a search on the internet is initiated. The contents of this database ranks of of the entries and displays them according to rank.

How does SEO get you into search results?

It is real important that when these spider visit your site they can find the keywords and phrases that people will often use when searching, if spiders find these words in plenty on your site it will rank highly, but this is not to say you over kill the word, search engines will penalise you for abusing the keyword on a page, so you need to start to think about what words terms people will search for on the web to get the page you have.

The need for SEO specialists

Reading up on SEO you will become aware that specialists are very useful, they can point you in the right direction as constantly changing (dynamic) sites are important so by you contributing to the content with the knowledge of what content to write this will make life a whole lot easier and more productive.

Overview

SEO is a constant process, it will be a mixing of good HTML code originally by the developer and then good content writing by the site administrator, also on top of this getting links into your site from other websites is a massive factor in getting up the rankings in search engines.

Quick definition: It’s the new verson of HTML.

More Reading: HTML5 is the term for the new version of HTML, well what is HTML? HTML is hyper text mark-up language and is the code used to build a web page, all browsers understand HTML and will build a web page out of it. So why change it? This new version of HTML is all about roling with new technologies, as they are developed browser vendors are integrating them into their browsers. What does this mean to me? If you are having a site built then your developer should be fully aware of HTML 5 and all its new features making sure your site can take advantage of these.

This site was constructed for a local electrician who’s business was for electrical testing, this was constructed on the wordpress framework and has a fully customisable content management system.

The content management system allows my client to add/edit unlimited pages, create menus and add images.

We thought give you a guide through all the things you will need to have in place for you to have a website, whether you have your own hosting package and domain already sorted to if you know nothing about the process the list below should help you on your quest to having your own website:

• Decide the type of website you need, from e-commerce to just an informational website.
• The content, so this means the images and text or video you want on your website, most design companies will help you in writing this but remember this website is your business marketing tool so you are best placed to write the content.
• The layout and design, this can be left up to the design company doing your website but some clients will have certain colours that they need to stick to or corporate design standards that you need to tell the designers about.
• The logo, most companies will already have an existing logo but if you need one you can request one when you get your site designed.
• Hosting, all sites need hosting and most design companies will provide this for you but if you have your own hosting package then you will have to let them know that.
• Domain Name – You can register this yourself or have the company building your site register it for you, but make sure it is available for purchase, use www.123-reg.co.uk to check your domain name is available.

Here at Amersham Websites we can provide part of this package or we can provide the whole package for you just use our contact form and we will get in contact with you giving you our best price.

Here are a few terms that you might hear whilst researching your website and maybe are not too sure what means, hopefully this glossary will help clear a few things up.

• HTML – Hyper Text Mark-up Language, This is the language web browsers use to display the information on the page.
• CSS – Cascading Style Sheet, This is a style language that tells the browser how to display the information received.
• SEO – Seacrh Engine Optimisation, this is making sure your website has the best chance at succeeding in search engine results such as Google.
• CMS – Content Management System, This is a web tool that you can use to define what content you have on your website i.e the text and images on your site.
• E-commerce – A website dedicated to selling products/services.
• Web Browser – The software you use to view the internet pages i.e internet explorer or firefox.
• Domain Name – A name that identifies a website i.e http://www.amershamwebsites.co.uk
• Web Host – This is where all your files that make up your web site are kept all websites need a host.
• Javascript – A language used by web developers to manipulate things happening on a web page.
• Cookie – Information from a website stored on your computer by your web browser, this is used by the website so they remember what you did on the site last time i.e added something to your basket or logged in etc.

If there are still some terms that are not on the list, let us know by our contact page and we’ll get an answer up for you as soon as possible.

This is owned by the same company as the Top-teks site we also built, it is a similar theme and layout however this site is on the wordpress frame work which all our new sites are now on and so this site is much more customisable.

This site project was just a cosmetic rebrand, we tidied up the front end code and the styles and imagery of the site, there was a legacy back end admin system already developed so this was just a cosmetic fix, this was only the first part of the project, there are now plans to move them across to the wordpress platform creating a newer more powerful custom content management system.

Here at Amersham Websites we have successfully built a new platform for our existing site, this platform uses wordpress and a bespoke theme, we hope to be using the same platform across all of our new clients sights and maybe some existing ones as we believe this is one of the most powerful content management systems there is.

The new look is quite a drastic change from the old look but is very contemporary and we believe make the site a lot more user friendly and useful.

We have added in an articles section providing useful information for web novices and more advanced articles about code and changing trends more higher skilled developers. As well as this we have a news section keeping clients upto date on all the news surrounding our company and possibly information with regards to their sites.

Our portfolio has also been updated to include our recent clients websites, this has a host of big clients in, for more information go to our portfolio page to see exactly what we did for them.

Here at Amersham Websites we are constantly trying to keep up to date with all the latest browsers and user devices, we recognise the need to have your web sites or web application working in all platforms. Below is a list of current browsers that are fully supported:

• Internet Explorer 7
• Internet Explorer 8
• Internet Explorer 9
• Firefox 3 +
• Safari
• Chrome

The following browser are functionally supported:

• Internet Explorer 6
• Opera

If you have any other browsers that you need support for then please specify this when briefing us in your requirements.

Amersham websites are now providing a content magaement system with all of their websites, this will enable as much control as you want, the less level of control you need the cheaper it will be for you.

HTML is used to structure content. CSS is used for formatting structured content.

Okay, it sounds a bit technical and confusing. But please continue reading. It will all make sense to you soon.

Back in the good old days when Madonna was a virgin and a guy called Tim Berners Lee invented the World Wide Web, the language HTML was only used to add structure to text. An author could mark his text by stating “this is a headline” or “this is a paragraph” using HTML tags such as <h1> and <p>.

As the Web gained popularity, designers started looking for possibilities to add layout to online documents. To meet this demand, the browser producers (at that time Netscape and Microsoft) invented new HTML tags such as for example <font> which differed from the original HTML tags by defining layout – and not structure.

This also led to a situation where original structure tags such as <table> were increasingly being misused to layout pages instead of adding structure to text. Many new layout tags such as <blink> were only supported by one type of browser. “You need browser X to view this page” became a common disclaimer on web sites.

CSS was invented to remedy this situation by providing web designers with sophisticated layout opportunities supported by all browsers. At the same time, separation of the presentation style of documents from the content of documents, makes site maintenance a lot easier.

Hello and welcome to Amersham Websites Limited, We are presuming that the reason you are here is to get some web work done, whether you need a full website or a small piece of development to your existing site we are pretty sure we can offer you a solution.

Firstly you probably want to check out some of the work we have done so far we get on over to the portfolio page and check some out if you like what you see get in contact with us.

For more in depth info on the Amersham web company check out our about us page, for more info on websites check out our article pages, here you should find articles from basics as what is code to more advanced thoughts on what you should be looking out for. Don’t forget we also have a news section in which you can keep up to date with all the goings on in Amersham Websites.

We hope you find everything you need to know about us on this site if you have any further questions please use our contact page to let us know what you want.

What they say

A Tyre company based in Middlesex, the website is a unique tool that helps customer find out all they want, giving them a unique tool to find out directions from their house and tyre sizes and all the various services they offer. Here a list of key features:

• Drop down navigaton
• Directions finder
• Tyre size guide

The technologies used were:

• PHP
• Javascript
• jQuery
• CSS
• HTML
• AJAX

To see the site live visit www.southalldiscounttyres.co.uk

Top-teks.co.uk is a professional camera supplier company, they needed a brand new ecommerce website with full content management. we delivered the following features to the site:

• Content management system
• Shopping basket
• Search tool
• Payment gateway
• CMS rotating banners
• User registration/log in
• Newsletter subscription
• Browse shopping

The content management system used was built completely from scratch. The technologies used were:

• PHP
• Javascript
• jQuery
• HTML
• CSS

If you would like a site similar to this then use our contact form.

To have a closer look at this site visit www.top-teks.co.uk