• Gutenberg ready (preferably with block interface for set up)
• Easy to use and intuitive
• Able to be sized to full width and height as percentage of viewport
• Slides to contain an image with some elements overlaid (headings, text, button/link)
• Don’t want to use a pro/paid version of a plugin

So I just put together one myself with Lazy Blocks and Swiper.js. I found it was very easy to do and makes a great highly configurable solution that you can tailor to your exact needs so I thought I would share it here.

What is ‘Lazy Blocks’?

Lazy Blocks is a free plugin for building custom blocks. I love this plugin, it is very powerful but yet easy to use. I’ve been using it for many years. A typical use would be for something like what I would have used a shortcode for in years past. So instead of having a shortcode that you have to remember the name of and what attributes it takes, you now have a block with a user interface for whatever settings are needed. Much better for me and my clients! You do need to be familiar with coding to use it though so it’s not for people who are totally adverse to coding.

What is ‘Swiper.js’?

Swiper. js is a modern JavaScript general purpose slider script. It can be used for creating touch-friendly sliders and carousels. It is used as the ‘engine’ by many of the slider plugins available for WordPress.

Step 1 – Get the required Swiper.js files and place them in your theme

When building websites for my clients I usually build my own custom themes rather than using commercial of free themes, so my approach is to bundle the Swiper code in the theme. If you are using a commercial theme, you can also do the same in your child theme. You can place the Swiper files wherever makes sense to you but here’s where I put them:

1. swiper-bundle.min.js – place in [theme folder]/assets/scripts
2. swiper-bundle.min.css – place in [theme folder]/assets/css

Step 2 – Enqueue Swiper script and CSS

This is done in functions.php.

function sww_enqueue() {

	// enqueue Swiper script and CSS
	wp_enqueue_script('swiper-min', get_template_directory_uri() .'/assets/scripts/swiper-bundle.min.js');
	wp_enqueue_style('swiper-css', get_template_directory_uri() . '/assets/css/swiper-bundle.min.css');
	
	// enqueue the theme's main Javascript file
	$filetime = filemtime( get_stylesheet_directory() . '/themescripts.js'); // for cache busting
	wp_enqueue_script('sww-themescripts', get_template_directory_uri() .'/themescripts.js', array('jquery'), "$filetime", true);
}
add_action( 'wp_enqueue_scripts', 'sww_enqueue' ); 

You will notice that in addition to enqueueing the Swiper script and CSS, I have also enqueued themescripts.js. This is my theme’s main Javascript file. If you are working with a child theme you may not have one so just make blank Javascript file. I name mine ‘themescripts.js’ but you can name it whatever you want. We will need this for the next step.

Step 3 – Initialise Swiper

This is done with some JavaScript code. I place this in my themescripts.js file mentioned in previous step, but you can place it wherever makes sense in your case. I place it inside a jQuery(document).ready() so that it executes when all assets are loaded. Your code will depend on what features and settings you want to activate in Swiper. There are many options so you may need to refer to the Swiper docs for your own particular needs. But here is an example for my slider:

jQuery(document).ready(function( $ ) {
   // Initialise Swiper
	const swiper = new Swiper('.swiper', {
		// Optional parameters
		autoplay: {
			delay: 7000,
		},
		effect: 'slide', // Transition effect. Can be 'slide', 'fade', 'cube', 'coverflow', 'flip', 'creative' or 'cards'
		speed: 1000,
		// Navigation arrows
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
		loop: true
	});	
}

Step 4 – Create a custom block for your slider

Install and activate the Lazy Blocks plugin. Then choose Add Block from the Lazy Blocks menu. Once you get familiar with Lazy Blocks you will find there are many ways we can set this up but for this article I will give the example of how I set it up to suit my particular needs.

1. Name the block ‘Slider’
2. Select any icon you like and optionally any category you want
3. Click on Inspector Controls and add a new control with Label ‘Slides’
4. For type of controller, choose Repeater
5. For Row label, use ‘Slide {{#}}’
6. For Add Button Label, use ‘Add Slide’
7. Next add the child controls for the slides. These will be for the content that will make up the slide. For my slides I have an image, 2 headings, a description and a link button. Under your Slides control, click ‘Show Child Controls >’. Add one of type Image with label ‘Image’ and then 5 more of ‘Text’ type with labels ‘Heading 1’, ‘Heading 2’, ‘Description’, ‘Button text’ and ‘URL’.
8. For the code output, I stick with default ‘HTML + handlebars’. Enter the code shown below (modify it to suit your needs). Note that the content inside {{ }} is our handlebars placeholders. Make sure these match exactly the names of the controls you added.
9. Enable the ‘Single output code for Frontend and Editor’ option

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    {{#each slides}}
    <div class="swiper-slide">
      <img src="{{image.url}}" alt="">
      <div class="slider-overlay"><div class="overlay-inner">
        <h3>{{heading-1}}</h3>
        <h2>{{heading-2}}</h2>
        <p>{{description}}</p>
        <a href="url" class="button">{{button-text}}</a>
      </div></div>
    </div>
    {{/each}}
  </div>
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
</div>

Step 5 – Add custom CSS to control the layout of the slides

You can add this in your main style.css file, your child theme’s style.css or you could even add a block specific stylesheet. Again this is just my example, adapt it to your own needs.

:root {
   --swiper-theme-color: white;
}
.swiper {
   width: 100%;
   height: calc(90vh - 186px);
   position: relative;
   min-height: calc(100vw / 3);
}
.swiper-wrapper .swiper-slide>img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center center;
}
.slider-overlay {
   position: absolute;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 8;
}
.swiper-button-prev,
.swiper-button-next {
   outline: none;
}
.slider-overlay .overlay-inner {
   width: 90%;
   height: auto;
   max-width: var(--wp--style--global--content-size);
   padding: 80px 0;
   color: white;
}
.slider-overlay .overlay-inner .lazyblock-inner-blocks {
   width: fit-content;
   background-color: rgba(0, 0, 0, 0.2);
   padding: 30px;
}
.slider-overlay .overlay-inner .lazyblock-inner-blocks .wp-block-buttons {
   margin-bottom: 0;
}
.slider-overlay p {
   color: white;
   font-size: 24px;
   margin-top: 26px;
   margin-bottom: 26px;   
}
.slider-overlay h3 {
   color: white;
}
.slider-overlay h2 {
   font-size: 76px;
   color: var(--color1);
   margin-top: 26px;
   margin-bottom: 26px;
}
@media (max-width: 1400px) {
   .slider-overlay h2 {
      font-size: 60px;
   }
}
@media (max-width: 600px) {
   .slider-overlay h2 {
      font-size: 48px;
   }
   .slider-overlay {
      align-items: center;
   }
   .slider-overlay .overlay-inner .lazyblock-inner-blocks {
      padding: 20px;
   }
}

Step 6 – Test and adjust

When you add or edit a page you should now be able to find your custom Slider block. So go ahead and try it out. Most likely you will find you will need to make some adjustments to the CSS.

The post How to make a slider with Lazy Blocks and Swiper.js appeared first on Stellar Web Works.

Are you a business owner in Nelson looking for a web designer who can turn your online presence into a stunning and functional masterpiece? Look no further! In this article, we will walk you through the process of finding the best web designer in Nelson, ensuring that you make a confident and informed decision.

Finding a skilled and reliable web designer is essential for your business’s success in the digital era. A professional and visually appealing website can attract and retain customers, boost your online visibility, and drive conversions. However, with so many options available, it can be overwhelming to choose the right web designer for your specific needs.

In this comprehensive guide, we will provide you with valuable tips and insights on what to look for in a web designer, how to evaluate their portfolio and experience, and the questions to ask during the selection process. We will also share some helpful resources and tools to assist you in finding the perfect web designer who aligns with your brand vision and goals.

Don’t settle for anything less than the best web designer in Nelson. Let’s embark on this journey together and find the perfect partner to elevate your online presence to new heights.

Importance of Hiring a Professional Web Designer

In today’s digital landscape, having a well-designed website is no longer optional; it’s a necessity. A professional web designer brings expertise, creativity, and technical skills that are crucial for creating a site that not only looks great but also functions effectively. This is particularly important for businesses in Nelson, where competition is fierce, and first impressions matter. A professionally designed website can enhance your brand image, making you appear more credible and trustworthy to potential customers.

A professional web designer understands the importance of user experience (UX) and can ensure that your website is easy to navigate. This is vital because a complicated or confusing website can lead to high bounce rates, meaning visitors leave your site quickly without engaging with your content or services. A well-structured layout, intuitive navigation, and attractive visuals can keep users on your site longer, increasing the chances of conversion.

Hiring a professional means you’ll benefit from ongoing support and maintenance. A website is not a one-time project but rather a living entity that requires updates, security checks, and refinements over time. Professional designers often offer maintenance packages, ensuring your site remains current and functional. This proactive approach can help prevent potential issues that could disrupt your business operations and online presence.

Factors to Consider When Looking for a Web Designer in Nelson

When searching for the ideal web designer in Nelson, there are several factors to consider that will help you make an informed decision. First, assess the designer’s specialization. Some designers focus on e-commerce, while others may excel in creating brochure websites or blogs. It’s essential that they have experience designing websites similar to yours, as this familiarity can lead to a more efficient and effective design process.

Another crucial factor is the designer’s approach to SEO (Search Engine Optimization). A beautiful website is worthless if it cannot be found by potential customers. Inquire about their knowledge of SEO best practices and whether they incorporate these strategies into their design process. This will not only improve your website’s visibility in search engines but also increase your chances of attracting organic traffic.

Also consider the designer’s understanding of responsive design. With an increasing number of users accessing websites on mobile devices, it’s critical that your site performs well across all screen sizes. A professional designer should prioritize creating a responsive layout that adapts seamlessly to different devices, ensuring a positive user experience regardless of how visitors access your site.

Researching Web Design Portfolios and Testimonials

One of the most effective ways to gauge a web designer’s capabilities is by examining their portfolio. A robust portfolio showcases a designer’s previous work, highlighting their style, creativity, and technical skills. When reviewing portfolios, pay attention to the diversity of projects they have undertaken. This will give you insight into their versatility and ability to adapt to different brand aesthetics and requirements.

In addition to the portfolio, testimonials from past clients can provide valuable information about the designer’s professionalism and reliability. Look for feedback that speaks to their communication skills, adherence to deadlines, and overall satisfaction with the final product. Positive testimonials can instill confidence in your choice, while negative reviews can be a red flag that warrants further investigation.

Don’t hesitate to reach out to past clients for informal chats about their experiences. This can provide you with firsthand insights into what it’s like to work with the designer and whether they align with your working style. A designer’s ability to maintain a good relationship with clients often reflects their commitment to delivering quality results and ensuring client satisfaction.

Evaluating the Web Designer’s Expertise and Experience

When choosing a web designer, evaluating their expertise and experience is paramount. Look for designers who have a solid educational background in web design or related fields. Formal training often equips designers with a foundational understanding of design principles, coding languages, and user experience strategies. However, practical experience is equally important; designers who have been in the field for several years will likely have encountered a variety of challenges and learned how to overcome them effectively.

Consider the range of skills they possess. A good web designer should be proficient in various programming languages, such as HTML, CSS, and JavaScript. They should also be familiar with content management systems (CMS) like WordPress, which can be critical for creating and managing your site. Additionally, knowledge of graphic design tools can be beneficial in crafting visually appealing interfaces that align with your brand identity.

Furthermore, it’s essential to ask about their ongoing education. The digital landscape is ever-evolving, and the best designers make a point of staying updated with the latest trends, tools, and technologies. This commitment to continuous learning can significantly enhance the quality of their work and ensure that your website remains competitive in the marketplace.

Understanding the Web Designer’s Development Process and Timeline

A clear understanding of a web designer’s development process is vital to ensure that your project runs smoothly. Before engaging with a designer, inquire about their typical workflow. A professional designer should have a structured approach that includes phases such as research, design, development, testing, and launch. This systematic process helps to minimize errors and ensures that all aspects of the website are thoroughly addressed before going live.

Additionally, discuss the timeline for your project. While some designers may provide an estimated completion date upfront, it’s essential to remain flexible, as unforeseen challenges can arise during the development process. However, a reputable designer will keep you updated at every stage, allowing for adjustments to be made if necessary. They should also set realistic deadlines and manage your expectations about the time required for revisions and feedback.

Finally, clarify how they handle revisions. It’s common for clients to request changes during the design process, and a good web designer should be open to feedback and willing to make necessary adjustments. Establishing a clear understanding of the number of revisions included in your contract can help prevent misunderstandings and ensure that you are satisfied with the final product.

Comparing Pricing and Budgeting for Web Design Services

Pricing can be one of the most daunting aspects of hiring a web designer. It’s essential to have a clear budget in mind before you start reaching out to potential designers. However, remember that the cheapest option may not always provide the best quality. When comparing pricing, consider what’s included in the package—such as hosting, maintenance, and SEO services. A more comprehensive package may warrant a higher price tag but could save you money in the long run.

Request quotes from multiple designers to gain a better understanding of the market rates in Nelson. This will not only help you identify a reasonable price range but also give you the opportunity to evaluate what each designer offers. Be cautious of any designer who provides a quote without fully understanding your project; this may indicate a lack of experience or professionalism.

Furthermore, consider the long-term value of your investment. A well-designed website can yield significant returns by attracting more customers and increasing sales. Therefore, it may be worth spending a bit more for a designer who can deliver a superior product that aligns with your business goals. Make sure to weigh the initial costs against the potential benefits when making your final decision.

Communication and Collaboration with the Web Designer

Effective communication is crucial when working with a web designer. From the initial consultation to the project’s completion, a transparent and open dialogue will help ensure that your vision is accurately translated into the final product. During your first interactions, pay attention to how well the designer listens to your ideas and responds to your questions. A designer who values your input and communicates clearly is likely to be more collaborative throughout the process.

Establishing a communication plan is also beneficial. Discuss how often you will check in on the project’s progress, what tools you will use to communicate (such as email, phone calls, or project management software), and how feedback will be shared. This structured approach can help prevent misunderstandings and ensure that both parties remain aligned throughout the project.

Finally, be open to collaboration. While you may have a clear idea of what you want, a professional web designer may offer valuable insights based on their expertise. Embrace their suggestions and be willing to explore creative solutions that may enhance your website’s functionality and aesthetic appeal. A successful partnership hinges on mutual respect and a shared commitment to achieving the best possible outcome.

Additional Services Offered by Web Designers in Nelson

When seeking a web designer, it’s wise to inquire about additional services they may offer. Many designers provide a suite of services that go beyond website creation, such as branding, graphic design, and digital marketing. These additional services can be invaluable, especially for small businesses looking for a cohesive brand identity across all platforms.

For instance, a designer who offers branding services can help you develop a logo and consistent visual elements that reflect your brand’s personality. This can create a more unified presence across your website and other marketing materials, enhancing brand recognition. Similarly, if the designer provides digital marketing services, they can assist you in promoting your website once it’s live, ensuring that your target audience knows about your offerings.

Additionally, consider whether the designer offers training or support after your website launches. A good web designer will not only create a functional site but will also equip you with the knowledge and tools needed to manage it effectively. This might include training on how to update content, manage e-commerce functionality, or utilize analytics tools to track your site’s performance. Such support can empower you to take full control of your online presence.

Final Thoughts on Finding the Best Web Designer in Nelson

The process of creating your website should be a partnership where both you and the designer contribute ideas and expertise. With the right support, you can bring your vision to life, ensuring that your website not only meets your needs but also resonates with your target audience.

In the end, take your time to research, ask questions, and trust your instincts. By following the tips outlined in this guide, you’ll be well-equipped to find a web designer who can elevate your business’s online presence to new heights. Embrace this opportunity to create a stunning, functional, and effective website that reflects your brand and engages your customers.

The post Finding the Best Web Designer in Nelson appeared first on Stellar Web Works.

Common WordPress plugin pitfalls to avoid

• Bloat
  Plugins add more code to a website which has to be processed and delivered to the user’s web browser. Some plugins are small and efficient but others are less efficient and can include large libraries of code only to use a tiny fraction of the code. This ‘bloat’ can have a significant negative effect on your website performance.
• Plugin abandonment
  Many plugins end up getting abandoned, i.e. the developers don’t continue to test the plugins with new releases of WordPress and update them to keep them compatible with the new versions of WordPress as they are released. This can cause websites to malfunction or have security vulnerabilities.
• Security risks
  Any developer can develop and release a plugin for WordPress, so the quality of coding varies widely. This can introduce a risk of security vulnerabilities which can compromise a website’s security.
• Added maintenance
  Plugins need to be kept up to date to keep your website secure and everything working together. Generally WordPress makes updates simple and fast with one click updates, or even auto-updates, but you also need to test a website after updates to make sure the update hasn’t broken something on your website.
• Not cleaning up after uninstalling
  Some plugins add data and tables to to the website database. Often when the plugin is uninstalled, this data is left behind. A well written plugin should have an option to remove all it’s data upon uninstall. Look for this option and make sure it is selected before uninstalling the plugin.

Guidelines for choosing WordPress plugins

• Do you really need the plugin?
  This is the first thing to ask when considering installing a plugin. Is the functionality provided by the plugin important to your website? Can you achieve what you are trying to do without using a plugin?
• Does the plugin have a good track record?
  Check how long the plugin has been around for, it it has been updated regularly. Check the reviews to see if the plugin is highly rated or if there are any concerning negative reviews. Check if the plugin developer(s) have other plugins and if those plugins also have good track records.
• Watch out for ‘freemium’ plugins
  If the plugin is a ‘freemium’ plugin, make sure that the free version does everything you need or the paid version is worth the price to you. Some ‘freemium’ plugins offer such limited functionality that they are essentially just advertisements for the paid versions. And some overload the WordPress admin area with upgrade nags that can be quite annoying.
• Avoid duplicate functionality
  Check that the plugin isn’t duplicating functionality that you already have in another plugin or in WordPress itself.
• Understand the terms of paid plugins
  Some plugins require a one time payment while others are a subscription model where you have to pay every year. Sometimes the subscriptions are just for access to support and you can still have access to updates without renewing the subscription. Just make sure you understand the terms.
• Compare and try out similar plugins
  There are often many plugins available for a given task of functionality. Don’t just grab the first one, take the time to compare the different options available. Install and try out the top contenders to pick the one that works best for your requirements.
• Make sure the plugin is adequately documented
  For plugins with complex functionality, documentation is an important factor to consider. Check that there is adequate documentation so that you can understand how to properly use the plugin.
• What support is available?
  Again, for more complex plugins, having access to support can be important. Check what support is available and if support (or lack of it!) is talked about in plugin reviews.
• Watch out for becoming dependant on a plugin
  Be careful not to make a website dependant on a particular plugin if possible. In some cases where the plugin is a major piece of the website, e.g. WooCommerce for an online store, this is unavoidable. Page builders are examples of unnecessary plugins that make a website totally dependant on them. They change the way pages are built and edited and they rely on the plugin to generate the output for the pages and if you disable the plugin, your website is completely broken (see Why page builders suck).

The post Choose your WordPress plugins carefully appeared first on Stellar Web Works.

How to create and use a Block Pattern

In a nutshell you just create a block layout directly in the WordPress block editor and copy the markup into a file and save it in a special folder called ‘patterns’ in your theme. Patterns have been around since WordPress 5.5 but since WordPress 6.0 the registration process for patterns has been simplified – no formal registration in functions.php needed any more, just bung your pattern file into the patterns folder and it will be registered automatically. The pattern file just needs to have a header like this:

/**
* Title: My custom block pattern
* Slug: sww/my-custom-pattern
* Categories: featured
*/

Title and Slug are the only required properties, but there are also optional properties including description, categories, keywords, viewportWidth, blockTypes & inserter. I like to add the ‘Categories: featured’ property to my headers so that my custom patterns show up at the top of the Patterns tab.

Next we need the markup for the pattern and the easiest way to generate this is in the WordPress block editor. You can do it on a new page/post or copy a group of blocks from an existing page. For layouts, I find that some of the most useful blocks are Groups, Columns and Cover blocks which can be nested, given custom classes and styled with custom CSS (which I add to my theme’s style.css file) to create complex layouts. Once you have created the layout in the editor, just copy the markup and paste it into your pattern file. To copy the markup, just click on the 3 dots and choose the Copy block(s) action.

After you upload your patterns folder and patterns files to your theme folder, the patterns show up in the Patterns tab ready to be reused on any of your pages or posts.

Using the Block Pattern

Click the block inserter Toggle button:

Then switch to the Patterns tab:

And (if you set the category to Featured), your new patterns will be right there waiting to be used. That’s it, easy!

Block Templates

Block templates are just block patterns that load up when you create a new page or post, so you can have your default layout loaded up and ready to go on each new page/post. To create a block template, we need to register it in our functions.php file as follows:

function sww_register_template() {
   $post_type_object = get_post_type_object( 'page' );
   $post_type_object->template = array(
      array( 'core/pattern', array(
         'slug' => 'sww/page-pattern',
     ) ),
   );
}
add_action( 'init', 'sww_register_template' );

You can add blocks directly in the template array but the easiest way to set it up is to use a pattern for your template. Just create the pattern for your page/post as described above. This example registers a template for the ‘page’ post type and uses a pattern with the slug ‘sww/page-pattern’ (‘sww’ is the namespace I chose, namespaces prevent clashes with other patterns). Now whenever I create a new page, this block pattern is loaded by default.

The post How to create WordPress Block Patterns and Block Templates appeared first on Stellar Web Works.

This situation affects some of my older clients who’s email was set up prior to 2012 using what was then known as Google Apps (it was renamed G Suite in 2016 and they transitioned G Suite to Google Workspace in 2020). The Google Apps service was available for free since it was launched in 2006 but in 2012 Google discontinued offering the free version. But existing Google Apps free accounts remained free – until now.

In January 2022, Google announced that they are ending the free version which they call ‘G Suite Legacy Free’. Action is required before 1st June to maintain email services.

In a nutshell, the options are:

1. Transition to the Google Workspace paid service (cost is NZ$9/mth per user account [a user account is a separate inbox, one user account can have multiple email addresses, i.e. aliases]) – this requires entering your billing details in the Google Workspace Admin Console before 1st August.
   
   
2. Sign up for Google’s no cost option before 1st June – this allows you to retain your account but your email address would become ????@gmail.com since the no cost version does not include custom email address using your own domain name. Currently this ‘no cost option’ is not yet available so Google have a waiting list for it and if you are on waiting list, you continue on legacy free version until it becomes available – essentially it buys you more time. Mail forwarding could be used in conjunction with the no cost option so you would continue to get email sent to your existing email addresses. However when you send emails they would be sent with an ????@gmail.com email address. (as of 27/04/22 the wait list is not live yet. According to Google, ‘You’ll see a message about the waiting list in your Google Admin console in the coming weeks.‘)
   
   IMPORTANT UPDATE 20/05/22: Looks like Google have changed their plans around this. They are now offering an option to stay on the no-cost Legacy version G Suite, but for Personal Use only. What exactly is meant by ‘Personal Use’ and how or if it will be enforced is still not clear. There is no mention any more of a waiting list for a ‘no cost option’, so it appears the no cost option has now changed to the continuation of Legacy G Suite plans for personal use. They have also extended the deadline to 27th June 2022. See below for screenshots of how to transition your account to the free personal version. The best source I’ve found for updates on this changing story is this blog page.
   
   
3. Switch to a different email service provider. There are cheaper providers available, such as Zoho. However there is the cost, effort and inconvenience of switching to take into consideration.

Some more background on this change here:

https://9to5google.com/2022/01/19/g-suite-legacy-free-edition/

https://techcrunch.com/2022/01/28/google-will-let-legacy-g-suite-users-migrate-to-free-google-accounts/

https://www.tabgeeks.com/tabgeeks-blog/gsuitelegacy

The post Google Terminating Free Edition Of G Suite / Google Apps appeared first on Stellar Web Works.

Note: Keep in mind that most of these guides promote their own tools and services. Therefore it is good to have a look at guides from multiple sources so that you can get a fuller understanding of what tools are available.

The Beginner’s Guide to SEO – Moz.com

This is a pretty comprehensive guide to SEO broken into 7 chapters. The first chapter, ‘SEO 101’, is a good introduction to SEO and then it gets more into the nitty-gritty details in the remaining chapters.

The Beginner’s Guide to SEO – ahrefs.com

Another beginners guide in chapter form – 6 chapters in this one, each chapter further broken down into chapters/sections.

Small business SEO and local search

This guide focuses on the factors involved in local search so it is particularly relevant to businesses that target customers in their locality.

The post SEO resources for our clients appeared first on Stellar Web Works.

For example, if someone opens a web browser on their phone or computer and types in the address of your website or finds it on Google, they will see a ‘page’ from your website. All the information on this page has to be stored on a special type of computer that has a high capacity connection to the internet, is available 24/7 and capable of handling a large volume of requests at the same time and has all the specialised software needed to operate your website. This computer is called a web server (technically the web server is something running on the computer but we often just call the computer a web server). So to have a website on the internet you need to have it on a web server. A web hosting company operates web servers and rents out space on their web servers where people or businesses can put all the files and data needed to run their website and have it delivered to anyone who connects to the internet and requests a page from the website.

What about domain name registration?

A frequent point of confusion for some people is that they pay a bill for their domain name registration and then they receive a bill for website hosting. They often wonder, didn’t I pay that that already? Well, domain name registration and web hosting are actually two different services and both are essential for keeping a website up and running. A domain name is your web address. For example, the domain name of this website is sww.nz. So to run this website I have to register the domain name sww.nz. It is registered for a certain period of time, often one year, and then I need to pay my domain name registrar to renew the registration. If I don’t keep it renewed, the domain no longer belongs to me and is no longer hooked up to this website so the website will not be available to anyone who requests it.

So now you can see that you need both of these essential services to keep a website up and running: you need an address for your website (the domain name) AND you need a special computer to store your website files and deliver it to anyone who requests it (website hosting).

Here at Stellar Web Works, we offer a reliable web hosting service with personalised support. We can assist with domain name registration but do not provide this service directly. Usually we set up an account for our customers at a domain name registrar and then we hand that account over to the customer and they get billed directly by that other company for domain name renewal.

The post What is Website Hosting? appeared first on Stellar Web Works.

Search engine optimisation is all about improving how a website performs in the results returned by the search engines (Google, Yahoo, Bing/MSN, etc.) for related keywords and phrases. There are 2 main aspects to it – 1) On-site SEO and 2) Off-site SEO.

On-site SEO

On-site SEO covers things you can change on your website that will improve where you appear in search results for certain keywords and phrases. Primarily this is about making sure important keywords and phrases appear in the right places on your web pages. Firstly you need to put yourself in the mind of your potential visitors/customers and think about what words or phrases they might be searching for and make a shortlist of the most important ones. For the search engine to return your web page in a search with one of these phrases, the words need to be somewhere within your web pages. There are different places on a web page that the words may appear and some carry more weight than others. Generally speaking, the main places in order of how they are weighted are: a) the title, b) main page heading, c) other headings on the page, d) the description, e) the body text.

