Month: December 2019

Toolset Blocks Quick Review

Have you ever thought of something you’d always wanted to do but gave up on it because it was too difficult? Many people at some point will think of a website that they would love to create but are concerned they do not have the experience or ability to create it.

The good news is that is no longer a problem thanks to Toolset Blocks and Gutenberg. The new WordPress Block Editor, Gutenberg, makes designing your own website much easier and more intuitive thanks to the creation of blocks.

In addition, Toolset Blocks is the perfect compliment to Gutenberg as you can turn a basic website into something far more complex and professional thanks to a number of features such as dynamic content.

Gutenberg

Why Gutenberg is a great option for building websites

Gutenberg has been around for just over a year and has improved significantly making it an ideal platform to build websites on. Below is a list of advantages for using Gutenberg:

Over the past year, a number of great blocks extensions have emerged which enhance Gutenberg and your ability to build custom websites.Excellent functionality for changing content on mobile.Easy to add page content that all websites need including a call to action, headings, testimonials and columns.Easy to reuse components across different pages and sections.

Ability to structure the content in whatever order you like by using the drag-and-drop interface to move blocks around.Gutenberg did have some teething problems when it was first launched but the good news is that many of those concerns have been overcome. There are still some features which are missing but they are all due to arrive in the near future. Even so, you can use Gutenberg and Toolset Blocks together to build everything you could need in a website.

Wordpress

How Toolset Blocks makes it easier to build custom websites

While Gutenberg serves as the body of a great, fully functional WordPress website, Toolset Blocks provides the engine which drives it to become a professional, custom website. Below you can find some of the advantages of using Toolset Blocks.

Dynamic content. Toolset Blocks offers the easiest route to adding dynamic content to your website without coding. Instead of static content, you can make it dynamic which means WordPress will pull the correct content from the database depending on which post type you click. No coding needed. You can build complex, custom websites without even using CSS or HTML. A much simpler website building workflow. Previously, building a website if you did not know how to code would have been far more complicated and costly. You would have had to design your website on one platform and asked a developer to implement it. Now you can add everything yourself to WordPress saving you time and money.

Spend less time reading the documentation. The simplicity of Gutenberg and Toolset Blocks means you do not need to read as much documentation as before to understand it.Fewer third-party plugins on your website. As you can build entire complex websites using Gutenberg, Toolset Blocks and other Gutenberg plugins you need to install fewer third-party plugins to handle the website building side of things. This will reduce bloat and make it far easier to manage your website.A simple interface for website building. With Gutenberg and Toolset Blocks, you will be able to see exactly how everything will look on the front-end as you build it on the back-end.

Wordpress

Why Toolset decided to integrate with Gutenberg

Toolset is closely integrated with all of the major page builders but its developers have now decided to rewrite Toolset so that it runs seamlessly inside the WordPress Block Editor. But why did Toolset make the move to blocks?

Since the launch of Gutenberg many page builders have increased their rate of updates making it harder and harder for plugins such as Toolset to remain completely compatible with them. The simple question is what is more effective? To invest time in playing catch-up with multiple third parties or to improve the current product? 

The result is that clients will be happier with an improved product in Toolset Blocks which will work perfectly with the primary editor for WordPress.

Wordpress

What about the users who prefer to stick to other page builders?

The good news is that Toolset will still be completely integrated with third-party page builders in the near future, however, as each page builder continues to release new features and API changes it can be challenging to keep track of all of the developments. It remains to be seen how long Toolset can continue to improve its product and stay 100% integrated with every third-party page builder out there. You can get more info on Toolset from here! Also, this post on Dynamic Content might clear the air a little!

If you are not a fan of Gutenberg and Page Builders we’ve got that covered, see this post on ClassicPress, the pared down fork of Wordpress which uses just the TinyMCE editor and zero plugins.

Filed under: Trends, WordpressTagged with: , ,

ClassicPress Quick Review and Test

