How to Use Redirection to Personalize Your WordPress Website?

URL redirection is a method to redirect visitors to a specific page or section of your website. It’s most commonly used when a website is rebranded or under maintenance – through a simple URL redirection, visitors are redirected to the new website or the “under maintenance” page. However, what a lot of people don’t realize is that URL redirection can do a lot more than that; it can also be a powerful marketing tool. In this article, I’m going to explain how to effectively use redirection to personalize your WordPress website.

What is a URL redirection?

A URL redirection sends users and search engines to a different URL from the one that they requested.  

There are two different types of redirections, and each has different use cases:

HTTP level redirection

This is done by 301 (moved permanently) and 302/307 (moved temporarily) redirects.

  • 301 Redirect
    Facilitates permanent redirects of a page or domain to the new URL.
  • 302 Moved Temporarily
    Facilitates temporary redirection of a page or domain to the new URL.

HTTP-level redirection lets search engines know about the redirection. So, for example, if your website declares a 301 permanent redirect to Google, Google transfers your old page or domain ranking power to the new one. But if you use 302 temporary redirects, the old site’s ranking power won’t be transferred to the new page or domain as the redirection is temporary. 

This type of redirection is useful for rebranded or migrated websites as well as to update obsolete pages within the websites but If you want to use HTTP-level redirection you have to be cautious with its SEO implications.

You can do HTTP redirects by directly editing the .htaccess file in your server or by using  SEO tools such as YoastSEO and UltimateSEO.

Browser-level Redirection

There is also a second method in implementing conduct redirects right within the browser without changing anything at the HTTP level and letting search engines know about it. This is useful when you want to redirect your visitors to different pages based on specific conditions but you don’t want this to affect your website’s and individual pages ranking power. For example you want to redirect the traffic coming from a specific source to a special page optimized for that source but you don’t want this to affect the SEO ranking power of your main landing page.

Browser-level redirection can be done by coding or readymade tools. This type of redirection is most useful for personalization and marketing purposes. For example:

  • Redirecting users from a specific source such as Instagram to a special landing page
  • Showing different homepages to visitors based on their stage. For example guests, leads and customers seeing different versions.
  • Redirecting users from Brazil to a Brazilian version of your homepage with local content
  • Showing a totally different and optimized homepage to your mobile users 
  • Showing a temporary and  exclusive landing page to a loyal customer when they hit a certain number of purchases

In this article, we’re going to further cover this kind of browser-level redirects. We’ll use our newly introduced marketing automation and personalization tool for WordPress and WooCommerce websites called Growmatik as a case study to show how to create conditional redirections to personalize your website for different segments. 

Growmatik creates automation in the form of a ‘IF this THEN that’ rule. You can define different conditions (such as specific source, location, device or date) to trigger a redirection, and the redirection will automatically get executed when the condition is triggered.

Redirect traffic from a specific domain

If your website has a noticeable amount of traffic from a specific website such as a social media website or a partner blog, you can consider showing them a special landing page on their first visit. The content of this page can be optimized based on the source they are coming from and boosted with exclusive items such as discounts.

Using Growmatik, we’ll define this rule:
IF [Source is X] THEN [Show Page Y].

  1. In the Growmatik automations page, click on the + icon in one of the columns. This defines the user type you want to target with this redirection. It can be guests, leads and customers. We’ll select customers for this example.
  2. Select Source from the conditions list (next to If)
  3. Select domain and enter the website you want to define as the source. Let’s say it’s instagram.com and click Save.
redirection to personalize your WordPress website

4. Select Show Page from the actions list (next to Then). You will have two options from:
By internal, you can choose a page inside your website and
By external, you can define an external website to refer the visitor to

redirection to personalize your WordPress website

5. Check the ‘Activate rule immediately after creation’ if not checked and click on the Create Rule button.

Using the above simple rule all of the customers who are referred by Instagram, will be redirected to Instagram landing. Please note that this applies only to your existing customers as we defined that user type when creating the rule.

Redirect your ads traffic based on URL parameters (UTMs)

You can redirect the traffic coming from specific ad campaigns that you publish via Adwords, banners or blogs you do outside your website to personalize your content accordingly. For example, a nice special landing page exclusively built for your Adwords ads, a page built for your promotional email campaign or a special landing page for an online event or visitors of your booth who get a QR code to visit your website and join a competition, get discounts and so on.

You will need to define URL parameters in the form of UTMs in links you put in your ad campaign to your website. UTM values help you identify the source of the traffic in a narrower level than domain. So for a promo email campaign, you can use the link: 
https://your-website.com?UTM_source=PromoEmailCampaign

We will create a redirection rule such as the previous one just this time source should be set UTM values:
IF [UTM_source is X] THEN [Show Page Y]

redirection to personalize your WordPress website

Redirect your mobile visitors to an exclusive landing page