Stellar Web Works has installed an SEO plugin on your website which will allow you to tweak the title and description for each page. You can find the settings for each page under the title WordPress SEO by Yoast when you edit the page. The main fields of interest in this section are SEO Title and Meta description.

 
What is the title?
The title appears at the very top of the browser window. It also appears in the search results. By default the page heading is used as the title. Keep it short and meaningful because if you stuff in a heap of keywords it will look like spam and many people won’t click on it. Also if you make it very long you are essentially ‘watering down’ the effect of any keywords you have used – so be very selective and restrict it to the very most important keywords/phrases.

What is the description?
The description usually appears as the descriptive text in the search results. If none is provided, the search engines will use some text from the body of the page, usually but not always, from first paragraph. Anything more than 160 characters is ignored by most search engines. Keep in mind that this should read well as someone may read it in their search results before they click on your page, i.e. this text could influence whether or not they visit your website.

What about keywords?
The keywords meta tag is a hidden tag in a web page where you can put a list of keywords. These keywords used to be considered by search engines in the early days of the web but these days they totally are ignored so they do not make any difference as far as search engine optimisation is concerned. Therefore there is no point in entering keywords into this field apart from using it for your own records.

How do I alter title and description in WordPress?
Title and description can be altered on any page. When you edit the page, scroll down towards the bottom and you will see a section called WordPress SEO by Yoast – there you can enter a title and description. If you don’t enter any it will use the defaults (page heading for title and search engine will extract text from body for description).

