Our top 3 favourite WordPress Starter Themes

In this tutorial, we are going to go through our three favourites WordPress Starter Themes.

What is a Blank WordPress Theme?

A ‘Blank WordPress’ theme is a boilerplate that serve as a starting point for developing your own custom theme, hence the name; ‘starter themes’.

Blank WordPress themes come with basic WordPress PHP, CSS, and HTML code and theme files already filled out for you saving hours of coding time!

Unlike theme frameworks, most of the files in a blank WordPress theme are meant to be modified based on your requirement.

Why Use Blank WordPress Themes?

A blank WordPress theme speeds up your workflow by reducing the amount of code you need to write. Having a skeletal foundation means you don’t have to do the same initiation process over and over every time you need to start creating a new theme.

In addition, using a blank WordPress theme lowers the chances of you forgetting critical files or code required for a theme to function properly.

Some blank WordPress themes will also have useful integrated features like responsive layouts and sample data to help you test your theme.

Do not mistake these with Premium themes with ones you will find on ThemeForest, these are designed to be a ‘blank canvas’ to create your own WordPress Theme. We also use a starter theme like one of the ones below when creating bespoke websites for our clients.

Here are our favourite three:-

1. Underscores

Underscores, or _s, is a free blank WordPress theme developed by Automattic, the creators of WordPress.

The tutorial series by ThemeShaper (a major WordPress theme development company) will help you learn how to create WP themes using Underscores.

We use Underscores for every new theme we develop. It saves us hundreds of hours of coding! The great thing about it is that you can set the Theme name, Author & Theme Slug when you download which means you don’t have to do a find and replace when setting your theme name (which, coming from experience, can break things sometimes).

2. Roots

Roots is an excellent open-source WordPress starter theme. It’s built with HTML5 Boilerplate and Bootstrap (if you don’t need it, you can replace or remove it). It also has Grunt files for quickly compiling LESS code and combining your CSS and JS files.

A nifty feature of Roots is its Theme Wrapper, which helps you avoid having to write the same code in multiple files.

Check out themes built using Roots at the Roots Gallery. Get started with Roots by heading over to the project’s official docs.

3. Bones

Bones is a free blank theme built on top of HTML5 Boilerplate. It’s responsive and developed under the Mobile First philosophy.

WPtuts+ has an excellent Bones tutorial to help you get started with this awesome starter theme.

Conclusion

All of the three starter themes we have mentioned today is a great starting point to building any bespoke WordPress website. The best one to use is simply up to you, our favourite (underscores), may differ from your personal favourite, but we hope that by explaining the differences and advantages of each, that it makes your life easier in deciding which one you would like to use.

Let us know which WordPress starter theme you use when developing a bespoke website!

 

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Add a Custom Author Profile Page to Your WordPress Site

If you are looking to add a custom author profile page to your WordPress site then you’ve come to the right place. In this tutorial, we will show you how to create a custom author profile page with and without the use of a plugin.

As always, we will show you how to add this without a plugin and then provide the plugin alternative method.

1. How to Manually Add a Custom Author Profile Page to Your Theme

The first step is to create the author.php file, this will go within your theme/child theme folder. Now we can simply copy and paste the contents of the archive.php file and paste it within the author.php file.

If your theme already has an author.php file, then you can edit that as well.

Our main goal here is to get the author’s profile information and then display it. You will need to decide where you want to start editing. As a general rule of thumb, you can usually edit anything between the get_header(); and get_sidebar() lines.


<?php
	$theauthor = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author));
?>
     
<div class="author-profile-card">
    <h2>About: <?php echo $theauthor->nickname; ?></h2>
    <div class="author-photo">
    <?php echo get_avatar( $theauthor->user_email , '90 '); ?>
    </div>
    <p><strong>Website:</strong> <a href="<?php echo $curauth->user_url; ?>"><?php echo $theauthor->user_url; ?></a><br />
    <strong>Bio:</strong> <?php echo $theauthor->user_description; ?></p>
</div>
     