All of us know the importance of optimizing websites loading speed and responsiveness to improve the mobile experience, but this is actually being done by many already. So if you want to take it a step further to stand out in the competition you can create a totally different landing page for mobile users with optimized design and exclusive content.

IF [device is mobile] THEN [Show Page X]:

  1. In the Growmatik automations page, click on the + icon in one of the columns to define the user type you want to target with this redirection. For this example, we’ll choose customers.
  2. Select Device from the conditions list.
  3. Select the device type you want to target with: mobile, tablet or desktop
redirection to personalize your WordPress website

4. Select Show Page from the actions list and define an internal or external URL to redirect the segment and click on the Create Rule button.

With the above automation, your new mobile visitors will be automatically redirected to the page you specified.

Redirect visitors from a specific country

Next up in your redirection list should be geographical redirection to personalize your WordPress website.

It’s good practice to show optimized or even different content on your website to people from different countries. More relevancy will increase engagement from your visitors in different stages across your website. 

For geolocational personalization, you need to first find out the main countries that sent traffic to your website and create special landing pages preferably with translated and more localized content.

IF [Location is Italy] THEN [Show Page X]:

Let’s create a simple automation in Growmatik:

  1. In the Growmatik automations page, click on the + icon in one of the columns to define the user type you want to target with this redirection. I’ll choose leads.
  2. Select Location from the conditions list and choose the country you want to target with your redirection. You can select one or multiple countries to target.
redirection to personalize your WordPress website

3. Select Show Page from the actions list and define an internal or external URL to redirect the segment and click on the Create Rule button.

With the above redirection automation, your leads from Austria will see the German landing page when they enter your website.

Redirect only on a specific date

Running occasional promotional campaigns can be an effective way to engage your visitors. Think of a special landing page made for Black Friday or a special homepage during a period (like the COVID-19 pandemic maybe just you don’t know when this occasion is going to end!)

So the redirection rule you need to define is:

IF [date is X] THEN [Show Page Y]

  1. In the Growmatik automations page, click on the + icon in one of the columns to define the user type you want to target with this redirection. I’ll choose guests.
  2. Select Date from the conditions list.
  3.  Choose the date or date period you’d like redirection to happen.

4. Select Show Page from the actions list and define an internal or external URL to redirect the segment.

The above redirection automation will redirect all your guest visitors during 2020 November 27 to your Black Friday landing page.

Redirect when a specific page is visited

When your service is under maintenance or a product is out of stock, and you don’t want to show a null ‘check back soon’ or ‘under maintenance’ page to your visitors, you can redirect them to a temporary page with useful links and alternative products or service they might like to check and prevent a hard bounce.

So the redirection rule you need to define is:
IF [page X visited] THEN [Show Page Y]

  1. In the Growmatik automations page, click on the + icon in one of the columns to define the user type you want to target with this redirection. I’ll choose leads.
  2. Select Page Visit from the conditions list.
  3. Choose the page you want to trigger the redirection when visited.

4. Select Show Page from the actions list and define an internal or external URL to redirect the segment.

By using the above automation, all of your leads that visit the product X page will be redirected to your product roundup page.

Redirect when a user made a specific number of orders

If you have a retention strategy for your WooCommerce business, you should definitely consider gamification techniques in your business and website. This means you can define milestones for your customers to do specific actions on your website such as visiting a page or buying a particular amount of products. Imagine users will see a temporary ‘thank you page’ with a special design, cross-selling links and probably discount coupons everytime they hit an order count milestone. 

The redirection rule you will require is:
IF [X orders placed] THEN [Show Page Y]

  1. In the Growmatik automations page, click on the + icon in one of the columns to define the user type you want to target with this redirection. We will target customers in this example.
  2. Select User Behavior > Orders Placed from the conditions list.
  3. Choose the number of orders that should trigger the redirection.

4. Select Show Page from the actions list and define an internal or external URL to redirect the segment.

The above redirection will show the ‘Milestone thank you page’ every time a customer hits a total count of 5 orders in your website.

Wrap up

If there’s one way that marketing in the 2020s will differ from the past decade, it’s deeper personalization and more automation. Using smart redirections can help you make more relevant experiences for your WordPress and WooCommerce website visitors. In this article, I tried to show how to use redirection to personalize your WordPress website without affecting the search engine ranking of pages on your website. 

In a future article, I’ll share more tips on how to achieve a deeper level of personalization in WordPress and WooCommerce websites with Growmatik. If you have experiences with using redirection for marketing and personalization purposes, please do not hesitate to share in the comments below.

Everything You Need to Know About Outsourcing WordPress Development

WordPress now powers more than a third of the world wide web (36,5% as of May 21, 2020). This includes blogging, businesses, online stores and service websites in a wide variety of niches and sectors. And there is a huge line-up of businesses that evolved around the dominant CMS that builds and maintains WordPress websites: WordPress themes, hostings, managed services and, of course, maintenance and outsourcing businesses that help in developing and maintaining WordPress websites on your behalf. 