So, having discovered the new fork of Wordpress ClassicPress recently, I thought I would take it for a spin to see what the hype was about! ClassicPress is a pared down bloatless version of Wordpress which retains the old TinyMCE editor instead of the Gutenberg in Wordpress, and allows developers more freedom to build sleek fast sites using it.

Here are a couple of press releases from the ClassicPress team

Improved Security

Concerned about security? ClassicPress has a “security-first” approach. No matter how shiny or exciting a new feature is, if it’s not secure, it won’t be added to the platform.

Less Bloat

We believe that powerful does not need to mean code-heavy. We’ve trimmed unnecessary plugins and features from ClassicPress core, and continue to actively seek smart ways to reduce code bloat.

Block-free

Choose the development path that works best for you. With the flexibility and stability that ClassicPress provides, you have the freedom to create a solution that meets your unique needs.

So I decided to take a look and see how we can use ClassicPress with an original HTML theme/PSDs etc, rather than a prebuilt theme and I customised one of my earlier Wordpress bare starter packs to work with ClassicPress, to take a look, and then go a bit further and use an original HTML/PSD (if necessary) theme with it.

Just a Few Languages

First of all, at the time of writing only Installatron have a hosting install option, so it all has to be done manually, by first creating a Database and uploading the ClassicPress files to the server, renaming wp-config-sample.php to wp-config.php and entering the database details in there. When browse to the URL we will get a screen like the one above. If you speak fluent USA, or indeed one of the other more obscure languages you’ll be fine!

The setup screen will appear and allow us to fill in the details for the install. Typically these will be from the database you created, in most cases the database name will be the same as the database user, with the password and email added in.

A few minutes later we are ready to go, and logging in will show us a bare bones admin, with TinyMCE editor and no plugins whatsoever. I switched to my Bare ClassicPress starter which is rather sparse, but that’s for a reason, so we can put in any styles, javascripts, fonts and anything else we need to build up the site.

So to start with we have just got the standard default page and nothing else. Some adjustment needed.

Adding a few pages, a Menu and setting a Home static page currently gives us just an itsy bitsy menu that doesn’t exactly smack you in the face as a work of unadulterated design genius! I mean, you can hardly see it! So we need to liven that up a bit, and in this case, to keep it short, well just use good old Bootstrap! Here’s what we do.

1. If we head over to GetbootStrap and grab the CSS and JS files, (V 4) and then we get Popper from, well Popper.JS!

With the Bare ClassicPress starter we can just put the Bootstrap css and Bootstrap and Popper js files in the respective folders which are already there (css folder is called “styles”), then import the bootstrap css file into the themes default css file (style.css) along with Google font Work Sans.

@import url(http://fonts.googleapis.com/css?family=Work Sans);
@import url(‘styles/bootstrap.css’);

(Just replace the original css boots-bones file)

2. Then we add a couple of lines to the functions.php file to register the js files, like so:

wp_enqueue_script( 'naked', get_template_directory_uri() . '/js/popper.js', array(), BARE_VERSION, true );
wp_enqueue_script( 'naked', get_template_directory_uri() . '/js/bootstrap.min.js', array(), BARE_VERSION, true );

(The add action is already there)

3. That’s the js files done, now we also need a Navwalker for the menu, so I just grabbed one from Github at https://github.com/wp-bootstrap/wp-bootstrap-navwalker and placed it in the theme folder root, then we write a few more lines to register that in functions.php, like below.

/show bootstrap walker on Theme
require_once('class-wp-bootstrap-navwalker.php');
// Theme navbarResponsive function
function wp_theme_setup(){
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'Bare ClassicPress' ),
'secondary' => __('Secondary Menu', 'SUBITEMS'),
) );
}
//action hook to load navbar after theme loads
add_action('after_setup_theme','wp_theme_setup');