<h2>Posts by <?php echo $theauthor->nickname; ?>:</h2>
 
 
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<h3>
		<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a>
	</h3>
	<p class="posted-on">Posted on: <?php the_time('d M Y'); ?></p>
	 
	<?php the_excerpt(); ?>
	 
	<?php endwhile; 

	the_posts_pagination();
	 
	else: ?>
	
	<p><?php _e('This author hasn\'t posted yet.'); ?></p>
 
<?php endif; ?>

The above code will add the author’s profile details at the top of the page and then it will display their recent posts below.

This code can be customised to your needs, for example, you could add social links, display featured images for the post, customise the posts to look like your blog archive page, and so on.

To get you started, here is some CSS code that you can add to make your author profile look more presentable. Feel free to make changes and further improve to match the theme of your website.


.author-profile-card {
    background: #eee;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
}

.author-photo {
    float: left;
    text-align: left;
    padding: 5px;
    margin-right: 10px;
}

img.avatar {
    border-radius: 50%;
}

You will end up with a page that looks something along the following lines:

2. How to Add a Custom Author Profile Page in WordPress with a Plugin

For this method, we are going to install and active the WP User Manager plugin.

Once activated, you need to go to Users » WPUM Settings page to configure the plugin to your requirements.

This plugin will automatically create pages for a custom login, user registration, forgot password, account and profile pages.

WP User Manager comes fully packed with a lot of options and customisation. You will have to go through the settings and enable/disable the features that you require for your site.

Once completed, we can click on the Profiles tab to setup the user profile settings.

In this tab, we can enable the profile page option for guest which allows anyone to view the user’s profile. You can also allow members to view one another profile. If unchecked, you will only be able to see your own profile page.

You can also allow users to upload a custom profile image and display their recent posts as well as comments on their profile page. Once you’ve configured it to your liking click the Save Changes button.

Now, we will need to select SEO friendly URLs on permalinks for the author profile pages. This can be done by going to Settings » Permalinks page. Scroll down to the ‘User profile permalink base’ section.

This plugin allows you to use the user ID, username, or nickname in the URL. Both nickname and username are more SEO friendly options than user ID. Click to select either one of them and then click on the save changes button to store your permalink settings.

For the next step, we need to let users easily find their profile pages on your website. What you can do here is go to Appearance » Widgets and add the WPUM Login Form widget to one of your sidebars

Once done, you can now view your new author’s profile page. If you are logged in, you will see your own account details in the sidebar widget. Click on the username and this will take you to the author profile page.

The sidebar widget will show a login form for users who are logged out. If you wish users to register on your website, the form will also include a link to sign up. This plugin will also change author links on your website and point them to the author profile page as opposed to the default author’s archive page.

If you want to customise the plugin you can add some CSS to match it with your WordPress theme. However, if you want to take it one step further and adjust the layout, you will need to edit the plugin’s template files. The plugin comes with custom templates support which means you can create your own templates within your theme folder.

To do this, head over to the /wp-content/plugins/wp-user-manager/templates/ directory and download all the files. Next, head over to your theme/child theme folder and create a new folder called wpum. Now, we can add the files you downloaded previously within this folder.

Now you can edit these files to customise the appearance of your profile page as you wish.

Conclusion

And that’s it! We have now learned how to add a custom author profile page in WordPress with and without the use of a plugin.

We hope you found this tutorial useful. If you need any help with anything, feel free to drop a comment below.

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Fix “Unable to connect to the filesystem. Please confirm your credentials” In WordPress

If you are running XAMPP on localhost using OS X then you may have encountered one of the following errors:

To perform the requested action, WordPress needs to access your web server. Please enter your FTP credentials to proceed. If you do not remember your credentials, you should contact your web host.

Unable to write to wp-config.php file.

The first error you may find will occur when uploading a plugin or theme. The third error you will notice when you are trying to install WordPress.

Both errors are caused by the same issue, this is because the default XAMPP user is set to daemon on Mac which causes the permission issues. WordPress tries to write files prior to upgrading and will check which user tried to write it. If the user doesn’t match the file it is trying to write then it will simply refuse to perform the action. Even if the permissions are set to 777, this will still not allow you to perform these actions.