Due to its piecemeal structure, WordPress is not as easy of a website building solution as its competitors such as Wix, Squarespace, etc… In recent years, this has led more individuals and businesses to consider using third-party services to complete the technical side of WordPress for them. In this article, we’ll take a look at the ins and outs of outsourcing WordPress development. We’ll answer the most common questions about outsourcing work in WordPress, whether or not you should do it, as well as tips on how to go about it the right way.

Why choose outsourcing WordPress development?

There’s no doubt that WordPress is easy to use, but it’s not very easy to set up and maintain. Unlike a SaaS solution, you have to put together different sections of the CMS together like lego pieces in order to get it working. This, on one hand, makes WordPress formable and extendible, which gives it a huge advantage over its competitors. On the other hand, this also makes it difficult to create and maintain. There are many solutions and options for each of these lego pieces you must choose from: themes, page builders, plugins, hostings, caching service and more.

You should either develop knowledge, experience and skillset to work with each of these yourself or break the bank to recruit and hire an in-house developer(s) to do it. But there’s a third option: outsourcing WordPress development to a ghost middle-man who specializes in WordPress. And even in a specific theme or plugin such as Jupiter X or Elementor. But in what ways is this beneficial to you?

Leverage expertise without having it

A WordPress specialist has developed years of experience and skills about the ins and outs of WordPress that your in-house developer might not know right off the bat. Even if you want to tackle the learning curve, there is a period of trial and error that you can skip by simply jumping on the back of a veteran WordPress specialist. 

While the process of creating and operating in WordPress themes and page builders is standard, clear and documented, there are dozens of ways to do one single thing. And the result can vary widely based on which way you chose to do it. Specialists have learnt the best way to do different things after years of working with that theme or plugin.

Eliminate legwork and focus on creativity

Digital media production has a serious drawback in general: legwork. And it’s even worse with creation within WordPress. Some WordPress tasks involve more legwork than creativity. You spend tons of time converting your PSD to WordPress, playing with Elementor to create  a page template or moving your content from an existing source to your new website.

There can be times when you spend more time building a template in Elementor than it took you to design it in Photoshop or Sketch!

The most important benefit of outsourcing is that it can free up your time to focus on what matters and what can only be done by you. Being a leader, designer, thinker, strategist, an ideator are things that cannot be outsourced. So you might save some time and focus on your creativity rather than installing WordPress.

Increase productivity and velocity

Development and QA is where the bottleneck happens in most teams. Especially if it involves new and unexplored areas where some research and trial and errors are involved. And it’s at that point where you can get a hand from an expert to get you out of a jam, smoothen your workflow and increase productivity by focusing on the other parts of the workflow like strategizing, customer development and marketing.

Having a smooth development workflow will give you confidence to work on more projects simultaneously. This is particularly important for high-volume teams where velocity is limited to the number of the few developers working in-house and you cannot assign them multiple tasks from different projects freely. By outsourcing to the right team, you’re actually doubling or tripling your team size without actually increasing your workforce.

Cut costs and increase profit margins

High-volume WordPress businesses such as agencies might reduce production costs by outsourcing WordPress labour instead of spending money to recruit, hire and employ staff.

What are white-label services?

White-label services ensure that your brand – and only your brand – will appear on the final product, even if you had a freelancer or agency doing the work on your behalf. Make sure to hash out the terms for branding and disclosure in the contract.

outsourcing WordPress development

This is good for your brand and will protect your clientele. However, this also increases your and your contractor’s responsibility to assure the quality of the work. If there are any problems, the responsibility will lie on your shoulders (not your contractors), and your brand may be at stake.

White-label + partnership: The ideal formula!

White-label services are suitable for high-volume WordPress businesses and the regular flow of projects you want to outsource to someone reliable. It would be ideal if you can form a long-term relationship with your contractor and strike an agreement that would work in the interests of all parties involved. For example, a special rate exclusive to you when you promise to outsource a specific number of projects every month.

A long-term relationship fosters trust and reliability and transforms your contractor into a partner.  There are some white-label agencies where you can have your own permanent team of experts who work on your projects, you get to know each other over time and perfectly improve the productivity as a result of long-term collaboration.

Who should outsource? Freelancers, agencies or end-users?

The short answer is everyone! Freelancers, agencies and end-users alike would benefit from getting help from a WordPress expert. It might be an end user who just bought a WordPress theme and needs help customizing it, a freelancer who needs a hand doing a job for their client or an agency with a large clientele who needs another team to lift off part of the workload.

What can be outsourced?

Custom WordPress development

