Author: jenni

WordPress: How to Loop for Custom Post Type Using Bootsrap

Posted on by jenni

A simple little loop that loops through custom posts in WordPress and also shows how Bootstrap works alongside the custom post type loop. The example is used with 4 columns side by side (with col-md-3), but you can change the number to suit whether it is 2 columns, 3 or 4 etc.

Within the loop, you can change the ‘customposttypegoeshere’ to the name of your custom post type. The other parameters are customisable, i.e. define as many posts per page as you wish (here we are returning 24 posts), and you can also edit the orderby and order to suit.

Within the loop, we have chosen to display the post thumbnail, excerpt and title within each column, but these again can be removed or changed to suit your needs. Again, you can wrap the title in a H2 or H3 tag to suit.

<div class="container-fluid">
<?php 
$loop = new WP_Query( 
array(
'post_type' => 'customposttypegoeshere',
'posts_per_page' => 24,
'orderby' => 'date',
'order' => 'DESC'
)
);
?>

<div class="row">
<?php while ( $loop->have_posts() ) : $loop->the_post();?>
<div class="col-md-3 col-lg-3">
<img src="<?php the_post_thumbnail(); ?>" />
<?php the_title(); ?>
<?php the_excerpt();?>
</div>
<?php endwhile; ?>
</div>
</div>

 

If you need any help with Web Maintenance, Web Development Services or Website Security, get in touch with a member of our team and we will be happy to help.

How to Migrate a Website With the Duplicator Plugin

Posted on by jenni

The WordPress Duplicator plugin has been an incredibly useful tool to use when migrating or cloning a website. In a few clicks, you can have a replica of your site ready to upload to a new server.

As well as migration, you can use Duplicator to take backups of a current website and duplicate a website to use on a staging website for testing,

Depending on the size of your website, you can either use the basic Duplicator plugin or Duplicator Pro which supports larger sites as well as 2 step installs. With Duplicator Pro, you can also take scheduled backups, make use of professional support and cloud storage to Dropbox, Google Drive, Microsoft OneDrive, Amazon S3 and FTP/SFTP.

 

Steps to migrate your website using Duplicator

 

This assumes you already have your new hosting set up and ready to go. If you are replacing a current site, make sure you take a backup of it just in case you need to revert back to it.

  • On your website that you are wanting to migrate, download and install & activate the Duplicator plugin.

  • You should now see Duplicator in the left-hand bar in your dashboard. Click Duplicator > Packages
  • Select ‘Create New’ in the top right-hand corner
  • Click Next. This will then start scanning your site

  • Review the scan results before clicking Build. If there is a problem with file sizes and the package doesn’t build, this can usually be resolved by using Duplicator Pro.
  • Once it has finished building you can download both installer.php and the Archive file.
  • Next, create a new database on the new site you are migrating to. Don’t forget to jot down the Database Name, Database Username and Password as you will need these later.
  • If you have any old files on the site you are migrating to, delete them in file manager before uploading both the downloaded installer.php and Archive file as they are.
  • Next, go to your domain/installer.php. i.e www.example.com/installer.php
  • Follow the instructions and put in the database info you have just jotted down. Confirm the URLs are correct. Test the database connection to ensure it works correctly.
  • The last step usually asks you to log into WordPress so put in your username and password of the old site to log in.

It’s as simple as that! Once you are successfully logged in, make sure any duplicator installation files are removed, the site is indexed and the SSL is working correctly.

If you need help migrating a website or would like to find out about our hosting services, then please get in touch to speak to a member of our team.

Essential WordPress Plugins for Online Businesses

Posted on by jenni

The global pandemic and resulting lockdown measures have forced many businesses to shut and, in turn, has seen a dramatic increase in businesses adjusting to online shopping and other digital services. Many businesses, which once relied on footfall, have now established their online presence to ensure they can continuously deliver their goods and services throughout the pandemic.

With an online presence, comes a new website and a higher demand for web development and website maintenance services. There are a large number of website platforms, but perhaps the most popular (dominating over 60% of the market share) is WordPress.