4. Now we just want to change the code in the header to suit the new style we are going to use, so I grabbed the nav from another Bootstrap theme I made with VueJS Gridsome and changed the “g-link” tags to “a” tags, so we have a new nav layout in the header, in to which we can put the Navwalker code. Essentially, we just remove the ul’s an li’s from the Bootstrap nav html code, and replace with the Navwalker php code, which is:

(wrapped in php tags)

wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker()
) );

Which should work whichever type of Bootstrap nav is used, just put that in place of the ul’s and li’s (or a tags). I also put in a dummy logo instead of the text in navbar-brand with php echo, after creating an images folder in the bare-classicpress theme, and uploading it:

Also, I used Fakerpress to generate some more dummy posts/pages in addition to the ones I had already made, https://en-gb.wordpress.org/plugins/fakerpress/

So now we are ready to take a look at the new nav layout, and see if it is any better than the original!

Look’s a little better to me!

So that’s a quick look at ClassicPress with the Bare ClassicPress starter, although there are others which can be used. There is still a lot more that needs to be done here though, which probably involves digging in to the theme template files to customize them a bit for various layouts, but if you want a bare theme with no bloat or plugins and no Gutenberg then ClassicPress seems like a good place to start.

The Bare ClassicPress starter can be found on Github at:

https://github.com/xhostcomweb/bare-classicpress.git

And ClassicPress from https://www.classicpress.net/

You can grab the Bootstrap html code from the /components/ folder in this Vue Gridsome starter

https://github.com/xhostcomweb/vuewp-gridsome-scss-bootstrap-starter.git

But change the g-link tags to a tags! If you enjoyed this post, why not check out this one on Wordpress Dynamic Content!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: eCommerce, WordpressTagged with: ,

Build An Online Clothing Store with WooCommerce

If you’ve recently started a clothing boutique or fashion store, or you’re moving to WooCommerce from another platform, getting started may seem a little overwhelming.

This guide was designed to walk you through the setup process, teach you to create successful product listings, and show you how to market to your ideal audience. 

To begin, we recommend that you review the Getting Started with WordPress documentation.  This will teach you how to install WordPress on your hosting account, how to get started, and how to interact with posts, pages, comments, and more.

1. Selecting a theme and customizing your site design

After you’ve installed WordPress and logged in to your dashboard, you’ll need to choose a WordPress theme, which will play a role in the design of your site.  There are a lot of options available, from free themes to paid themes, and they can vary in quality.

Here are a few things to consider when choosing an effective WordPress theme:

  • Does it integrate seamlessly with WooCommerce? – A theme that’s built for WooCommerce makes the process of setting up your store and designing your site much easier.  While there are some great premium options out there, WooCommerce does offer the free Storefront theme, which was built specifically for online stores.  The Galleria child theme and the new Threads theme were both designed with clothing stores in mind, although other themes, both from original PSD and HTML designs and prebuilt, can be made to integrate with Woocommerce 
  • Does it come from a reliable source? – Make sure that you choose a theme from the WordPress repository or from an experienced, legitimate company.  Doing a little research and checking theme reviews can save you a lot of time and frustration!
  • Does the theme load quickly? – While there are a lot of ways to improve performance and load time yourself, choosing a theme that’s already optimized for speed starts you off on the right track.
  • Is it mobile friendly? – Check the theme demos on a mobile device and look at the documentation to ensure that it looks just as good on phones and tablets as on your desktop.
  • Is it SEO-friendly?< - Read through the documentation to see if the developers built the theme with SEO in mind.
  • What functionality and features do you want? – Make a list of the features you’re looking for in a website.  Do you want a product slider on the home page? How about built-in FAQ support?  While there are plugins you can add for additional functionality, it’s often easier if the theme already provides what you’re looking for.

Once you’ve chosen and installed your theme, it’s time to think about your website’s design. While your theme might have its own options and page builder, WordPress and WooCommerce offer easy ways to design your site however you’d like. 