You might want to consider outsourcing if you need advanced WordPress development for particular requirements on your website or you need WordPress plugins developed from scratch for your project. You require a lot of knowledge and skills with WordPress to get something like this yourself or by your developer.

  • ✅ I want a custom calculator plugin …
  • ✅ I want a few custom post types for my hotel website …
  • ✅ I want a custom booking plugin built for my WordPress website
  • ✅ I want a custom header design to look and feel like on example.com
  • ✅ I want my popup to be showing a dynamic carousel populated by a post type in the WordPress backend.
  • ✅ I need my portfolio to have some custom fields with specific relations
  • ✅ I need a custom language selector for my multilingual website
  • ✅ I need to integrate an LMS with WooCommerce
  • ✅ I need to customize my Membership plugin
  • ✅ I need a custom shortcode to show a content under specific conditions to a group of my users

Theme customization

This is one of the most popular outsourced services on the WordPress market: You bought a WordPress theme, and you want to customize it by adding a custom functionality, capability or some custom codes to add a specific visual function that is not possible with built-in features.

  • ✅ I want a custom menu look in my template
  • ✅ I want plugin X installed and optimized in my theme
  • ✅ I need my current mega menu to to have a different look in mobile and desktop
  • ✅ I need to make the plugin X look like the other parts of my website in my theme
  • ✅ I need to customize my blog page to look like this

Performance & security optimization

This is another area where having extensive knowledge and skills is crucial – without which, you may risk your website health, data and security. If you have an active WordPress website with high traffic or several pages, you might want to have it audited by an expert for possible security measures and performance improvements.

Performance and security improvement checklists usually include the installation of SSL, caching and CDN services, which may require server and development knowledge and hands-on experience with different protocols and tools. It’s better if this is done by an experienced engineer.

  • ✅ I need a 90% Google Page Speed for my client WordPress website
  • ✅ I need a security checkup for my WordPress website
  • ✅ I need a checkup on the performance leaks of my WordPress website (unused plugins, image optimization, compression, etc.)

Converting to WordPress

This may be the most popular outsource WordPress task among different WordPress teams. Let’s say you like and select a WordPress theme but don’t know how to implement the designs you or your designer did. Or you’d just like to get it done by someone who is an expert on that theme and already knows the best practices rather than playing around with trial and errors.

For instance, a Jupiter X expert could help you achieve maximum design loyalty as well as the efficient usage of elements and plugins to convert your design from a variety of sources such as PS, Sketch or Adobe XD.

  • ✅ I need to create these templates with Elementor. 
  • ✅ I’d like to build my landing page with Jupiter X WP.
  • ✅ Can I convert my Sketch designs to WordPress?

Custom design

Well, this is not directly a WordPress development job but definitely a part of it. If you’re  creating a website for a very picky client or with special brand characteristics, you might want to have your website designed by expert designers exclusively based on your very own needs and preferences.

  • ✅ Design me the most beautiful WordPress website!
  • ✅ I’m representing a client with very unique brand characteristics, and we need a WordPress website for them.
  • ✅ I want to add a brand new template in harmony with the rest of my theme.

Maintenance, migration & content management

If you’re running an active website for yourself or for a client with regular content updates, you may want a helping hand in completing the usual maintenance such as WordPress updates, plugin updates, theme updates and regular health checkups, as well as content additions such as the creation of weekly or monthly posts.

You may also need help migrating your content from an existing website with many posts,  pages or products to a new WordPress theme (for example migrating from Jupiter to Jupiter X.)

You could handle this yourself if you have the skillset and enough knowledge about the original and destination platform. But if not or if you’re sensitive about your content and want a seamless migration, an expert will be helpful. They can assure a migration with maximum loyalty and with the best migration practices or content recreation in the destination platform for parts of your content that are not natively compatible and supported by the destination platform.

  • ✅ I want a seamless migration from Jupiter to Jupiter X.
  • ✅ I need a hand migration from Divi to Elementor.
  • ✅ I want a regular maintenance checkup for my WordPress website.

What should not be outsourced?

It’s good to think of outsourcing as a solution to get something that you don’t know much about done by an expert. Or if you have the knowledge base but you simply don’t have enough time to complete the project. If it’s the former, it’s still important to have basic knowledge about the essence of what you want done. This may include basic knowledge of WordPress and how it works. Some coding knowledge of the language you want can also be helpful if your project is purely related to development.

If you’re running a dev team and considering outsourcing part of the development to another team, then you probably have a deep knowledge of your WordPress plugin or app and you should note your contractor may take time to achieve the same amount of knowledge and familiarity with your product.

There might be a learning curve, trial and errors and even possible defects before your contractor learns as much as you know about your plugin.

  • ❌ I want to build the next Facebook with WordPress. Is that possible!?
  • ❌ I want to build an open-source CMS to rival WordPress.
  • ❌ I want a plugin developed to do all my accounting, site maintenance, online payments and security checkup for my WordPress website.

How to choose a WordPress outsourcing service