The correct way to fix this issue is by opening your httpd.conf which is located here; /Applications/XAMPP/xamppfiles/etc/httpd.conf and simply change the user and group. The user and group might differ so a quick way to find the lines of code we need to edit is to search for User/Group. For us, we had to change lines 173 and 174 from:


User daemon
Group daemon

to


User your_mac_username
Group staff

Once you have made the change, restart XAMPP and this should rectify the problem.

If you are still having issues you can check a couple of other things. Firstly we can verify the ownership by opening Terminal and running the below command:


sudo chown -R your_mac_username:staff /path_to_webroot/www/

Secondly, we can confirm permissions and ensure all directories have 755 and files have 644 (which is the correct access level). To do this we can run the following command in terminal:


find /path/to/your/wordpress/install/ -type d -exec chmod 755 {} \;
find /path/to/your/wordpress/install/ -type f -exec chmod 644 {} \;

And that should be the permission issues solved!

There are other methods to fix this but this is definitely the best one to go for! We’ll show you another way to resolve the issue anyway incase you are interested.

The second method can be fixed by simply adding the following code your functions.php file:


define( 'FS_METHOD', 'direct' );

You may also need to amend the permissions of the directory of your website. To do this we can right-click the folder and click Get Info. Once here, we can change admin and everyone to have Read & Write permissions. We can then click the padlock key and then click the ellipsis icon (circle with three dots) and click ‘Apply to enclosed items…’

This will also rectify the issue although it’s not the preferred method. Also, you will find yourself having to perform the same action for every project so you may as well do it the right way first 😉

Well, we hope we managed to resolve your WordPress permission issues today. Let us know in the comments below if you found this useful.

If you need help setting up VirtualHosts in XAMPP on Mac you can take a read of this blog.

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Add Instagram Photos to Your Website or WordPress Website

In this tutorial, we will show you how you can add an Instagram feed using a WordPress plugin, and how you can add one using an external plugin for any type of website.

Adding Instagram Photos to your website using a Premium WordPress Plugin

The best plugin in which we have come across and use on a lot of our website builds is Instagram Feed – WordPress Instagram Gallery which is created by Elfsight. The plugin can be purchased here. This plugin can be purchased for $59 and can be used across multiple WordPress websites.

All you have to do is install the plugin, activate it and connect your Instagram account either using Facebook Business or Personal Instagram and then you can fully customise it to your needs.

A shortcode is provided so that you can add it anywhere on your website. The beauty of this plugin is that it’s very easy to use, it allows you to fully customise the appearance. You can use either a slider or tile display, specify how many items you want per row or column, and it even allows you to hover the images to see the post description, amount of likes, and comments which links to the feed. Sounds awesome right? That’s exactly why it’s our go-to plugin for Instagram feeds on WordPress websites.

The best part of using a plugin for this sort of thing is that Instagrams policies are forever changing, so by simply updating to the latest version, we can always ensure this plugin works as intended.

Here is an example of how this plugin looks on your WordPress website:

We actually use this plugin on this website which you will see just above the footer. You will see the description and comments/links in the first image above.

Looks great right?

We’ve used a variety of plugins, but this one has definitely proved to be the best on the market!

Add Instagram Photos to your website using Instafeeed.js

We came across a really good light-weight plugin to add Instagram photos to your website and this was by using Instafeed.js. No jQuery required, just plain old javascript.

https://raw.github.com/stevenschobert/instafeed.js/master/instafeed.min.js

How do I set it up?

Setting up Instafeed.js is pretty straight-forward. Just download the script and include it in your HTML:


<script type="text/javascript" src="path/to/instafeed.min.js"></script>

Instafeed.js also supports AMD/CommonJS:


// AMD
require(["path/to/instafeed"], function(Instafeed) {

});

// CommonJS
var Instafeed = require("instafeed.js");

NPM/Bower

Instafeed.js is also available on NPM and Bower:


npm install instafeed.js      # npm
bower install instafeed.js    # bower