If you have a WordPress website for your business but aren’t sure what essential plugins you need for your business and improve your SEO, then we have selected the top plugins that you will need below.

  1. Contact Form 7/ WP Forms
    If you are hoping to receive enquiries then you will need a contact form on your site. Two of the best free contact form plugins are Contact Form 7 and WP Forms. WP Forms is very easy to use and good for beginners and the lite version is free but you can pay to use PRO features. Contact Form 7 is a popular plugin and easy to set up with Recaptcha and Flamingo plugin, so you can see a saved list of all messages sent to you in your database.

  2. WooCommerce
    It goes without saying a website will require an eCommerce plugin of some sort! If you have an existing WordPress website or are looking for a brand new website with eCommerce functionality, then WooCommerce is one of the best plugins out there and allows for a huge amount of customisation. You can add extra add-on plugins to ensure your shop’s functionality is exactly how you want. For more information, read our helpful guide to adding eCommerce plugins to your site.

  3. Yoast SEO
    An essential WordPress SEO plugin on your site is Yoast. In a nutshell, SEO improves your website’s visibility for relevant searches. Yoast is a great little plugin that allows you to add a Title and Meta Description to your web pages as well as creating a robots.txt file and sitemap. You can also set breadcrumbs on pages, to allow better navigation between web pages. A lot of plugins also integrate with Yoast, which makes it the most popular choice for an SEO plugin.

  4. Security Plugin
    There are many security plugins to choose from but all are important to ensure your website does not get hacked and your business can keep running. Some of the best WordPress security plugins are WordFence, Sucuri and iThemes Security Pro, which are free but some of the better features are paid for. They will alert you if there is any malware, any unwanted attempt at accessing your site and any other issues.

  5. Live Chat
    Adding a live chat feature will allow you to respond to any queries quickly and efficiently. LiveChat, Tawk.To and Zendesk are some good options for chat plugins. Some have a free trial which then changes to pay monthly after the trial has ended.

  6. Insert Headers and Footers
    Insert Headers and Footers is a great little plugin if you don’t have access to the code or want to add a piece of script to your site – i.e. Google Analytics script.

  7. ReCAPTCHA/Honeypot
    With a contact form allows the potential for spam, so make sure you have some anti-spam plugins to keep your inbox clean! Adding a ReCAPTCHA to your contact form is one method – you can sign up with Google and then install Invisible ReCaptcha and pop in your Site and Secret Key. You can also add Honeypot for Contact Form 7, which adds an invisible field to your contact form which bots will automatically fill in and then they are filtered out. You can also use an alternative Honeypot plugin for other contact forms.

  8. Caching Plugin – WP Rocket
    Keep your site speed fast with WP Rocket – your site will need a caching plugin to decrease the load time of your site and therefore improving your SEO. WP Rocket is one of the best caching plugins – although not free, it is probably one of the easiest ways to ensure a blazing fast site and doesn’t require any programming knowledge. An alternative free caching plugin is W3 Total Cache.

 

These are just a few of the plugins you should be considering adding to your website to ensure your online business is a success. If you are looking for website hosting or website security services or need help adding plugins to your site, then get in touch with a member of our team and we would be happy to assist.

Templates & Theme Build vs. Custom Built Websites – Which is Better?

Posted on by jenni

So you’ve decided you want a new website, but the next thing to consider is whether you want a custom build or a template? When it comes to your website, there are a number of factors which can help you decide which is the best choice for you. These range from length of completion, budget, usability or ease of customization. An explanation of each option will help to breakdown the pros and cons of each service.

 

What is a custom build?

A custom build focuses on creating a website that is tailored to your needs to ensure it meets all your requirements. It is built to your exact needs and is completely customisable, meaning you can adapt it along the way to grow with your business. However, this comes at a cost and most custom builds takes significantly longer and are more costly than templates.

Pros

  • Easily customisable
  • Built to your exact requirements
  • SEO friendly

Cons

  • Is more expensive
  • Takes longer to build
  • May not be easy to update/manage yourself

 

Templates

A template is generally cheaper and has a shorter development cycle, as the main structure of the website is already built. The demo content is replaced with the clients images/copy  which makes for a very fast turnaround. Most aspects of a template can be customized but there will be more limitations than that of a custom build.

You need little coding knowledge to be able to update the site yourself, as most templates use a drag-and-drop page builder which can easily be managed. However, some themes may not be regularly updated or supported, leaving you with an outdated website or full of bugs. Therefore choosing a reputable theme provider is important.

Pros

  • Faster build
  • Significantly cheaper
  • Content can be updated by the client via the CMS

Cons

  • Less customisable
  • Can look less personable than a custom build
  • Can be slower as themes can come with a lot of unnecessary files

 

Whichever option you choose is completely dependent on your business and your requirements. If you’d like to learn more about each option or to kick start your web build, please get in touch and we’d be happy to help.

Web Design & UX: Using Colour Effectively in Designs & Websites

Posted on by jenni

 

The significance of colour