If you go to Appearance —> Customize<, you’ll find settings that will allow you to upload a logo, change the colors and fonts used throughout your site, change the layout for WooCommerce pages, add custom CSS, and more.

The new Gutenberg editor allows you to build any page that you’d like through flexible blocks.  Drag and drop headings, text, images, columns, videos, buttons, galleries, and more.  

A great way to find design inspiration is to look at what other clothing stores are doing.  Of course, it’s important to come up with your own design and not copy others’, but this is a good way to get an idea of design and layout options.

2. Choosing the pages on your site

While the exact pages that you need will vary based on your business and audience, here are a few that work well for the clothing industry:

  • About – Use this opportunity to describe your mission and story.
  • FAQ – Answer the questions your customers ask all the time. 
  • Collections – Separate clothes based on season, gender, style, and more.
  • Fit Guide –  Describe how items fit, how customers can measure themselves, and the measurements for your clothes.
  • Stores – Do you also sell your products in retail locations?  List those on this page.
  • Contact – Make sure your customers can reach you with questions or feedback.
  • Policies – Describe your return policies, exchange policies, etc. and describe how you use and protect customers’ data.
  • Lookbook – Feature real life people wearing your clothing and show how to pair items together to make cohesive outfits.

If you have an existing business, you may want to consider reaching out to your customers to find out what they wish was on your site.  What information was hard to find or missing? This is a great way to learn the kind of pages that will connect with your customers.

3. Extending your store<

Think about additional functionality you might need or want on your store.  What business model will you use to sell your products? How will you accept payments?  Do you want shoppers to customize your clothes?  

WooCommerce offers a variety of useful extensions that will help you create any store that you can envision!  Here are a few that are particularly useful for fashion boutiques:

  • WooCommerce Subscriptions – Sell themed clothing subscription boxes or send clients a new pair of fun socks every month.  Easily manage recurring payments. 
  • Product Vendors – Allow different clothing designers to sell their products on your store and control commissions easily.  Perfect for a multi-vendor marketplace!
  • WooCommerce Brands – Create, assign, and list product brands.  Then, allow your customers to filter your clothes by brand.
  • Variation Swatches and Photos – Showcase color options for your clothes with visual, interactive image swatches.
  • Catalog Visibility Options – Only interested in selling your designs in a physical location?  Use WooCommerce as a catalog and remove all checkout functionality. 
  • Product Add-Ons – Allow your customers to request personalization, like text or graphics, to your t-shirts and other clothing.  Offer gift wrapping and additional options.
  • Smart Coupons – Sell custom-designed gift cards and offer advanced discounts.
  • WooCommerce Dropshipping – Manage drop shipping and send automated order notifications to your suppliers.

When deciding which payment gateway is the best for your store, consider your specific needs.  Here are a few things to think about:

  • Do you want to integrate with the POS that you user in-store?
  • Do you want to accept recurring payments?  Here are a few payment gateways that provide this functionality.
  • What fees are involved?
  • Do you need to accept multiple currencies?
  • Can you accept mobile payments?

Explore the payment gateway extensions that WooCommerce offers.

4. Writing Effective Product Descriptions for Fashion

Since your online store doesn’t provide shoppers with the ability to touch your products, try them on, or see the exact color in person, it’s imperative that you write product descriptions that provide them with the same experience.

Start by considering your target audience.  Are your clothes specifically for professionals?  Address their pain points. Discuss your anti-wrinkling technology that’s perfect for business travel and how your clothes can easily transition from the office to dinner.

Or do you sell kids’ clothes?  You may want to talk to their mothers.  Mention how easy they are to wash, how quickly a mom can get their toddler in and out of them, or how they age up with the child.

By speaking to your customers’ specific needs, they’ll better understand why your clothes are the perfect fit for them.

You may also want to consider suggesting ways to style your clothes.  If customers know that there are a variety of ways to use your product, they’re more likely to spend the money on it.