Basic Usage

Here’s how easy it is to get all images tagged with #awesome:


<script type="text/javascript">
    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'awesome',
        clientId: 'YOUR_CLIENT_ID'
    });
    feed.run();
</script>

Instafeed.js with automatically look for a

and fill it with linked thumbnails. Of course, you can easily change this behaviour using the standard options. Also, check out the advanced options and the section on templating for additional customizations.

Requirements

The only thing you’ll need to get going is a valid client id from Instagram’s API. You can easily register for one on Instagram’s website.

If you need help with that step, try Googling “How to get an Instagram client ID“.

Standard Options

  • clientId – Required. Your API client id from Instagram.
  • accessToken – A valid oAuth token. Can be used in place of a client ID.
  • target – The ID of a DOM element you want to add the images to.
  • template – Custom HTML template to use for images. See templating.
  • get – Customize what Instafeed fetches. Available options are:
    • popular (default) – Images from the popular page.
    • tagged – Images with a specific tag. Use tagName to specify the tag.
    • location – Images from a location. Use locationId to specify the location.
    • user – Images with a user. Use userId to specify the user. More info here.
  • tagName – Name of the tag to get. Use with get: ‘tagged’.
  • locationId – Unique id of a location to get. Use with get: ‘location’.
  • userId – Unique id of a user to get. Use with get: ‘user’.
  • sortBy – Sort the images in a set order. Available options are:
    • none (default) – As they come from Instagram.
    • most-recent – Newest to oldest.
    • least-recent – Oldest to newest.
    • most-liked – Highest # of likes to lowest.
    • least-liked – Lowest # likes to highest.
    • most-commented – Highest # of comments to lowest.
    • least-commented – Lowest # of comments to highest.
    • random – Random order.
  • links – Wrap the images with a link to the photo on Instagram.
  • limit – Maximum number of Images to add.
  • resolution – Size of the images to get. Available options are:
    • thumbnail (default) – 150×150
    • low_resolution – 306×306
    • standard_resolution – 612×612

Advanced Options

  • before – A callback function called before fetching images from Instagram.
  • after – A callback function called when images have been added to the page.
  • success – A callback function called when Instagram returns valid data. Takes the JSON data as an object argument.
  • error – A callback function called when there is an error fetching images.Takes an error message as a string argument.
  • mock – Fetch data without inserting images into DOM. Use with success callback.
  • filter – A function used to exclude images from your results. The function will be given the image data as an argument, and expects the function to return a boolean. See the example below for more information.

Example Filter (get username + tagged):


<script type="text/javascript">
    var feed = new Instafeed({
        get: 'user',
        userId: 'USER_ID',
        filter: function(image) {
            return image.tags.indexOf('TAG_NAME') >= 0;
        }
    });
    feed.run();
</script>

Templating

The easiest way to control the way Instafeed.js looks on your website is to use the template option. You can write your own HTML markup and it will be used for every image that Instafeed.js fetches.


<script type="text/javascript">
    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'awesome',
        clientId: 'YOUR_CLIENT_ID',
        template: '<a href="{{link}}"><img src="{{image}}" /></a>'
    });
    feed.run();
</script>

Notice the {{link}} and {{image}}? The templating option provides several tags for you to use to control where variables are inserted into your HTML markup. Available keywords are:

  • {{type}} – the image’s type, can be image or video.
  • {{width}} – the image’s width, in pixels.
  • {{height}} – the image’s height, in pixels.
  • {{orientation}} – the image’s orientation, can be square, portrait, or landscape.
  • {{link}} – URL to view the image on Instagram’s website.
  • {{image}} – URL of the image source. The size is inherited from the resolution option.
  • {{caption}} – Image’s caption text. Defaults to empty string if there isn’t one.
  • {{likes}} – Number of likes the image has.
  • {{comments}} – Number of comments the image has.
  • {{location}} – Name of the location associated with the image. Defaults to empty string.
  • {{id}} – Unique ID of the image. Useful if you want to use iPhone hooks to open the images directly in the Instagram app.
  • {{model}} – Full JSON object of the image. If you want to get a property of the image that isn’t listed above you access it using dot-notation. (ex: {{model.filter}} would get the filter used)

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Display Related Posts in WordPress