1- Begin small

If you’re new to outsourcing, it’s better if you start with small projects. You may face problems with outsourcing you didn’t expect and you were informed during your contractors sales pitch. It may take time for both of you to know each other’s needs and capabilities.

outsourcing WordPress development

If you’re considering a long-term relationship, starting small will help you minimize possible damages and errors and learn the best practices along the way. This is particularly true about the development projects where tight collaboration and in-depth knowledge of both parties is crucial for a successful collaboration.

2- Provide clear descriptions

Make sure to specify all the details and material your contractor requires to start your WordPress project. This changes depending on the project type but below might come in handy for common project types:

  • WP conversion > Well-organized design files with proper layer folder and naming conventions
  • Theme customization > Detailed list of requested functionalities – if a visual feature, possibly with an explanatory video.
  • Custom Design > Possible samples of design that you admire and reflect the design characteristics you want in your design. Also detailed brand guidelines.
  • Content management > Well-organized content that you want posted on your website such a text, images, video with details about publishing date, category and tags.

3- Consider the best price, not the cheapest

When it comes time to outsourcing, the cheapest price is not always the best deal. It’s the value/price ratio! Like we discussed earlier, there may be a dozen ways to do a specific thing in WordPress. If a candidate contractor offers a price slightly higher than others, try to ask them and figure what specific feature or capability makes them eligible for that.

If your project is just another ordinary WordPress conversion project, then anyone who knows Elementor and Photoshop can convert it. In other words, there is not high loyalty and quality standards for you or your client. This means that you’re better off considering a lower price. However if you have a special and loyal client who trusts you because you respect their values and brands, then you should make sure your outsourcing contractor shares those values as well so the final product you deliver to your client is coherent, consistent and seamless.

In which case you should not consider the low prices and be open to pay more for a team who aspires to high-quality standards and cares as much for your client as you do.

4- Work with good communicators

When outsourcing WordPress development, communication is maybe the most important factor to take into consideration after the value for price. The best teams to collaborate with are not those who have the best engineers or best-in-class designers, they are the best communicators. The most important factor that leads to a positive and progressive collaboration is communication, and without proper communication, your collaboration will be painful and will fail to produce satisfactory results.

outsourcing WordPress development

Make sure you know how you’ll communicate with your contractor team. Is it through a WhatsApp channel? Or an advanced briefing section built into their website? If you’re considering a long-term relationship with the contractor team, it’s good if you can establish a direct communication line and account manager who can directly interact with you.

Ideal white-label outsourcing teams offer different communication options such as phone calls, Zoom calls and briefing sections for their high-end and loyal clients.

5- Don’t proceed without a plan and written agreement

A risk factor of many outsourcing companies is that they are a group of coders and designers sitting in some unknown country behind computers and getting something done for you. You’re sharing critical information about your project, your business and your clients, so you should research the credibility of the team you are considering before starting working with them. 

Check to see if they have written and coherent terms of service. If they do, then study it carefully so you’re informed about possible incidents along the way.

Do you see your rights reflected in the agreement you sign? Do they have a refund or dispute policy? Do they accept your NDA terms? And so on.

Furthermore it’s best practice to use the briefing section you are granted to write down and document everything so it can be used in case it’s required in the future to refer to a specific part of the conversation or project. Conversations made over the phone or on a Zoom call might not be referred to in the future if necessary.

6- Find reliable partners – not doers

outsourcing WordPress development

An ideal team to get help from should be like any other team member, not an outside contractor just working behind the scenes delivering projects. If you want the best outcome from an outsourcing collaboration, you should foster a solid relationship that rewards both you and your contractor team and makes them as integrated into your team as your employed engineer or product manager. That is, of course, a mutual responsibility for both parties to achieve this level of trust and integration through offering each other the maximum value and mutual benefits.

What is WPDone?

Earlier this year, we rebranded our former custom modification subservice called Artbees Care into a brand new white-label WordPress Service called WPDone. WPDone is powered and operated by Artbees, the maker of the Jupiter X WordPress theme, and applies a decade-long experience with WordPress in delivering its clients’ projects.

outsourcing WordPress development

In WPDone, our goal is to become another member of your team – not just a contractor – and to build good products without our name on it. We helped achieve the highest quality standards, development technologies and aesthetics values for more than 11 global WordPress agencies from different continents within the scope of more than 600 WordPress projects. 

If you’re a high-volume WordPress freelancer or agency and are considering outsourcing WordPress development as part of a long-term collaboration with a white-label savvy WordPress team, then you can check out the WPDone Partners program for surprisingly good rates considering the high quality service you get.

Gutenberg Block Patterns: Next Awesome Gutenberg Feature

When it comes to the features of the Gutenberg – the new WordPress block editor – the sky’s the limit. The Gutenberg development team is continuing to enhance the editor after each release to bring users more features. One of those features is Gutenberg block patterns, which is a game changer. Before you know it, we’ll be able to create a full site right inside the editor. 