In your short description, don’t just list specs.  Show the personality of your brand and share the benefits of your products.  This is your opportunity to be unique and fun! Share what you love about your clothes, how it will make your customers feel, and how it will make them look.

Then, use longer description fields to list all those details. Jakke does a great job of utilizing these spaces.  They have a description that shows personality, showcases the style of their coats, and shares their benefits, all while using descriptive language.  Below that, customers can find a fit guide and specs about the product.  

Some information to consider including in your specs:

  • Size and fit – Does your product run large, small, or true to size?  Link to or include a fit guide so your customers feel confident that they’re buying the right size.
  • The size of your model – If you have pictures of a model in your clothing, you may want to mention how tall they are and what size they’re wearing.  This helps customers understand how your clothes fit different body types.
  • The fabric and materials used – But don’t just list “100% cotton” or “silk”.  This is where your creativity can come into play!  What does it feel like? Use descriptive language like “ribbed”, “breathable”, “walkable”, and “elasticized.”  These types of words help customers imagine what wearing your clothes will feel like. Learn more about the psychology of product descriptions.
  • Washing instructions.  Are your products dry clean only or can you throw them in the washer?
  • Other fit details – Consider pointing out the rise of jeans, the length of a jacket, or the height of a pair of socks so your customers can understand exactly how they’ll look.
  • Other important features – What makes your products stand out?  Are they insulated? Do they have hidden pockets? Do they glow in the dark?  

5. Choosing Effective Product Photos 

Because you want your store to emulate the in-person shopping experience as much as possible, it’s important to have good product photos.  It may be a good idea to hire a professional, but if you do take the photos yourself, make sure they’re clear and crisp, have good lighting, and are accurate representations of dimensions and color.

Make sure you show a variety of angles so your customers get a good idea of what your product is really like.  Show the front, back, side, and any other applicable angles. Also grab pictures of details, like unique patterns or embellishments.

Ena Pelle even uses videos to show several angles of their clothing.  Hovering over each product on a category page plays a video of the model slowly turning in a circle to display all sides.  The motion also showcases the products “in action.”

A variety of pictures with different body types and sizes, and several outfit pairings help people picture wearing them on an everyday basis.

6. Blogging Regularly

Blogging is an excellent foundation for marketing campaigns.  Creative content can be used in email marketing, social media marketing, digital advertising, and more.  It’s also a great way to educate your customers, answer their questions, and show that you know what you’re talking about.  Plus, consistent, high-quality blog posts play a big role in search engine optimization.

Clearly, blogging is important.  But how do you come up with topic ideas on a regular basis?

The best place to start is a brain dump.  Start a document on your computer and list out all the ideas that immediately pop into your head, no matter how good they are.  Even if you don’t go with those topics, you may get inspiration from them.

Here are a few other ways to find idea inspiration:

  • Customer questions – What questions do you get via email, social media, and phone calls?  Answer them thoroughly in the form of blog posts.
  • Seasons and events – You might want to put together a winter style guide or a list of Christmas gift suggestions.
  • Capitalize on trends – Is velvet very “in” right now?  What about neon or camo? Consider discussing how to incorporate those styles into outfits using your clothes. Google Trends is a great tool to find out what people are searching for and interested in right now.
  • Read other blogs in your industry – Follow top bloggers in the fashion industry and use their ideas for inspiration.  Don’t copy their posts, but instead use them to spawn your own ideas and apply to your own situations.
  • Share what you’re passionate about – Write about your business, tell your story, share the charity that you donate to, or highlight team members.  Customers love to know more about the people they’re buying from.
  • Use Quora – Make a list of words that relate to your products or industry and use them to search Quora.  Go through the conversations and you’ll find endless ideas!
  • Join social media groups – Find Facebook groups related to your industry and pay attention to the questions that are being asked.  Write on those topics.