In this tutorial, we are going to show you two ways to display related posts on your WordPress website.

If you know a bit about bounce rate, you are probably already showing related posts on your website. Essentially, the bounce rate is a metric that measures the percentage of people who land on your website and do completely nothing on the page they entered. So they don’t click on a menu item, a ‘read more’ link or any other internal links on the page. This can have an effect on things such as your AdSense earnings. By following this tutorial and adding Related Posts to your WordPress; you are killing three birds with one stone. You are decreasing your bounce rate, increasing your AdSense income, and lastly, you are increasing your page views. As always, we will show you two methods in which you can add related posts to your WordPress website.

How to Display Related Posts in WordPress without a Plugin

As always, we start with our preferred method of adding this without a plugin. In our example, we are going to display two related posts which link to the post. We are adding the featured image, the category, the date, the title and a read more button.

The code can simply be pasted into your single.php file in a position in which you want to display your related posts.


// Related Posts
$tags = wp_get_post_tags($post->ID);
if ($tags) {
	echo '<h3>Related Posts</h3>';
	$first_tag = $tags[0]->term_id;

	$args=array(
		'tag__in' => array($first_tag),
		'post__not_in' => array($post->ID),
		'posts_per_page' => 2, // How many Posts to display
		'caller_get_posts' => 1 // A way to turn sticky posts off in a query.
	);
	$my_query = new WP_Query($args);
	if( $my_query->have_posts() ) {
		while ($my_query->have_posts()) : $my_query->the_post(); ?>										
			<a href="<?php the_permalink(); ?>">
				<?php if(get_the_post_thumbnail_url()) { ?>
    				<img alt="Related - <?php the_title(); ?>" src="<?php echo get_the_post_thumbnail_url(); ?>" />
    			<?php } else { ?>
    				<div class="img-holder"></div>
    			<?php } ?>	
			</a>												
			<?php $category = get_the_category(); ?>
			<p><?php echo $category[0]->cat_name; ?> / <?php echo get_the_date(); ?></p>													
			<a href="<?php the_permalink() ?>" rel="bookmark"><h4><?php the_title(); ?></h4></a>
			<a class="btn" href="<?php the_permalink(); ?>">Read More</a>
	<?php
	endwhile;
	}
wp_reset_query();
}

How to Display Related Posts in WordPress with a Plugin

A plugin can be used instead to do a similar thing. We used Yet Another Related Posts Plugin (YARPP) which gives a list of posts or pages related to the current blog post.

The key features of this plugin are:

  • You can use thumbnail or list view for your related content.
  • It will display related posts, pages, and custom post types.
  • It has a templating system which gives you advanced control of how your results are displayed.
  • It has an advanced and versatile algorithm. This is a fully customisable algorithm which considers post titles, content, tags, categories, and custom taxonomies. A very great feature to ensure your posts are accurately related to the post.
  • It includes an option to display related posts in RSS feeds with custom display options.
  • It includes REST API support which enables you to embed related posts in your web or JavaScript-driven app!
  • It includes shortcode support. So you can simply add the [yarpp] shortcode to place related posts anywhere you like.
  • It supports HTTPS and WordPress Multisite
  • And it's a plugin that is maintained with regular updates

Sounds good right? Download YARPP.

Conclusion

We now know of two methods on how we can add Related Posts to our WordPress website. We also now know the importance of how this can improve our bounce rate. So, which method did you prefer? Let us know in the comments below!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

3 Best LMS Plugins

Online courses have been growing in popularity, particularly now that it’s practically impossible to organise offline classes due to the social distancing regulations.

According to forecasts, the global e-learning market is expected to reach $238 billion by 2024, which means that we’re talking about a very lucrative industry.

Regardless of what your field of expertise is, you can easily transform your WordPress website into an online learning platform or a virtual classroom and offer your courses to people globally.