In this article, we’ll cover the Gutenberg block patterns feature and walk you through how we can quickly create our very own custom ones.

Note: To use the block patterns feature, you’ll need to install the latest Gutenberg plugin on your site.

Why block patterns?

If you’re familiar with Elementor, they have a Template feature that allows theme and plugin authors to create reusable combinations of elements/blocks and distribute them for users. This is not only the case for Elementor but nearly every popular page builder has a similar feature. 

This feature was missing in the WordPress new editor and it was proposed in Github. This feature got enough attention and the initial version was released in Gutenberg v7.7 and was stable enough when v8.0 was released.

Creating custom Gutenberg block patterns

This feature starts to shine more when we can create our own block patterns and release them for others to use. Let’s start to create our first pattern. 

It’s worth mentioning that we omitted some technical and other explanations, so you can more easily follow this post’s flow in making your first pattern.

1. Install the Code Snippets plugin

Install and activate the Code Snippets plugin. We’ll use this plugin to add the pattern registration codes in the following sections. You may also use a child theme or plugin to add the codes.

gutenberg block patterns

2. Create a pattern in the editor

Creating a pattern is a fairly easy job. We only need to create a new page and add some blocks in the editor. We used Image, Columns and Paragraph blocks to create the previously shown pattern.

3. Export the pattern codes

For registering a pattern, we need to export the created pattern as explained below.

1. Switch to Code editor and copy the codes.

gutenberg block patterns

2. Escape them by using the Onlinestringtools site.