Think about what information your customers will really find useful rather than promoting your products in every single post.  Be a source of information for people and they’ll be more likely to purchase from you long-term.

7. Optimizing for Search Engines

While there are a lot of pieces to search engine optimization, the biggest thing to remember is that Google focuses on the user experience.  They want to show high-quality content to their users, so it’s important that your site provides just that.

Consider terms (or keywords) that your customers might use to find your products.  For example, someone might search, “comfortable winter sweater for women” or “white lace dress.”  Try to incorporate those keywords naturally into your content. Don’t just stuff them in as often as possible!

Blogging and good product descriptions are a great place to start.  Once you have that nailed down, it’s time to consider on-page optimization.  Here are the main components:

  1. Page or Product Title – Include keywords naturally and make it compelling to users.  This should make people want to click on your page or product.
  2. Meta Description – Write a short snippet about your page topic and make it interesting!  Users should want to read more.
  3. Slug (or URL) – Keep it short, but descriptive, and include your keyword.
  4. Alt Tags – Alt tags are how Google and Screen Readers “read” your images.  Don’t stuff these full of keywords, but instead describe exactly what’s in the picture.

The free Jetpack plugin helps with page optimization by eliminating the need to edit any code and allowing you to customize the above fields.  

There are also other aspects to consider like site load time, website structure, accessibility, and more.  Here are some more articles to reference if you want to dive further into SEO:

Ecommerce

8. Marketing Your Clothing Store

Now that you have everything set up, it’s time to start reaching out to your audience.  There are a lot of different marketing strategies and the perfect marketing mix will be unique to your business.  Here are some effective ways to market a clothing store:

Abandoned Cart Emails.  Learn more about abandoned cart emails.

Social Media Marketing.  Instagram is a great place for fashion brands to start.  It’s the perfect visual format to showcase your products.  Their new shoppable posts feature even makes it easy for your followers to shop your products right on their phones.

Facebook can also be a great tool.  It provides a better method of connecting directly with your customers through Facebook groups, reviews, and longer, text-based posts.  You may want to share customer stories here or create a photo gallery of outfit ideas.

You can use our Facebook for WooCommerce extension you to quickly integrate your WooCommerce store with both Facebook and Instagram.

Hashtags are an important part of reaching your target audience on social media.  Spend some time researching the hashtags that your specific customers follow and try to incorporate those into your posts.  HootSuite provides a great guide to finding effective hashtags and utilizing them.  

Pinterest Marketing. 

The Pinterest for WooCommerce extension helps you sync your entire inventory with Pinterest and gain valuable analytics data.

Tailwind is a great tool to use for fashion retailers.  You can add images in bulk and automatically schedule them in the time slots that are most effective for your account.  Tailwind Tribes also allow you to join groups of like-minded, fashion-focused brands who all want to share each others’ content.  Find the best Tailwind Tribes for fashion.

Influencer Marketing.  An endorsement from a celebrity or social media influencer can be huge for your business!  There are several ways you can approach this, including:

  • Blog post – The influencer would wear an outfit that includes your clothes and blog about it, either in exchange for a free product or for money.
  • Try-on haul video –  The influencer would post a social media video trying on a bunch of different items from your store and link to them.  This is particularly great for vloggers!
  • Event styling – Dress a celebrity or influencer for an event or the red carpet.  Their audience will ask where they got their outfit and they’ll be able to answer, “Who are you wearing?” with your name!
  • Design collaboration – Create a line of products in tandem with a celebrity and include their name on the collection.
  • Social media post – The influencer would post a video, picture, or story about your products.  Feel free to be creative – the sky’s the limit!

Learn more about connecting and collaborating with influencers.

Giveaways.  It may seem counterintuitive to give away your products for free, but it’s an excellent way to gain social media followers or email subscribers.  People love free stuff!  