What you need is a learning management system (LMS) plugin, and voila! You can run your own version of Udemy or Treehouse without having to write code or build an entirely new website and start making money.

Here are some of the best LMS plugins that you should consider using.

What to Look for in an LMS Plugin?

A learning management system comes with several different features that allow you to create an online class setting. With an LMS plugin, you’ll be able to create and share classes, manage them, handle the paperwork, enrol students, and use tests and quizzes to evaluate your students’ knowledge.

To make sure that your e-learning website is effective and successful, pick an LMS plugin that offers the following functionalities:

  • Course building. Having a decent course page builder as well as tools for uploading various kinds of content such as PDFs, videos, or links, is very important.
  • Course progress information. This is important so that your students can see how well they’re progressing and stay motivated.
  • Student enrollment and management. With this functionality, you’ll be able to see how many students are there in your courses and collect payments from them.
  • Content dripping. This is a useful option that will slowly reveal the course materials as your students are progressing.
  • Homework options. Make it easy for your students to submit their homework, and for you to grade it.
  • Gamification. Offer your students incentives in the form of badges and certificates when they complete a task successfully or after the course is finished. Gamification plays an important role in making your students feel good about themselves and their accomplishments.

1. LearnDash

LearnDash is a popular online learning plugin – many universities and Fortune 500 companies use it thanks to its speed, powerful features, and professional-looking course design.

If you choose it, you’ll have more than just a basic set of features, meaning that you’ll have everything you need for selling courses, dripping content, gamification, and rewarding students, as well as action-based triggers.

It’s optimised for mobile, which means that learners will be able to attend your courses while on the go.

This plugin comes with a simple drag-and-drop functionality with which you can create multi-tiered courses together with lessons, quizzes, topics, and categories.

You can deliver all lessons at once, or you can use its drip-feed feature to schedule it for the entire duration of your course. Besides that, with this feature, you can also ensure that every learner spends the same amount of time on each lesson.

Other features include great monetisation tools, detailed reporting, support for different media types, and an option for running LearnDash on a network.

When it comes to pricing, you should know that there’s no free trial, although you can cancel your subscription after 30 days. You can have LearnDash for $159 a year for a single license together with support and all features.

2. LearnPress

This plugin is free, but to make the most of it, you’ll have to invest in some paid add-ons that will expand its functionalities.

Since there’s no set-up wizard, you’ll have to install and set it up on your own.

You can easily create a course together with lessons, quizzes, and questions. It’s worth mentioning that you can use the lessons and quizzes from one course into another, as well as that you can export your content and use it on another LearnPass-powered WordPress website.

LearnPress is a great option if you’re offering a course taught by multiple instructors. This can be useful for companies building courses for onboarding and training their employees, as these usually require different trainers for different fields.

When we’re talking about business training, the success of the entire effort depends on using business intelligence and data to scale training operations and aligning training metrics to key organisational objectives.

This plugin also supports the content drip option, assignments, quizzes, grading, and other standard learning features. It also integrates with WooCommerce and WordPress membership plugins.

You can use a WordPress theme, but to avoid compatibility issues and provide a better user experience, it’s best to purchase a dedicated LearnPress theme. Also, you’ll have to invest in a payment gateway integration, because by default, this plugin comes with PayPal as the only option.

3. Lifter LMS

Lifter LMS is a plugin that’s pretty easy to install, even on the existing WordPress websites.

Although its pricing starts at $299 annually, it does offer a full bundle for that amount. If you’d like to test it before committing to pay the full price, there’s a $1 30-day trial. However, it’s important to mention that the core plugin is free so that you can also choose to purchase individual add-ons at $99 each. In other words, you can choose to build a very simple e-learning course for free and invest only in a payment gateway plugin.

What you’ll get is support for multi-tier courses with training modules, lessons, topics, categories, and more. All this allows you to create both shorter courses as well as the entire degree programs. With the help of this plugin, you can make appealing courses with lots of multimedia content such as videos, audio recordings, text, and images. Besides that, there’s also a graphics pack with different backgrounds that you can use to make your courses more attractive.