I’ve changed my title and description but it did not change in Google?
Google indexes your site periodically. Give it at least a week, for new sites it can take longer.

Keyword Research

Google Adwords provides a useful tool for keyword research which can help you determine the volume of searches for specific keywords/phrases as well as uncover related search terms. This can help you tweak your content by adding in important keywords that you may not have thought of and establish which keywords should be placed in the high priority positions such as page titles and headings. You can access this tool at:

https://ads.google.com/intl/en_nz/home/tools/keyword-planner/

Off-site SEO

Off-site SEO is mainly about getting other websites and directories to link to your site. The more links in to your website, the more ‘important’ the search engines will consider your site to be.

Links from other websites

Links from websites closely related to your subject matter have more weight as far as the search engines are concerned. For starters, we suggest that you contact any website owners that you know and ask them to add a link to your website. Ask for links from businesses with whom you have existing relationships—e.g., suppliers, stockists, etc.

Note that reciprocal links (I link to you and you link to me) are not very powerful – a one way link (someone links to your website but your website does not link back to them) has much more weight so try to get one way links where possible.

Web profiles and Directories

You can also submit your website/business information to some of the free online directories. The main one that almost every business should be on is Google My Business. Google My Business is highly integrated with Google Search – the map results that you see in local searches are Google My Business listings. Once you have a business listing on Google, it is well worth enhancing it by:

• Add logo and photos
• Add as much relevant info about your business as possible (e.g. opening hours, holidays, services, categories, contact details etc.)
• Make sure you have the correct link to your website!
• Get customers to give you a rating and review (5 star hopefully!)

A few other web directories relevant to the New Zealand market are:

• http://www.finda.co.nz
• http://www.hotfrog.co.nz
• https://www.neighbourly.co.nz/community/business
• https://www.yelp.com (major international local business guide specialising in restaurants, bars and local services)
• https://www.fyple.co.nz
• https://www.zenbu.co.nz
• http://www.zipleaf.co.nz
• https://www.found.org.nz (for community groups including culture, art, sport, recreation, education, welfare)
• http://www.nocowboys.co.nz (for trades and service providers)
• http://yellow.co.nz (if you are in yellow pages you should automatically be here, but be aware that you can update and add details such as your website to your listing)
• You can find more by Googeling, e.g. New Zealand web directories for trades

Other places to promote your website

Also if you are active in various online web forums and social networks, it can often be beneficial to include a link to your website in your forum signature or network home page. Some people create social networking pages (on sites such as Facebook.com, LinkedIn.com, Twitter.com, etc.) specifically to promote their website. This can be a good avenue for promoting your website if you are committed to developing your profile, building up your network and being active within the communities.