Colour is used as a form of communication; evoking meaning, emotions and actions. Specific colours have different associations, that, when used in design, can engage the user and create responses. Users will associate colours with objects in the real world, for example, a set of traffic lights will have three states. In web design, the use of red, orange and green can represent three states of completion, with red indicating incompletion and green indicating that a task is complete. 

Colour is also used to create retention and association, as a brand is often associated with a specific colour. As well as creating a brand, this colour can be used to create consistency and continuity across the website, gaining the users trust and confidence. Users will find it easier to navigate around a well-designed website that uses colour appropriately on elements such as links and buttons. 

 

How colour can influence interaction

Links generally use the same colour across the site, highlighting to the user that this takes them to another page or creates an action. Another colour can be implemented to differentiate between state changes. With apps such as Instagram, the colour red is used to indicate a state change i.e. liking a picture.  

Colour can also call attention to specific parts of the website. A contrasting colour can be used for important images, error messages and call to actions, drawing the attention of the user to those areas.  

High contrast areas are also great for people with colour blindness – a website with a lack of contrast can be harder to read. You might wonder why you would design a site with such a small percentage of users being colour blind, but a lot of colour combinations that are an issue also apply to general users.  

 

Colour and meaning

Different colours are associated with different meanings which you can apply to real-life situations. Green is a commonly used colour to represent health, nature and fitness, as it is a well-balanced colour, inflicting a level of calmness. Blue is another calm colour, commonly used for technology and business sites, as it signifies power and intelligence. 

Red is often associated with danger/urgency, therefore is often found on warning signs or error buttons. However, red can also be associated with love, a sense of urgency and speed, therefore is ideal for websites that need an action from the user, such as charity or donation websites.  

Whatever colour scheme you decide for your website, it is worth taking into consideration the emotional impact it gives. Cool colours such as blue, green and purple evoke a level of calmness, sadness or a neutral opinion. Warmer colours, such as red and orange are used for creating emotion or actions.  

 

How to choose a colour scheme

Using a logo to create your colour scheme, if you already have a logo then that can be the basis of your colour scheme. Be careful about heavy use of strong colours as they can make the eye feel tired. You can desaturate the colours to mute them slightly to make them less strong.  

If you already have a main colour for your website, a great tool to help with accent colours is the adobe colour wheel. This tool can select complementary or analogous colours to help find colours that work together and complement each other.  

 

Tips for Stopping Website Hacks & Hacking: Preventing SQL Injections

Posted on by jenni

 

What is an SQL injection?

Hackers can target a website by adding SQL (Structured Query Language) into an application to make changes to the database. For example, an SQL statement that selects fields from a table could be manipulated by adding ‘DROP TABLE’ after the value. This would then delete the entire table. 

SQL injections can be used to view personal information such as passwords, delete entire tables and gaining access to the database by use of admin credentials.  

 

How to prevent a SQL injection?

Fortunately, an SQL Injection can be prevented by a ‘prepare’ statement. A prepare statement will send the program to the sever first and it will use a placeholder such as ‘?’ in its place.  

For example: $db->prepare(“SELECT * FROM  media where id=?”);  

The data of the placeholder gets sent separately to the query so the any user input is not treated as a SQL statement and therefore is not executed.  

 

When should you use a prepare statement?

Generally, any form of data that is touched by a user or that pulls data from a database, should use a prepared statement.  

This can include:  

  • Usernames 
  • Email addresses 
  • Passwords 
  • Search queries 
  • File uploading 

 

Using a prepare statement

We use a prepare keyword and the placeholder ‘?’ is used as a placeholder where the value will go. 

We then bind the values to the query using ‘bind_param’. This is also attached with the correct data type so in this case it is a string – hence “s”.  

The query is then executed – $stmt->execute(); 

The bind_result() is used to bind the results and then this can be displayed by looping through the results.  

In this example, the user fills out a search field with a city name. This value is stored in the variable $term. This selects all the images that matches the user’s entered location.  

 

<?php  
$term = “$_POST[‘city‘]”; 
$stmt = $conn->prepare(“SELECT image_name FROM media WHERE location LIKE ?“); 
$stmt->bind_param(“s”, $term); 
$stmt->execute(); 
$stmt->bind_result($image_name); 
?> 

 

Displaying the results

 

while($stmt->fetch()) 
{ 
    echo $image_name; 
} 
 

Conclusion

SQL injections are often overlooked and can be a common threat, therefore suitable prevention is essential in keeping your database and it’s data safe. Separating the data and the query will ensure that your program cannot be manipulated.