The content-dripping feature allows you to control the delivery of your courses, while the import-export tool means that you can move your content between sites.

Another interesting feature is the so-called Social Learning, which allows your learners to create advanced profiles and learn together by leveraging a timeline similar to that of Facebook.

Regardless of which one of these three LMS plugins you choose, you can’t go wrong. It only depends on what kind of features fit the bill for your online courses, as well as the size of your budget.

Posted by: Michael – Qeedle

Michael has been working in marketing for almost a decade and has worked with a huge range of clients, which has made him knowledgeable on many different subjects. He has recently rediscovered a passion for writing and hopes to make it a daily habit. You can read more of Michael’s work at Qeedle.

 

It’s good to share

How to Change Your Default Category From “Uncategorized” in WordPress

For this tutorial, we will show you how to change the WordPress default category from “Uncategorized” to another category of your choice.

But why would I want to change this?

Categories are a type of WordPress taxonomy that helps users organise their posts or utilise them for filtering. By default, WordPress sets the default category automatically; this is defined as “Uncategorized”. With this, it becomes mandatory to manually select the desired category before publishing any new post. It’s a minor step, but it can quite frequently disorganise your website if you forget to update the post category on occasions.

The good news is, we can change the default category to any other category you want. For example, if you add a Category called “News”, we can make this the default and even remove the “Uncategorized” category.

Here are the 6 steps to change your default WordPress Category

1. Login to your WordPress Dashboard.

2. Navigate to Posts > Categories from the left side menu bar.

3. Add a new category that you would like to make your default category.

4. Select Writing > Settings from the left hand side bar menu.

5. Change the Default Post Category from “Uncategorized” to your newly preferred default category using the drop down menu.

6. Click Save Changes and that’s all there is to it! Your new posts will automatically select your new chose default category.

Conclusion

Changing the default category isn’t difficult when you follow the above steps, if you’ve not done it before you may not know where to look.

You might wonder why it matters… Well, having categories defined as “Uncategorized” doesn’t really give the user any idea of the blog posts they will reading. So having properly defined categories is always better not only for your website users, but using this along with tags will always help your websites crawl abilities by search engines. Categories and Tags are great elements to improve rankings and search visibility with websites today.

We hope you enjoyed this article, happy coding everyone!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Create the Default WordPress .htaccess File

The .htaccess is a distributed configuration file and is how Apache handles configuration changes on a per-directory basis.

WordPress uses the .htaccess file to manipulate how Apache serves files from its root directory and subdirectories thereof. Most notably, WordPress modifies this file to be able to handle pretty permalinks.

This page may be used to restore a corrupted .htaccess file or a misbehaving plugin.

This is the Default WordPress .htaccess configuration


    # BEGIN WordPress
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    </IfModule>
    # END WordPress

This is the WordPress .htaccess configuration for a website that has a sub-directory


    # BEGIN WordPress
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /foldername/
    RewriteRule ^index.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /foldername/index.php [L]
    </IfModule>
    # END WordPress

As a personal preference, we prefer to have sub-domains for our client’s websites, in all honestly, it makes it so much easier in terms of setting up and not breaking the structure. Should you want to host your websites on sub-directories though, ensure the path is correct and that you update the .htaccess file to accommodate the correct path.

We hope this has helped, thanks for reading!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Prevent Multi-Submit on Contact Form 7

Recently, we came across an issue where we were using the Mail (2) setting to send an automated email to a user who submits the form with an attachment. The issue was that this attachment was a 2MB file, so before you see the success message, you have to wait for the attachment to be sent which can take a bit of time. Because of this, users end up submitting the forms various times causing multiple submits and emails send to both parties (Especially when using a 3rd party SMTP host like SendGrid or MailGun).

Here is the method we used to prevent this sort of action which can simply be added to your functions.php file to be called on each page.