Pay Per Click (PPC) and Online Advertising
PPC, advertising is not SEO per-se but closely related. If you want to get your website noticed above the competition and have a budget for advertising, you can advertise in search engines (Google Ads is the main one). You can set this up and manage it yourself or hire a professional to set it up for you. Stellar Web Works does not usually offer this service but we may be able to put you in touch with specialists. There are other avenues for online advertising, Facebook is a popular one.

Further Resources We’ve only scratched the surface on SEO here. If SEO is important to the success of your website it pays to educate yourself. Even if you hire SEO professionals (actually especially if you hire SEO professionals) it is important to understand what they are doing and what they are charging you for and to be able to determine if they are worth the investment.

The post Search Engine Optimisation (SEO) Basics appeared first on Stellar Web Works.

After Googling it, I found a myriad of different solutions and troubleshooting steps to take but in the back of my mind I remembered encountering this before and remembered that it was a simple fix. One solution suggested using the Media Library upload button instead of the direct Upload button. This did actually did allow me to upload the image but when I went to save the page I got the error “Updating failed. Error message: The response is not a valid JSON response.”

The Solution

Eventually I stumbled on the very simple solution – just update the Permalinks! After that, the problem was solved! It may not be the solution for every case of this error but definitely something to try if you are encountering this error.