On your website, ask for an email address in exchange for an entry into your contest – just make sure to let them know that they’ll be joining your email list, too!  Or, use one of these giveaway tools to get likes and comments on your social accounts.  You can even partner with other retailers or bloggers in your industry to garner more engagement!

Digital Advertising.  Online advertising can be an excellent way to reach new shoppers or connect with previous customers.  There are a variety of platforms – Google, Facebook, Instagram, Pinterest, etc. – and choosing the right one often depends on where your customers spend their time.

For example, Google Shopping ads put your products in front of customers who are searching for them on Google in a visual, compelling way.  But if your audience spends the majority of their time on social media, you may want to invest in Facebook ads.

Also consider remarketing ads, which target the people that have already been to your site or customers that visited a specific page (like your Checkout or Cart pages). You can create ads that offer a coupon code, advertise a sale, or address specific pain points – shipping concerns, pricing concerns, quality concerns, etc.  This can be an especially helpful way to gain sales.

Start Your Online Clothing Store 

Starting a fashion website may seem overwhelming, but the key is just that – start!  If you work through the steps in this article, spend time connecting with your customers, and create high-quality products, you’ll be on the right track.  Happy selling!

Start your WooCommerce store with these five steps. and if you enjoyed this post, why not check out this one on Wordpress Dynamic Content?

Filed under: eCommerce, WordpressTagged with: ,

Build Your WordPress Site with Dynamic Content

Professional Wordpress Sites

How can I make my website look professional? It is a question many aspiring website builders ask themselves when they are planning their latest work of digital art! The obvious answers will include improving the design or adding lots of fancy features. But in fact, one of the most effective ways to truly enhance your basic website and make it a professional, custom one is by adding dynamic content. Dynamic content will give your users a much more fulfilling experience on your website. So for DIY Wordpress Builders, we run through a couple of ways to achieve this below.

What Is Dynamic Content?

Dynamic content refers to interactive web content that changes depending on the time, location and the user. When a user navigates a dynamic website WordPress will pull the correct information from the database to display to the user depending on what page they are on. With static content, what you see on the front-end will not change. In fact, you will more than likely need the help of a developer if you want to make any changes to it. However, with dynamic content website owners can edit everything on the back-end instantly without coding.

It means that the information can change according to what the user is looking at, providing a much more interactive experience. To illustrate, if you are on a gym website you might want to look at the different gyms available. Of course, each gym will have different information such as its own name, address, and list of facilities. Therefore, when you click on each gym you will see different content related to it that you will not find on the other pages.

Dynamic

The Advantages of Dynamic Content

Dynamic content brings many advantages to your website that static content cannot offer.
A better user experience. Users will be able to see content which is adapted to them such as different offers which will change according to their behaviour.

Improve your KPIs

With dynamic content you can improve conversions and reduce bounce rates on your website by creating tailored content.

Smooth navigation

Dynamic content provides a seamless experience through a website compared with static content as you can easily find the content you are looking for.

Easy to update

You can simply edit your page on the WordPress back-end without needing to hire an expert developer.
Responds to screen sizes. A dynamic website easily adapts to various screen sizes compared with a static one.

There are two ways we recommend that you create dynamic content. Below we will show you the two options and exactly how you can create your websites with both.

1. Create Dynamic Content with Toolset Blocks & Gutenberg

The launch of Toolset Blocks offers a new way to create dynamic content on WordPress using its block editor, Gutenberg. Since its launch a year ago, Gutenberg has improved significantly to offer a simple and intuitive way for you to design and implement your websites. The best part is that non-coders can now easily build exactly what they had in mind by using Gutenberg and integrated plugins.

Gutenberg

This includes dynamic content which website builders can create with Gutenberg thanks to Toolset Blocks.

How Does Toolset Blocks Work?

Toolset Blocks is a new plugin which you can use on two fronts:

Creates custom, advanced features such as content templates, archives and Views.

Support dynamic sources for blocks which makes your custom fields and taxonomies available to be displayed on your pages.