<?php
	// Prevent Multi Submit on all WPCF7 forms
	add_action( 'wp_footer', 'prevent_cf7_multiple_emails' );

	function prevent_cf7_multiple_emails() {
	?>

	<script type="text/javascript">
	var disableSubmit = false;
	jQuery('input.wpcf7-submit[type="submit"]').click(function() {
	    jQuery(':input[type="submit"]').attr('value',"Sending...");
	    if (disableSubmit == true) {
	        return false;
	    }
	    disableSubmit = true;
	    return true;
	})
	  
	var wpcf7Elm = document.querySelector( '.wpcf7' );
	wpcf7Elm.addEventListener( 'wpcf7_before_send_mail', function( event ) {
	    jQuery(':input[type="submit"]').attr('value',"Sent");
	    disableSubmit = false;
	}, false );

	wpcf7Elm.addEventListener( 'wpcf7invalid', function( event ) {
	    jQuery(':input[type="submit"]').attr('value',"Submit")
	    disableSubmit = false;
	}, false );
	</script>
	<?php
} ?>

What the above will do is change the text of the forms submit button to ‘Sending…’ and disable any further clicks until the message is delivered. Once the message is delivered, the submit button will change to ‘Sent’.

In addition to this, if there are any errors in the form, we can use the wpcf7invalid DOM Event which we can use to change the value of the submit button back to the original value; in our case, we changed it back to ‘Submit’.

In our case, we had pages with multiple forms and only needed this to be added to one of the forms on the website. To do this, you can view the page source and get the ID attribute for the form (e.g. #wpcf7-f4-o1), and simply add this before each of the selectors, like so; jQuery('#wpcf7-f4-o1 :input[type="submit"]')

There are other ways of doing this such as using a preloader on submit but our particular client was pretty happy with the solution we provided him with.

Feel free to leave a comment below if this has helped or if you have another preferred method of performing such a task.

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to create a WordPress Widget

A WordPress widget makes it easy for users to simply drag and drop elements into their site. There are many WordPress themes and plugins that use widgets to allow users to create their own layouts. In this article, we will show you how to create your own custom WordPress widget from scratch.

What is a WordPress Widget?

A WordPress widget was originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. The great thing about widgets is that you can drag and drop them into your sidebars or any widget-ready areas of your website. This allows great flexibility to plugin and theme developers. They can add functionality into their products and let users decide when and where to use that functionality without messing with code. Similarly, as a user you can also create your own widgets in a site-specific plugin so that you can drag and drop them into any theme you are using.

Creating your first Widget in WordPress

In this demonstration, we are going to add the widget through our functions.php file. We are going to create a simple widget that displays the current date and time. Take a look at this code and then paste it in your site-specific plugin to see it in action:-


// Creating the widget 
class wpb_widget extends WP_Widget {

function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget', 

// Widget name will appear in UI
__('Silva Time Widget', 'wpb_widget_domain'), 

// Widget description
array( 'description' => __( 'Sample widget based on Silva Web Designs Tutorial', 'wpb_widget_domain' ), ) 
);
}

// Creating widget front-end
// This is where the action happens
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];

// This is where you run the code and display the output
$widget_content  = "Today is " . date("d/m/Y");

echo __( $widget_content, 'wpb_widget_domain' );
echo $args['after_widget'];
}
		
// Widget Backend 
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( '', 'wpb_widget_domain' );
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php 
}
	
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
} // Class wpb_widget ends here

// Register and load the widget
function wpb_load_widget() {
	register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

Now go to Appearance --> , drag and drop Silva Time Widget in your sidebar to see this custom widget in action.

Simple wasn't it? First, we created a custom widget. Then we defined what that widget does and how to display the widget back-end. Then we defined how to handle changes made to the widget. Lastly, we registered and loaded the widget.

Now there are a few things that you might want to ask. For example, what wpb_text_domain does? WordPress uses gettext to handle translation and localization. This wpb_text_domain and __e tells gettext to make a string available for translation.

We hope this tutorial helped you learn how to create a custom WordPress widget. Let us know what widgets you are creating, by leaving a comment below.

If you have moved the widget into your sidebar, you can go to one of your WordPress pages to see the output code which will display the following:-

Today is DD/MM/YYYY.

I hope this helps!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share