Another thing worth checking is in Tools > Site Health check if there are any issues relating to Rest API (which is required by Gutenberg). In my case the permalinks issue also caused a Rest API misconfiguration to be noted in Site Health and once I updated the permalinks it was cleared.

The post Simple fix for WordPress “The response is not a valid JSON response” error appeared first on Stellar Web Works.

• Visual Composer
• WPBakery
• Elementor
• Divi Builder
• Beaver Builder
• WP Page Builder
• SiteOrigin Page Builder
• Themify Builder
• Cornerstone
• and many more

Page builders are primarily aimed at DIYers who want to build their own websites but don’t have the HTML & CSS coding skills to create web page layouts with raw code. They certainly can fulfil a need in this area, if used wisely. I have worked with a few of the more popular page builders for some of my projects. Also, I have taken over maintenance of websites that have been built with page builders. From my experiences so far, I have concluded that page builders are not a good solution for me or my clients. As a website developer I find them inefficient. I do not think they are a good fit for my clients either as they are overly complex for managing their website content. And, as for the websites created with them, they add bloat and impact performance. Here are six reasons why page builders are problematic:

1. Page Builders are Overly Complex

Page builders purport to be to be intuitive, easy to use, ‘drag and drop’ interfaces for creating web pages. From my experience, this is far from the truth. They come loaded with a myriad of different elements, often multiple elements for creating the same or similar types of output. Each element can come with multiple screens of configuration options that control content, layout options and styling options. There can be a quite steep learning curve in getting familiar with each different page builder’s way of doing things. The large number of elements, most of which will not be used by any one website, get in the way of the elements that are actually needed. Same with all the configuration options on each element; most are not needed for any one website but you have to scan through all of them to find the ones you actually need.