<!-- wp:image {\"id\":158,\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"http://tutorial.test/wp-content/uploads/2020/05/steve-huntington-XT1BJhMkHy4-unsplash-1024x683.jpg\" alt=\"\" class=\"wp-image-158\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Rapidiously optimize B2B opportunities for interoperable benefits. Intrinsicly underwhelm world-class leadership skills before sticky imperatives.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Phosfluorescently architect equity invested convergence through integrated markets. Enthusiastically incentivize professional systems after quality channels.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->

4. Register your pattern

To display our pattern in the list of patterns, we need to register it via the register_pattern PHP function. This function, as described in the WordPress handbook, receives the name of the pattern as the first argument and an array describing properties of the pattern as the second argument.

Add a new snippet from Snippets > Add New then fill in the settings as shown below. Make sure to click on the Save Changes and Activate button.

gutenberg block patterns
if ( ! function_exists( 'register_pattern' ) ) {
	return;
}

register_pattern(
    'my-custom-patterns/pattern-1',
    [
        'title'   => __( 'Pattern 1' ),
        'content' => "<!-- wp:image {\"id\":158,\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"http://tutorial.test/wp-content/uploads/2020/05/steve-huntington-XT1BJhMkHy4-unsplash-1024x683.jpg\" alt=\"\" class=\"wp-image-158\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Rapidiously optimize B2B opportunities for interoperable benefits. Intrinsicly underwhelm world-class leadership skills before sticky imperatives.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Phosfluorescently architect equity invested convergence through integrated markets. Enthusiastically incentivize professional systems after quality channels.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
    ]
);

Finally, you should be able to see the pattern at the end of the Patterns section.

gutenberg block patterns

Conclusion

By now, it’s probably dawned on you the significance of Gutenberg block patterns and how to create a custom pattern in WordPress. We recommend that you keep up-to-date with the Gutenberg Github project to stay informed about developments regarding the feature. 

We’d love to hear about your experiences with the Gutenberg block patterns feature, so please share your patterns with us in the comment section below.

Key Elements to Create a Medical Website

More and more people prefer to search for different kinds of services online – and medical services are no exception. In fact, patients continually seek health information and search for new doctors online. Having a medical website can make a patient portal easily accessible and help educate patients about common health issues.
Your website needs to attract and inform both new and current patients. In this post, you’ll find out exactly how to do this by including the essential elements to create a medical website. 

Gain the trust of your patients

To boost your potential patients’ confidence in your care, we recommend that you use the Testimonials widget. You can add this on your homepage for quick and easy access or on a separate page if you have many testimonials to share. 

It’s also a good idea to add a video where your patients can tell their story, which will increase trust in your work.  In other words, don’t shy away from getting feedback that you can ultimately use to shine a positive light on your expertise and practice.

Display your contact information

A good medical website needs to have contact information that can be accessed easily. When you sit down to create a medical website, keep in mind that a user’s eyes will be naturally drawn to the top bar of the header, making it an ideal place to display contact info. It’s worth mentioning that you’ll want to include the number of your medical institution as well as numbers of different specialities. It’s not uncommon these days that people in an emergency situation will come across your information online, so it’s best to include this type of info so they can receive help as quickly as possible. Furthermore, providing an interactive map on the “Contact Us” page will allow visitors to easily locate your hospital or medical center.

Along with the map, you should add a contact form by using the Form element so potential patients can send their questions to you.

Another form that can be added is a booking or an appointment form. You’ll make the right call giving patients the chance to request an appointment online with a simple form. Check out an example of the booking form in the Vet template. A great feature will be to show an appointment form in the popup window via a call-to-action button, which you can place in the header. This allows visitors to book an appointment quickly without searching for a form through the site.

Such an example can be viewed in the Lab template. To open a popup on a button click, you’ll need the JetPopUp plugin, which is bundled in the Jupiter X theme. This video tutorial will help you to implement that feature.

List the services you provide

You have two options in listing the services you provide when you create a medical website: you can either list them on your homepage or you can create a separate page. No matter which you decide, make sure to show it in your navigation menu in the header so the visitors don’t have to search. This info should be easy to find.

You can separate services in tabs by using the Tabs element found in the JetElements plugin. It’ll be easy to read them just by surfing between the tabs as shown in the Psychologist template:

Create a blog page to share news

When it comes to medical websites, a blog can be a very effective tool. It’s a great way to both educate and engage with patients. Educating your patients not only increases awareness of your practice but it also enables you to have in-person conversations with better-informed individuals. As you populate your blog with more content, it’s essential to make that content searchable. You can make content easier to find by categorizing it by topic, featured or most recent.

Make your blog posts easily shareable via social networks by including social media share buttons.

Introduce your staff

When a patient looks for medical help, he or she may worry about what kind of practice you have. In this case, you’ll want to do everything possible to give your visitors confidence in your care. To do this, you’ll need to list your credentials so that people trust that you can make them healthy again. You can also ease their concerns by introducing your medical team so visitors know the types of specialists on staff and their respective experience.. The Team Member element will help you to create this section, as can be seen in the Juno template.

create a medical website team member

Show results of your work

It’s often a good idea to provide further confidence in your practice by showing the results of your work through photos. You can show images with the Photo Album element or create a separate Portfolio page and include your portfolio projects as shown in the Almus template.

Let’s say that you have an aesthetic surgery practice. In this case, it would be ideal to show before and after photos for a simple comparison. Image Comparison is the best element to use. A good example of this can be found in Hair Implant template.

create a medical website image comparison

Report your statistics

Another way to give confidence in your work is to show the statistics of what you have achieved. Share how long you’ve been practicing and how many patients you have made healthy and happy. To display this information, you can use the Counter element and you’ll get animated numerical data, which will be more appealing to visitors than just simple static text or a table.

create a medical website counter

Provide answers to possible questions

If you create a FAQ page where you answer some popular questions, then this will prevent your potential patients from contacting you via the form and your mailbox won’t be flooded with the emails. It will be easier to read if you list the questions and the answers will be collapsed, so a visitor can click on a question and an answer will drop down. This is possible with the Toggle element which you can find in the Elementor editor. A good example of this is in the Treatment template.

create a medical website faq

List which insurance you accept

This info will be useful for potential patients, so they don’t pay any extra fees but pay less out of their own pockets. To list the insurance companies, you can show their logos and Brands element will be helpful here. This element is part of the JetElements plugin, which is bundled with the Jupiter X theme. Check an example of the Insurance logos with Brands element in this template.

create a medical website brands

Make sure the site is mobile friendly

If the website isn’t responsive on a tablet or phone screen, users will scroll by and continue their search. This is a big problem on your part as a lot of Internet users have mobile devices and they use them actively. Even if you have a nice site, you can lose your potential patients if it’s impossible to see it on a small screen of a mobile device. 

You should consider this aspect at this stage of site creation.

Wrapping up

Your website can be a great tool to inform and educate visitors on your website. If you want to find an easy way to create a medical website and launch it with all of these key features, Artbees templates will help you in this situation. There are a lot of templates you can choose from and you’ll get a readymade website so you won’t have to pay a web designer.

How to Create a Custom Gutenberg Block with the Block Lab Plugin

With the rising popularity of Gutenberg, building tailored Gutenberg blocks is becoming an essential skill for every developer. Throughout time, the WordPress community has made some great contributions to Gutenberg. Today, let’s take a look at the Block Lab plugin. Creating a custom Gutenberg block with the Block Lab plugin is much easier than standard custom block creation via the native Gutenberg API.

In this article, let’s see how we can create a custom Gutenberg block with the Block Lab plugin. But before going forward, you might want to check out the following articles we posted about Gutenberg if you haven’t done so already.

Before diving into codes

First thing’s first. Let’s get familiar with the Block Lab plugin and then we can start creating an example block with this plugin to explore its features.

Features:

  • WordPress- and Gutenberg-friendly UI.
  • 19 available field types.
  • Highly flexible in creating different types of blocks from easy to complex ones.
  • Developer-friendly functions.
  • Good documentation and tutorials.

Creating a custom Gutenberg block with the Block Lab plugin

To demonstrate how this plugin works, let’s create a posts loop block in a few steps. Almost all websites need to use these types of blocks to show posts, portfolios, news and other types of content. Now imagine that you can create any type of posts loop block by yourself using this plugin.

For this article, we are going to create the following posts loop block called Modern Posts. It allows you to fetch posts from different post types and to specify the number of the posts.

custom Gutenberg block with Block Lab

1. Install a child theme

We need to use a child theme for our PHP and JavaScript codes. For the purposes of this article, we’re going to use the Jupiter X Child theme.

custom Gutenberg block with Block Lab

2. Plugin installation

Go to Plugins > Add New, search for the block lab, then install and activate the plugin.

custom Gutenberg block with Block Lab

3. Configuring the block

To configure the essential settings for the Modern Posts block, go to Block Lab > Add New then fill in the Title and Icon settings as shown below. You may change other settings based on your needs.

custom Gutenberg block with Block Lab

4. Add the block fields

Fields allow us to set different settings for each block. Almost all blocks benefit from the flexibility the fields offer. We suggest that you read the Fields documentation.

To create the Modern Posts block’s fields based on the initial design (as shown above), we need the following Post Type and Number of Posts fields. You may add more controls based on your needs. Let’s create them.

1. Click on the Add Field button to add the fields.
2. Add the Post Type field as shown below.

custom Gutenberg block with Block Lab

3. Add the Number of Posts field as shown below.

custom Gutenberg block with Block Lab

4. Click on the Publish button. Afterward, you’ll see the following message which tells you where to create your PHP file in the child theme.

5. Write the block code

Now it’s time to create the PHP and CSS files to make the block show the posts loop. 
1. Create the block-modern-posts.php file in blocks folder in the child theme as shown below.

  • block_value() function gets the value from the fields that we created in the previous section.
  • We used a custom WP_Query to create a custom loop.
<div class="block-modern-posts <?php block_field( 'className') ?>">

	<?php
	// Variables
	$post_type  = block_value( 'post-type' );
	$post_count = block_value( 'number-of-posts' );

	// WP_Query arguments
	$args = array(
		'post_type'      => $post_type,
		'posts_per_page' => $post_count,
	);

	// The Query
	$modern_post_query = new WP_Query( $args );

	// The Loop
	while ( $modern_post_query->have_posts() ) {
		$modern_post_query->the_post();
		?>

		<div class="block-modern-posts--post">
			<img class="block-modern-posts--post-thumbnail" src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>">
			<div class="block-modern-posts--post-content">
				<h4 class="block-modern-posts--post-title"><?php the_title(); ?></h4>
				<div class="block-modern-posts--post-excerpt"><?php the_excerpt(); ?></div>
				<a class="block-modern-posts--post-more" href="<?php the_permalink(); ?>">Read More</a>
			</div>
		</div>

		<?php
	}

	// Restore original Post Data
	wp_reset_postdata();
	?>

</div>

2. Create the block-modern-posts.css file in the blocks folder in the child theme as shown below.

.block-modern-posts--post {
	display: flex;
	margin-bottom: 40px;
	align-items: center;
}

.block-modern-posts--post-thumbnail {
	width: 28%;
	height: 400px !important;
	object-fit: cover;
	border-radius: 30px;
}

.block-modern-posts--post .block-modern-posts--post-content {
	font-family: "Helvetica Neue";
	background: #fff;
	padding: 50px 40px;
	margin-left: -60px;
	box-shadow: 0 0 20px #0000001c;
	border-radius: 30px;
}

.block-modern-posts--post .block-modern-posts--post-title {
	font-family: "Helvetica Neue";
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 0.5rem;
}

.block-modern-posts--post .block-modern-posts--post-excerpt {
	margin-top: 20px;
	margin-bottom: 45px;
	color: #999;
	line-height: 1.8;
}

.block-modern-posts--post-more {
	background-color: #7882ff;
	border-radius: 50px;
	padding: 12px 22px;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

/* Featured */
.block-modern-posts--post:first-child {
	display: block;
	margin-bottom: 60px;
}

.block-modern-posts--post:first-child .block-modern-posts--post-thumbnail {
	width: 100%;
	height: 550px !important;
}

.block-modern-posts--post:first-child .block-modern-posts--post-content {
	margin: -70px 50px 0;
	position: relative;
}

3. After adding the files, you can now play with the block in the WordPress editor.

Wrapping up

As outlined in this post, we walked you through how you can build a custom Gutenberg block with Block Lab, which is much easier than creating the blocks with the native Gutenberg API. In other words, the Block Lab plugin is a huge timesaver when it comes to creating custom blocks. 

We’d love to hear about your experiences with the Block Lab plugin, so please share your custom blocks with us in the comment section below.