Consequentially, you can use Toolset Blocks to add dynamic content easily to any posts, pages or templates without any coding.

There are two main sources from which you can draw dynamic content using Toolset Blocks. You can either use a source from the current post or from a custom field. Below we will go through both options to show when you might need to use them.

Displaying Dynamic Content from a Current Post

Head to Toolset > Dashboard and click the Create Content Template option next to the post type you want to create a content template for.

We can now start adding our blocks to create our content template. Let’s imagine I want to add an image. First you select the + option on the top left to add a block.

Scroll down until you find Toolset’s list of blocks and add the Image block.

Blocks

You will now see a question prompting you if you want to use Dynamic Sources or not. Click Yes.

Select the source for your image. This determines what content WordPress will pull up depending on what option you select. I want to display the featured images of each gym within the block so I will select the Featured Image Data option.

On the right-hand sidebar you can adjust your image further if you want to change the source of the dynamic content or style the image, for example.

Displaying Dynamic Content from a Custom Field

We can use the same content template as before to create blocks with dynamic content from a custom field. This time I will add the custom field for the ratings of each gym as dynamic content.

Head to the list of Toolset blocks and add the Single Field block.

On the sidebar on the right under Field Source, select the Custom Field field type.
Under the Custom Field Groups dropdown choose the Gyms post type. Note this will be whichever custom post type you want to pull the custom field from.

Under the Custom Field dropdown select the custom field you want to display.

If you switch between the different gym posts on the front-end you will see that each post displays the correct price for that gym thanks to dynamic content. Notice how we did not need to use any coding at all to create our dynamic content.

Wordpress

2. Creating Dynamic Content with Total

Another equally effective way to create dynamic content is by using the Total theme to create dynamic post templates built-in.

What Features Does Total Offer?

Total is one of the most popular themes on WordPress and comes packed with a number of features which you can set up easily without having to download multiple plugins to perform these tasks.

Easy demo importer – Turn your empty site into a fully functional website packed with content in one click when you select to import one of Total’s 40+ pre-built demos.

Drag & drop page builder – Total is integrated with the popular WPBakery page builder to provide you with an intuitive drag & drop builder so you can build your website with ease.

100s of page builder elements – Take advantage of Total’s hundreds of page builder elements to customize your pages.

Easily customizable – Use the live customizer settings to change a number of elements on your site including colors, fonts, widths and much more.

Developer friendly – Total comes with a number of built-in hooks and filters making it easy for you to modify your theme with 450+ snippets available from the online documentation.

And, of course, you can create dynamic content using Total. Below let’s show you an example of what you can achieve by making a simple portfolio item dynamic.

How to Create a Dynamic Content Template with Total

Head to Visual Composer > Templates and click Add New. Next give your template a name.

First add the Post Media element which will display whatever media you add to your posts. For portfolios, this could be the featured image, gallery, video etc.

Next, include the Post Content module which will display any content which is added to the posts in the editor.

With Total you can include a number of post elements in your dynamic template. Add post title, meta data, related items, tags, social links, and more. When finished click Publish.

We now need to assign the dynamic template to our portfolio custom post type. To do this navigate to the WordPress Customizer, then head to Portfolio and select the template you just created under Dynamic template (Advanced).

You can now see your media in action. Click Save & Publish and your dynamic content should be ready.

Creating dynamic templates is a particularly great option if you are building websites for clients. By using them you can create a template once and assign it to all of your portfolio items instantly. Not only that but if you need to change a layout all you need to do is edit the template and all of your portfolio items will also be updated.

What is your experience of creating dynamic content? You now have two methods for creating dynamic content. You can either download Toolset Blocks or Total Theme today and get started with taking your website from basic to custom.

Have you used either tool to add dynamic content to your website? Let us know how it worked out for you in the comments below! If you enjoyed this post, why not check out this one on 10 places to get free website images?

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: WordpressTagged with: , , ,