2. Page builders lock you in with their own unique non-standardised code

Once you build a page with a page builder you are stuck with it. You cannot revert to editing the page natively in WordPress. There is no standardisation between page builders. They each have their own way of doing things and generate their own unique output so you cannot switch to a different page builder without starting from scratch.

3. Page Builders encourage bad practices of in-line styling of individual elements

This is a big one. A decent web developer will understand how to construct style-sheets in a way that promotes consistency, re-usability and efficiency. Page builders tend to do the opposite. Each element comes with multiple styling options that result in sloppy output full of inline styles. This breaks the styling consistency of the website. This approach can be an absolute nightmare if you want to make site-wide styling changes. You may end up having to edit each page individually in multiple places. (I’ve been there with some websites that I’ve inherited.) In a way, page builders take us back to the bad old days of pre-historic WISIWIG editors such as Microsoft Front Page that produced horrendously bloated and inconsistent code that was difficult to manage.

4. Page builders are slow and inefficient to work with

I manage some websites that use page builders and when I have to make content updates, I find that it takes me much longer than it would for similar updates on sites that do not use page builders. There are two main reasons. Firstly the page builders take additional time to load and to save changes. Secondly there are often multiple clicks, extra page loads or dialogue box opens, tab switches, etc to get to what you need to change. Sometimes finding the right place within the myriad of elements and element options can add time to the task. The combination of these factors make content editing tedious and painfully slow.

5. Page builders add bloat and slow down a website

In addition to slowing down the back-end of the website and the content editing process, page builders also slow down the front end of the website. They add numerous files such as stylesheets, scripts, font files, etc., that can add significantly to the load time for a web page. Most of these additional resources are not even used. They are there to support all the possible widgets and options that the page builder provides.

6. Non-standard ways to work with content

A page builder replaces the standard WordPress way of editing content with a totally different interface and a different process. Each page builder developer has their own ideas about the best way to work with content. Each page builder has different quirks, bugs, capabilities and limitations. Even if you are familiar with one page builder, there is usually a significant learning curve if you move to working with a different page builder. Looking for lists of page builders I’m finding lists of more than 20 different page builders for WordPress! Imagine someone working for a business that has been trained in managing their WordPress website. Then if they move on to managing a different WordPress website that uses a different page builder, they have to be trained all over again in how to work with it.

So there you have it, six major problems with page builders. Fortunately there is actually a solution to this page builder mess. It’s called Gutenberg. Gutenberg is WordPress’s revolutionary new approach to managing content that became part of the WordPress core as of version 5.0. But that’s a topic for a another post.

The post Why WordPress Page Builders Suck appeared first on Stellar Web Works.