How to Move Your WordPress Site to a New Server

Looking to transfer your entire site to a new server or backup your current site? This tutorial will show you how to migrate or backup your site easily with Duplicator plugin.

Option 1: Migrating Sites with Duplicator Plugin

Step 1) Create Package

First login to your WordPress admin and install the Duplicator plugin, a free plugin that can transfer and backup your site. The plugin creates a "package" that can be used to re-create your current website in a new environment. Now go to Duplicator from the admin menu and hit the "Create New" button:

website-to-new-server

In the next screen you can select files and or database tables to be excluded from the final package. Although this feature can come handy sometimes, you can safely ignore it and hit the "Next" button at the bottom of screen. In the next window, the plugin checks for requirements and errors:

website-to-new-server

The most common errors you might see are:

  • Max Execution Time: adjusting "max_execution_time" setting in php.ini file will fix that; you can contact the web hosting provider, they'll adjust this for you.
  • File size warning: the error occurs if the package size becomes larger than 150MB in size, for example in website that use lots of images this could occur, however you'll likely be fine during the migration. If the migration does not work out (following the tutorial to the end) you can ask the web hosting provider to disable the server limitations momentarily.

Now hit the "Build" button. Depending on the size of your website this will take several minutes (not hours, if it takes hours something has gone wrong, you can re-try creating the package).

website-to-new-server

After the package is complete, download both the archive file and the installer by clicking on the blue buttons. We'll need both files to migrate the website to a new server later.

Step 2) Migrating the Website to the New Server

Now that you have the archive file and installer.php file, copy both files to the root directory of your new server (you can use FTP to upload both files), and make sure both files are in the same directory:

website-to-new-server

Navigate to the URL of the new domain and launch the installer.php file, in this tutorial, we are moving the site to a localhost in the "new_website" directory, so the address is: "http://localhost/new_website/installer.php":

website-to-new-server

Enter the database details (if you are not sure about the database info, contact your web hosting provider), check the "I have read all warnings and notices" checkbox and hit "Run Deployment", and we're off to the next screen:

website-to-new-server

Now here's the most important bit: click the Advanced Options and then enable the "Enable Full Search" checkbox. This is required so that the URLs in Builder (links you might add, images that are uploaded to the site, etc.) are all updated to the new website. Now hit the Run Update button. That's it.

Using Duplicator as a Backup Tool

Although Duplicator is a migrator tool, but you can use it to backup your site as well.

To backup your site with Duplicator:

  • First create a package with Duplicator (follow "Step 1" in this tutorial)
  • Download the installer.php and the archive zip to your computer for backup
  • If you ever need to restore your site, follow "Step 2" in this tutorial to upload the installer.php and archive zip to your server. Since you are restoring the site on the same URL, you can skip the step to update the site URL.

Option 2: Migrating Sites with All-in-One WP Migration

Step 1) Install the Plugin

Go to WP Admin > Plugins > Install Plugins, search for "All-in-One WP Migration" plugins and install it.

After it has been installed, you will see All-In-One-Migration in the admin panel like the image below, so click it, then click Export.

Export option

Step 2) Export the Content

There should be a green button titled “Export to”, click it to start exporting the website.

Once, you click “Export to” there will be a few different options to use. Select “File” and it will create a file for us to import later.

Export Button

Note: The Advanced options above the Export button allow you to choose what options of the export to exclude but we don’t need that. So it can be left unchanged.

Download the file and save it somewhere you can easily access.

Export Completed

STEP 3) Import the Content

To import your site content, access your new WordPress website, go to All-In-One-Migration in the admin panel and click “Import”.

Import Option

Now, you need to select the file that we exported earlier and import it, so click the "Import From" button, and select "File".

Import button

There will be a prompt after you have selected the file from your computer, so simply click proceed if you are ready to do so.

Import Prompt

When the import is done, you will be prompted to save your permalinks twice, you can click the link in the dialogue box. It will log you out so you need to login in with the old credentials.

When you login, it should take you to the permalinks page where you can click the save changes button twice - but let the page load in between each click and that will complete the process.

Import Complete

With that, you have migrated your entire website. This migration does include all your plugins and media but keep in mind that the advanced options will allow you to exclude specific options if you want to leave certain things out.

NOTE: This plugin does not work on a multisite environment.

Regenerating CSS Files

After migration you might need to rebuild your cache of CSS files, so paths to images and other assets are updated. To do this, simply go to Themify > Settings > Themify Builder and click on the Regenerate CSS Files button. That's all that is needed, and Builder will re-create the CSS files on the server.

Read More

Extending Allowed URL Protocols

For security and proper URL formatting, we use the standard WordPress function esc_url in multiple areas.

This function has a peculiarity: it will only allow certain known and safe protocols. By default in WordPress it will only allow these protocols:

http, https, ftp, ftps, mailto, news, irc, gopher, nntp, feed, telnet, mms, rtsp, svn, tel, fax, xmpp

In Themify themes and Builder, we have also added:

skype, sms, comgooglemaps, comgooglemapsurl, comgooglemaps-x-callback

But perhaps you need even another protocol. You can add your own protocol by following these steps:

1. Create a child theme and a functions.php file (if you don't have it yet)

2. Add this code in the child theme functions.php:

<?php
/**
 * Add extra protocols to list of allowed protocols.
 *
 * @param array $protocols List of protocols allowed by default by WordPress.
 *
 * @return array $protocols Updated list including extra protocols added.
 */
function custom_themify_add_more_protocols( $protocols ){
	$protocols[] = 'andromo';
	return $protocols;
}
add_filter( 'kses_allowed_protocols' , 'custom_themify_add_more_protocols' );

Read More

Builder Modules

Accordion

The Accordion module is used to display content in boxes which can be toggled open and closed with an accordion effect.

To use the Accordion module:

  • Enter a title for the accordion tab in the "Accordion Title" field
  • Enter the text to show within the accordion tab in the "Accordion content"
  • To add another accordion tab, click the "Add new" button
  • To delete or duplicate an accordion tab, hover over the burger menu icon (top left to the accordion title)

accordion module preview

  • Module Title This option is used to add the title of your module.
  • Accordion Title The title shown in the accordion heading for each accordion tab.
  • Accordion Text The text shown in the accordion content area for each accordion tab.
  • Default Open/Closed This option determines whether a tab default displays as open or closed.
  • Add New This option adds a new accordion tab.
  • Accordion Layout This option is used to determine the layout and style of the accordion module and will affect how the tabs are shown.
    • Option 1 This layout will show the tab headings and content as one block.
    • Option 2 This layout will show the tab headings separate from the content in two blocks.
  • Toggle Mode This option is used to change what will happen when a user clicks on an accordion heading.
    • Toggle When clicking a tab heading, the selected tab will open and other tabs will still remain open.
    • Accordion When clicking a tab heading, the selected tab will open and other tabs will be closed.
  • Accordion Color This option is used to change the color of the accordion module.
  • Accordion Appearance These options provide the ability to toggle various effects for the accordion boxes.
    • Rounded Toggles whether the corners of the module's content will be rounded.
    • Gradient Toggles whether the module will have a gradient effect applied to it.
    • Glossy Toggles whether the content area will have a gloss overlay effect applied to it.
    • Embossed Toggles whether the module will have an emboss effect applied to the edges.
    • Shadow Toggles whether the module will have a shadow effect applied to it.
  • Icon Add an icon that'll appear when your accordion is opened or closed.

Alert

The Alert module is used to show a notification or alert on your site. The alert visibility can be scheduled, displayed for a specific number of times, showed to either login/public visitors, and auto closed after a certain number of seconds. It can also be used as an action box. There is an optional action button to display a message or redirect the guest to another page once it is clicked.

This is the alert module screenshot image

To use the Alert Module:

  • Module Title This option is used to add the title of your module.
  • Alert Style Choose from 4 different styles: (1) Button Right (2) Button Left (3) Button Bottom, (4) Button Center
  • Alert Heading This option is used to set the heading text of the module.
  • Alert Text This option is used to set the body text of the module.
  • Alert Color This option is used to change the color of the module.
  • Alert Appearance These options provide the ability to toggle various effects for the module.
  • Action Button Enter the text that will show inside the action button.
  • Action Click Action Choose the action that'll occur when you click the button: (1) Close alert box (2) Display a message (3) Go to URL.
  • Action Button Color This option is used to change the color of the action button.
  • Action Button Appearance These options provide the ability to toggle various effects for the action button.
    • Rounded Toggles whether the corners of the module's content will be rounded.
    • Gradient Toggles whether the module will have a gradient effect applied to it.
    • Glossy Toggles whether the content area will have a gloss overlay effect applied to it.
    • Embossed Toggles whether the module will have an emboss effect applied to the edges.
    • Shadow Toggles whether the module will have a shadow effect applied to it.
  • Schedule Alert Toggle to enable the ability to schedule the alert. Enabling it will allow you to set the start and end time.
  • Guest/Logged Users Set to: (1) Show to both users and guest visitors (2) Show only to guest visitors (3) Show only to logged-in users.
  • Limit display Enter the number of times the alert appears.
  • Auto Close Toggle to show the duration in seconds for how long the alert should appear.

Box

The Box module is used to display a box of content using the standard WordPress WYSIWYG editor. You can also insert shortcodes with the Box module.

This is the box module screenshot image

  • Module Title This option is used to add the title of your module.
  • Editor You can add the content you wish to be displayed in the box module using the WordPress WYSIWYG editor.
  • Box Color This option is used to change the color of the box module.
  • Appearance These options provide the ability to toggle various effects effects to be applied to the box.
    • Rounded Toggles whether the corners of the module's content will be rounded.
    • Gradient Toggles whether the module will have a gradient effect applied to it.
    • Glossy Toggles whether the content area will have a gloss overlay effect applied to it.
    • Embossed Toggles whether the module will have an emboss effect applied to the edges.
    • Shadow Toggles whether the module will have a shadow effect applied to it.

Button

The Button module allows you to add a button with custom styling onto your site.

Button module image

  • Size Select the size of the button you would like to use.
  • Shape Select the shape of the button you would like to use.
  • Button Background Style Choose the background style of the button.
  • Display Choose to display your button horizontally or vertically.
  • Alignment Choose to display your button to the left, centre, or right.
  • Fullwidth Toggle to display your button fullwidth.
  • Nofollow Toggle to disable search engines from crawling this link.
  • Downloadable Toggle to enable user to download link as file.
  • Text Input the text that will appear on the button.
  • Link Input the link that the user will be redirected to.
  • Open link in: When the user clicks the button, select how your link will appear
    • Same Window The link will load and open in the same window.
    • Lightbox The link will open inside a lightbox.
    • New tab The link will open in a new tab.
  • Color Select from pre-selected colors for how you want your button to appear. Font color will change depending on the color preset you select.
  • Icon You can select the icon that you would like to insert with your button text. This will appear on the left side.
  • Add new Select this to add more than one button.

Callout

The Callout module is used to display a content box with an associated action button.

This is the Callout module screenshot image

  • Module Title This option is used to add the title of your module.
  • Callout Style This option is used to determine the style of the callout box and how the callout text and action button are shown.
    • Option 1 The callout text will be shown on the left and the action button will be shown on the right.
    • Option 2 The callout text will be shown on the right and the action button will be shown on the left.
    • Option 3 The callout text will be shown above the action button and the content will be left aligned.
    • Option 4 The callout text will be shown above the action button and the content will be center aligned.
  • Callout Heading This option is used to set the heading text of the callout box.
  • Callout Text This option is used to set the body text of the callout box.
  • Callout Color This option is used to change the color of the callout box.
  • Callout Appearance These options provide the ability to toggle various effects for the callout box.
    • Rounded Toggles whether the corners of the module's content will be rounded.
    • Gradient Toggles whether the module will have a gradient effect applied to it.
    • Glossy Toggles whether the content area will have a gloss overlay effect applied to it.
    • Embossed Toggles whether the module will have an emboss effect applied to the edges.
    • Shadow Toggles whether the module will have a shadow effect applied to it.
  • Action Button Link This option is used to set the link URL of the action button.
  • Action Button Text This option is used to set the text that will show inside the action button.
  • Action Button Color This option is used to change the color of the action button.
  • Action Button Appearance These options provide the ability to toggle various effects for the action button.
    • Rounded Toggles whether the corners of the module's content will be rounded.
    • Gradient Toggles whether the module will have a gradient effect applied to it.
    • Glossy Toggles whether the content area will have a gloss overlay effect applied to it.
    • Embossed Toggles whether the module will have an emboss effect applied to the edges.
    • Shadow Toggles whether the module will have a shadow effect applied to it.

Divider

The Divider module is used to add a border divider between elements.

This is the Divider screenshot image

divider module image

  • Module Title This option is used to add the title of your module.
  • Divider Style This option is used to determine the line style of the divider.
    • Option 1 The divider will be shown as a solid line.
    • Option 2 The divider will be shown as small dashes.
    • Option 3 The divider will be shown as large dashes.
    • Option 4 The divider will be shown as a double line: two lines parallel to one another.
  • Stroke Thickness This option is used to set the line thickness of the divider.
  • Divider Color This option is used to change the color the divider will show in.
  • Top Margin This option is used to set the margin space above the divider.
  • Bottom Margin This option is used to set the margin space below the divider.
  • Divider Width There are 2 options: (1) Fullwidth or (2) Custom.

Feature

The feature module is used to showcase features or services of your organization with an animated circular progress bar around the icon or any custom image.

Feature module image

  • Module Title This option is used to add the title of your module.
  • Feature Title This is the title that appears under the Feature module icon.
  • Editor Here you can add the feature content you wish to be displayed under the Feature Title using the WordPress WYSIWYG editor.
  • Layout This option is used to set the icon position, it has three options.
    • Icon Left Displays the selected icon to the left of the content.
    • Icon Right Displays the selected icon to the right of the content.
    • Icon Top Displays the selected icon the top of the content.
  • Circle Percentage This will set the percentage of the circular progress bar to be filled when animated.
  • Circle Stroke This will set the width of the circular progress bar.
  • Circle Color This will set the color of the circular bar around the feature icon.
  • Circle Size This will set the size of the circle, choose the desired size from the dropdown, "Small," "Medium" or "Large."
  • Icon Type Select an icon or image to be used for the feature module using the Font Awesome icon library or upload a custom image.
    • Icon This will set the icon to be used for the feature module using the Font Awesome icon library.
    • Icon Color This will set the color of the icon to be used for the feature module.
    • Icon Background This will set the color of background for the icon to be used for the feature module.
  • Link This option is used to link the icon or your custom image and title to a custom URL.
    • Same Window This opens the URL in the same window.
    • Lightbox This open the URL in a lightbox.
    • New tab This opens the URL in a new tab.
  • Overlap Image Add an overlap image on the top half of the icon (Tip: This is usually used to showcase the profile image of a person).
    • Width/Height: Add a custom image width and height for the overlap image. This only appears when you add an overlap image.

The Gallery module is used to add a standard WordPress gallery to your site.

Gallery module image

  • Module Title This option is used to add the title of your module.
  • Gallery Layout Choose to showcase your gallery in Grid, Showcase, Lightboxed, or Slider layout.
  • Masonry Toggle to enable masonry, which doesn't have a fixed height.
  • Insert Gallery Shortcode This option is used to add the gallery shortcode, either by entering it manually or using the "Insert Gallery" button. Select "Insert Gallery" to setup a gallery with WordPress' "Create Gallery" window as documented here.
  • Pagination Toggle to add a pagination when showcasing your images.
  • Image Title Toggle to show or hide image titles.
  • Image Caption Toggle to show or hide image captions.
  • Thumbnail Width Set the gallery thumbnail width.
  • Thumbnail Height Set the gallery thumbnail height.
  • Columns Select the number of columns for each gallery (1-9 column layout).
  • Link to Select the image to link as a media file, attachment page, or none.
  • Link to Image Size Select the image size that you would like the image to appear as: Thumbnail, Medium, Large, or Original Image.
  • Image Appearance This option provides the ability to toggle various effects to be used on the gallery thumbnails.
    • Rounded Toggles whether the corners of the element should be rounded.
    • Drop Shadow Toggles a drop shadow effect on the element.
    • Bordered Toggles a border around the element.
    • Circle Toggles whether the element will be rendered as a circle. (Requires images to be square ratio)

To make the images in gallery grid open in lightbox, make sure to set the Link To option to "Media File" when inserting the gallery:
This is the how to open image in lightbox setting screenshot image

Icon

The Icon module allows you to add an icon with custom styling to your site.

Icon module image

  • Size Select the size of the icon you would like to use.
  • Icon Shape Choose the style of the icon shape you prefer.
  • Arrangement Select to showcase the icons horizontally or vertically.
  • Icon Position Set the icon position to left, centre, or right.
  • Icon You can select the icon that you would like to insert.
    • Select from the colour for your icon from pre-selected colors.
  • Label Input the text that will appear with your icon.
  • Link Input the link that the user will be redirected to.
    • Same window Open link in the same window.
    • Lightbox This will link the icon or custom image to open a URL in a lightbox.
    • New tab This will open the URL in a new tab.
  • Add new Select this to add more another icon.

Image

The Image module is used to add an image with a title and caption on your site.

Image module screenshot

  • Module Title This option is used to add the title of your module.
  • Image Style This option is used to determine the layout of the image and any title and caption.
    • Option 1 Image is shown on top and title/caption is shown underneath.
    • Option 2 Image will be shown on the left and title/caption is shown on the right.
    • Option 3 Image will be shown in the centre, and title/caption is shown underneath.
    • Option 4 Image will be shown on the right and title/caption will be shown on the left.
    • Option 5 Title/caption will be shown in an overlay on top of the image.
    • Option 6 Image and title/caption will be shown in a box.
    • Option 7 Title/caption will be shown as an overlay on the image.
  • Image URL This option is used to set/upload an image URL to use for the module, or alternatively you can select an image from your website's media library by clicking the thumbnail, then selecting "Browse Library".
  • Image Appearance These options provide the ability to toggle various effects to be applied to the image.
    • Rounded Toggles whether the corners of the element should be rounded.
    • Drop Shadow Toggles a drop shadow effect on the element.
    • Bordered Toggles a border around the element.
    • Circle Toggles whether the element will be rendered as a circle. (Requires images used be square ratio)
  • Width This option sets the width of the image output.
  • Height This option sets the height of the image output.
  • Image Title This option is used to set the title of the image.
  • Image Link This option is used to set the URL that is linked to by the image being added.
    • Same window open link on the same window.
    • Lightbox This option is used to link the icon or custom image and title to open a URL in lightbox.
    • New tab If checked this will open the URL into a new tab.
  • Image Caption This option is used to set a caption for the image being added.

Lottie Animation

Lottie is a lightweight, interactive, and scalable motion graphic format that renders smoothly on all devices (desktop, tablet, and mobile).

Lottie options

To use Lottie Animation:

  • Create/edit any page and turn on the Builder on the frontend
  • Add/drop in a "Lottie Animation" module
  • If you want to have multiple chain-able Lottie animation in one module, click "+ Add new" to insert them.
  • Each Lottie item has the following options:
    • JSON File = That is the Lottie .json file. You can upload your own JSON file or click "Lottie Library" to insert it. On the Lottie Library, there are thousands of free Lottie animations available. You can choose to download the files to your own server or use external source hosted on lottiefiles.com.
    • Play On = Choose an event to trigger the animation:
      • OnLoad = Play animation when it is loaded.
      • Click = Play animation when it is clicked. You can target the click action on another element by entering the element's "CSS Selector". Example: if you have a Button module with custom CSS class 'action-button', you would enter '.'action-button .builder_button' as the CSS Selector to trigger the Lottie animation.
      • Hover = Play animation when it is hovered. Similar as the Click event, you can enter the "CSS Selector" of another element to trigger the animation.
      • Hover & Reverse = Play animation on hover and reverse animation on mouseout.
      • Hover & Pause = Play animation on hover and pause animation on mouseout.
      • Progress Animation = Progress the animation when you move cursor on the Lottie container.
      • Scroll = Play animation as you scroll on the page.
        • You can choose the additional options with Scroll option:
        • Visibility = Visibility of the element in the viewport. It triggers the "Event" option when the selected visibility range is active.
          • Progress Animation = Progress the animation as you scroll on the page (the animation will progress as you scroll down and reverse as you scroll up).
          • Play = Play animation
      • Product add cart = Play the animation when a WooCommerce product is added to the cart.
      • Do not play = Don't play the animation (it will be like a static image).
    • Speed = Speed of the animation.
    • Reverse = Play the animation in reverse order.
    • Play Frames = Play specific frame range of the animation timeline.
    • Delay = Delay option is only applicable when you have multiple chain-able Lotties in the same module. It allows to delay the Lottie animation before starting the next one in the chain.
    • Render = Render the Lottie animation in either SVG, Canvas, or HTML format. Some features in the Lottie file might not be supported in certain format. Select the format according to your Lottie file. See this table of the supported features in different formats.
  • Loop All Items = This option is only applicable when you have multiple Lotties in the same module. It controls the looping of all items.
  • Export as HTML = Export the Lottie module as HTML code which you can paste on any page to display it (eg. you can paste the code in sidebar Text widget to display it). NOTE: It requires the Themify framework in order to render the Lottie HTML code.
  • Control Lottie sizing: Lottie animation is scalable and responsive. It is fluid width (always fullwidth within the container).
    • To control the canvas sizing: on Lottie Animation > Styling > Margin or Padding, you would add margin or padding left/right to control the sizing.
    • To control the animation sizing within the canvas: on Lottie Animation > Styling > Aspect Ratio, enter the aspect ratio. Example: "16 : 9" would have a landscape ratio and "1 : 1" would have a square ratio.

Map

The Map module is used to add an interactive Google map to the page. To display a Google Map, enter the full address and configure the available options.

Map module image

  • Module Title This option is used to add the title of your module.
  • Map Provider Select which provider you'd like to use to display your map.
  • Type Select to showcase the map as Dynamic or a Static Image.
  • Address Enter the address you'd like to appear on the map.
  • Lat/Long Use Lat/Long coordinates instead of inputting an address.
  • Zoom This option sets the zoom level of the map.
  • Width This option sets what width the map should be displayed at.
  • Height This option sets what height the map should be displayed at.
  • Border This options sets the styling of a border around the map element.
  • Type This option set the type of map you want to display, you can choose from the dropdown, "Road Map," "Satellite," "Hybrid" and "Terrain".
  • Map Controls Toggle to enable or disable the user's access to map controls.
  • Draggable Toggle to enable or disable the Draggable feature in the map.
  • Scrollwheel Toggle to enable or disable the scrollwheel on the map.
  • Mobile Draggable Toggle to enable or disable the draggable feature on the map in mobile mode.
  • Info Window Input text that'll appear on the text tooltip when user clicks it on the map.

Menu

The Menu module is used to add a custom WordPress menu to the page. To display a custom menu, you have to first create the menu in WordPress > Appearance > Menus. Once you create a menu, they will automatically appear in the "Custom Menu" select dropdown.

This is Menu module screenshot image

  • Module Title This option is used to add the title of your module.
  • Menu Layout This option is used to determine the layout of the menu with the following options:
    • Option 1 The menu will be shown as a horizontal menu stretching only as far as the menu entries.
    • Option 2 The menu will be shown as a horizontal menu stretching the width of the column.
    • Option 3 The menu will be shown as a vertical menu.
  • Custom Menu Select one of your custom WordPress menus from the dropdown. To createa custom WordPress menu, go to WordPress Admin > Appearance > Menus, as documented here.
  • Menu Color This option is used to select the color of the menu.
  • According Styles These options provide the ability to toggle various effects to be applied to the menu.
    • Rounded Toggles whether the corners of the module's content will be rounded.
    • Gradient Toggles whether the module will have a gradient effect applied to it.
    • Glossy Toggles whether the content area will have a gloss overlay effect applied to it.
    • Embossed Toggles whether the module will have an emboss effect applied to the edges.
    • Shadow Toggles whether the module will have a shadow effect applied to it.

Post

The Post module is used to show blog posts.

This is Post module screenshot image

  • Module Title This option is used to add the title of your module.
  • Post Type Select the post type you would like displayed: Post, Product, Event, or Portfolio.
  • Taxonomy Select the taxonomy you would like to display: Categories or Tags.
  • Query by Select how you would like to query your posts by: Categories or Post Slugs.
  • Categories This option is used to select which categories of posts will be displayed.
  • Post Layout This option is used to determine the layout of the posts and how they will be arranged.
    • Grid 4 Posts will be arranged in a four column layout.
    • List Post Posts will be arranged in a standard one column list.
    • Grid 2 Posts will be arranged in a two column layout.
    • Grid 3 Posts will be arranged in a three column layout.
    • Grid 4 Posts will be arranged in a four column layout.
    • List Thumb Image Posts will be arranged in a standard one column list with the post thumbnail.
    • Grid 2 Thumb Posts will be arranged in a two column layout with the post thumbnail.
    • List Large Image Posts will be arranged in a standard one column list with a large post image.
    • Auto Tiles Post will be arranged in a masonry fashion.
  • Content Layout Select how you would like the layout of the post's content displayed: Default, Stacking, Overlay, Polaroid, Boxed, Flip.
  • Post Filter Toggle to enable or disable filtering your posts by categories or tags.
  • Masonry Layout Select if you would like the masonry layout enabled.
  • Post Gutter Select your preference of gutter space between your posts.
  • Limit This option sets the limit of the number of posts shown.
  • Offset This option sets how many posts should be skipped before the first one is displayed.
  • Order This option sets whether the posts will be ordered in ascending or descending order.
  • Order By This option sets what data the posts order will be based on.
  • Display This option sets what content will be output (full content, excerpt or none).
  • Featured Image Toggle whether or not the featured image for the posts will be shown.
  • Image Width This option sets the width of the featured image output.
  • Image Height This option sets the height of the featured image output.
  • Unlink Featured Image Toggle to enable or disable whether the featured image will be a link.
  • Post Title Toggle to enable or disable whether the post title will be shown.
  • Unlink Post Title Toggle to enable or disable whether the post title will be a link.
  • Post Date Toggle to enable or disable whether or not the post date will be shown.
  • Post Meta Toggle to enable or disable whether or not the post meta will be shown.
  • Post Navigation Toggle to enable or disable whether or not navigation links to view more posts will be shown.

Slider

The Slider module is used to add a custom slider of various content types.

To use the Slider module:

  • Select a radio button with the content you want to display: Blog Posts, Images, Videos, Text, Portfolio, or Testimonials.
  • This will toggle different options according to your selection (e.g. Posts radio button will give you options to display WordPress posts along with its layout options)
  • You can then configure the slider options below such as slider layout, slider navigation, and effects

This is Slider module screenshot image

  • Module Title This option is used to add the title of your module.
  • Display This option allows you to set the type of content the slider will display.
  • Post Type Select the post type you would like displayed: Post, Product, Event, or Portfolio.
  • Taxonomy Select the taxonomy you would like to display: Categories or Tags.
  • Categories This option is used to select which categories of posts will be displayed.
  • Query This option sets how many posts to show.
  • Offset This option sets how many posts should be skipped before the first one is displayed.
  • Order This option sets whether the posts will be ordered in ascending or descending order.
  • Order By This option sets what data the posts order will be based on.
  • Display This option sets what content will be output (full content, excerpt or none).
  • Post Title Toggle to enable or disable whether the post title will be shown.
  • Unlink Post Title Toggle to enable or disable whether the post title will be a link.
  • Featured Image Toggle whether or not the featured image for the posts will be shown.
  • Unlink Featured Image Toggle to enable or disable whether the featured image will be a link.
  • Open Link in New Tab Select this option to open link in a new tab.
  • Slider Layout This option is used to determine the layout of the slider.
  • Image Width This option sets the width of the slider image output.
  • Image Height This option sets the height of the slider image output.
  • Horizontal Scroll Toggle to enable or disable for the slider to scroll horizontally.
  • Slider Options A list of various options available to customize the behavior of the slider:
    • Visible Slides Sets number of slides visible at once.
    • Mobile Visible Slides Sets number of slides visible at once on mobile.
    • Auto Scroll Sets how long before slider will automatically scroll.
    • Scroll Sets number of slides to scroll at a time.
    • Speed Sets speed of transition effect.
    • Effect Sets the transition effect used.
    • Pause On Hover Sets whether the slider will pause when you hover over it.
    • Wrap Sets whether the slides will repeat from the beginning when scrolled through.
    • Pagination Sets whether to display the slider page navigation buttons.
    • Slider Arrows Sets whether to display the slider arrow navigation buttons.
    • Left Margin Space Sets how much of a margin to add to the left side of individual slides.
    • Right Margin Space Sets how much of a margin to add to the right side of individual slides.

Blog Posts, Slider Posts, and Portfolio Slider Options:

  • Category This option is used to select which categories of posts will be displayed.
  • Limit This option sets the number of posts shown.
  • Offset This option sets how many posts should be skipped before the first one is displayed.
  • Order This option sets whether the posts will be ordered in ascending or descending order.
  • Order By This option sets what data the posts order will be based on.
  • Display This option sets what content will be output (full content, excerpt or none).
  • Hide Featured Image This option sets whether or not the featured image for the posts will be shown.
  • Unlink Featured Image This option sets whether the featured image will be a link.
  • Hide Post Title This option sets whether or not the post title will be shown.
  • Unlink Post Title This option sets whether the post title will be a link.

Image Slider Options:

  • Image URL This option is used to set/upload an image URL to use for the module, or alternatively you can select an image from the site's media library.
  • Image Title This option is used to set the title of the image being added.
  • Image Link This option is used to set the URL that is linked to by the image being added.
  • Image Caption This option is used to set a caption for the image being added.
  • Add New Used to add a new slide to the slider.

Video Slider Options:

  • Video URL This option is used to set the video URL to use for the module.
  • Video Title This option is used to set the title of the video being added.
  • Video Title Link This option is used to set the URL that is linked to by the title.
  • Video Caption This option is used to set a caption for the video being added.
  • Video Width This option is used to set the width of the video player.
  • Add New Used to add a new slide to the slider.

Text Slider Options:

  • Editor You can use the WYSIWYG editor to add any content required in each slide.
  • Add New Used to add a new slide to the slider.

Tab

The Tab module is used to add a content box where the content can be switched with the tab buttons.

To use the Tab module:

  • Enter Tab Title
  • Enter Tab Content
  • To delete/duplicate a Tab: hover over the row menu icon (top left burger menu icon)
  • To add a Tab: just click on the "Add new" button

Tab module image

  • Module Title This option is used to add the title of your module.
  • Tab Title The title shown in the tab button.
  • Icon Add an icon that appear on a tab.
  • Tab Content The content shown when the tab is selected.
  • Add New Used to add a new tab to the module.
  • Tab Layout This option is used to determine the layout of the tabs and content.
    • Option 1 Tabs will be shown horizontally with tab titles and content shown as one block with borders around the content.
    • Option 2 Tabs will be shown horizontally with tab titles and content shown as two separate blocks with borders around the content.
    • Option 3 Tabs will be shown vertically with content in a box.
    • Option 4 Tabs will be shown horizontally without borders around the content.
  • Tab Icon Select where the icon will be placed on the tab. You can choose from the following: Icon beside the title, Just above the title, Just icons.
  • Tab Color This option is used to select the color of the module.
  • Tab Appearance These options provide the ability to toggle various effects for the tab buttons and content area.
    • Rounded Toggles whether the corners of the module's content will be rounded.
    • Gradient Toggles whether the module will have a gradient effect applied to it.
    • Glossy Toggles whether the content area will have a gloss overlay effect applied to it.
    • Embossed Toggles whether the module will have an emboss effect applied to the edges.
    • Shadow Toggles whether the module will have a shadow effect applied to it.

Testimonials

The Testimonials module is used to showcase testimonials in a slider layout type.

To use the Testimonials module:

  • Enter Module Title
  • Testimonial Layout - Select to have the image at the top, bottom, or encased in a bubble

Testimonial module

  • Module Title This option is used to add the title of your module.
  • Type Select either a Slider or Grid testimonial type.
  • Layout Select to have the image at the top, bottom, or encased in a bubble
  • Image Width This option is used to set the width of the testimonial.
  • Image Height This option is used to set the height of the video player.
  • Text Editor You can use the WYSIWYG editor to add any content required to be shown in the module.
  • Person Picture Input the image of the person you are quoting for the testimonial.
  • Person Name Input the name of the person you are quoting for the testimonial.
  • Person Position Input the position/title of the person.
  • Company Input the company where the person works.
  • Company Website Input the company site where the person works.
  • Add New Used to add a new testimonial to your testimonials.
  • Slider Options A list of various options available to customize the behavior of the slider.
    • Visible Slides Set the number of slides you would like visible at once.
    • Mobile Visible Set the number of testimonial slides you would like visible at once on mobile.
    • Auto Scroll Enable or disable an auto scroll of your testimonials and set how long before each slide will automatically scroll.
    • Scroll Sets number of slides to scroll at a time.
    • Speed Sets speed of transition effect.
    • Effect Sets the transition effect used.
    • Pause On Hover Select if you'd like to pause the slider on hover.
    • Wrap Sets whether the slides will repeat from the beginning when scrolled through.
    • Pagination Sets whether to display the slider page navigation buttons.
    • Slider Arrows Sets whether to display the slider arrow navigation buttons.
    • Left Margin Space Sets how much of a margin to add to the left side of individual slides.
    • Right Margin Space Sets how much of a margin to add to the right side of individual slides.
    • Height Set to "Auto" measures the highest slide and all other slides will be set to the same size. Or "Variable" makes every slide have its own height.

Text

The Text module is used to add a text area to the page. You can use the visual editor to enter any rich format text including images, videos, links, heading, etc. Shortcodes are supported with the Text module, therefore, you can insert any shortcode as you do on a post/page content.

This is Text module screenshot image

  • Module Title This option is used to add the title of your module.
  • Editor You can use the WYSIWYG editor to add any content required to be shown in the module.

Video

The Video module is used to show a video embed (YouTube, Vimeo, etc.).

This is Video module screenshot image

  • Module Title This option is used to add the title of your module.
  • Video Layout This option is used to set the layout of the video and any title and caption.
    • Option 1 The title/caption will be shown below the video.
    • Option 2 The title/caption will be shown to the right of the video.
    • Option 3 The title/caption will be shown to the left of the video.
    • Option 4 The title/caption will be shown as an overlay on top of the video.
  • Video URL This option is used to set the video URL to use for the module.
  • Autoplay Toggle to enable or disable your video to be autoplayed.
  • Mute Toggle to enable or disable your video to be muted.
  • Overlay Image Toggle to enable or disable an image overlay.
  • Video Width This option is used to set the width of the video player.
  • Video Title This option is used to set the title of the video.
  • Video Title Link This option is used to set the URL that is linked to the title.
  • Video Caption This option is used to set a caption for the video.

Widget

The Widget module allows you to add a widget.

This is Widget module screenshot image

  • Module Title This option is used to add the title of your module.
  • Select Widget This option is used to select the desired widget from the list of all the available widgets.

Widgetized

The Widgetized module is used to add a widgetized area (widgetized areas also often refer to sidebars, widget area/region).

This is Widgetized module screenshot image

  • Module Title This option is used to add the title of your module.
  • Widgetized Area This option is used to select the desired widget area from the list of all the available widget areas of your site.

Read More

Translating Builder Content with WPML

Getting Started

To follow along with this tutorial, make sure that you install and activate the WPML core plugins which include WPML Multilingual CMS, WPML String Translation, and WPML Media.

Check out WPML’s getting started guide to learn how to set up and configure WPML on your site.

Translating Pages

As of WPML 4.5, WPML has two translation modes:

      1. Translate Everything
      2. Translate Some

The Translate Everything mode will automatically translate your main site’s content as you publish or update it. You can then review these translations on the front-end and make any changes if needed. This mode lets you have the same design shared across the different language versions of a specific page.

The Translate Some mode lets you pick and choose who you would like to translate your site (such as professional translation services), what content gets translated, and when. It also allows you to have different designs and content for your secondary language(s) pages.

It is worth mentioning the pages that you create using Themify Builder are fully translatable using WPML along with pages that you create using the WordPress default editor (Gutenberg).

Translating the Page Content Only

If you’re using WPML’s Translate Everything mode, the plugin will take care of all of your translations automatically.

If you’re using WPML’s Translate Some mode, you can choose to
translate the pages and posts content yourself, assign the translation job to one of your users that you have assigned as translators, or send the content to be translated by a professional translation service.

To manage the translation of your site you can use WPML’s Translation Management. Simply navigate to the WPML -> Translation Management page to send content for translation. The first time you visit the Translation Management page, WPML will walk you through a quick setup wizard where you choose who will translate your site and choose your preferred translation editor.

Translation Management

To translate the post or page content yourself, follow these steps:

Navigate to the posts or pages listing page and click the plus icon under the language you want to translate your page into.

Pages

You can also translate the page by clicking the plus icon in the language meta-box on the post or page editing screen.

About Page Editor

On the advanced translation editor page, click the Translate automatically button to add the machine translation. Review the translation to make sure that it is human-readable then click the green checkmark button to save the translation. Finally, click on the Finish button then Complete to publish the translated page.

Advanced Translation Editor

Naturally, you can translate posts and portfolio items in a similar fashion.

This is how the translated page looks like on the front-end.

Lawyer Page Layout

Translating Pages to Have Different Designs

We highly recommend using WPML Translation Editors as they keep track of the contents of different languages and make translation easier. Yet, If you want your translated page to have a different design, you follow the steps below:

  1. Open the page editing screen. In the Language box, turn off WPML’s Translation Editor.

    Language Sidebar

  2. In the Use the WordPress Editor to translate pop-up window that appears, select This page option and click the Apply button.

    About Translation

  3. In the language meta-box, click tick the Duplicate check-box corresponding to the language you want to translate your page into then click the Duplicate button.

    Language Duplicate

  4. Click the pencil icon to edit the secondary language page.

    Language Sidebar Edit

  5. Click the “Translate Independently” button in the language meta-box.

    Translate Independently

  6. Now, edit the page design and translate the content. Of course, you are free to add, remove, or edit any design or textual element on the page. In this example, we added a new section to the page. Once done, click the Update button.

    Page Update

Translating Categories and Tags

If you’re using WPML’s Translate Everything mode, this will be taken care of automatically. If you’re using the Translate Some mode, follow the guidance below:

You can translate categories and tags assigned to a specific post or portfolio pages while translating them using the WPML translation editor screen.

Furthermore, you can translate categories and tags on the WPML -> Taxonomy Translation page. In the example below, we walk you through the process of translating portfolio categories. You can follow the same steps to translate post categories and tags.

  1. Select the Portfolio Categories from the drop-down menu and a list of categories will appear.
  2. Click the plus icon for translating a category of the respective language.

    Taxonomy Translation

  3. Fill in the translation and click the Save

    Term Translation

Translating Texts from Themify Themes, Plugins, and Other Places

Besides contents coming from posts and pages on your site, there are usually some texts coming from other places. The most common examples are themes and plugins. To learn how to translate these texts, visit WPML’s documentation page about translating strings.

In this example, we will translate the footer copyright text. You can follow these same steps to translate any text listed in the theme options.

  1. To edit the footer copyright text in the default language, navigate to Themify Ultra -> Themify Settings then click the Theme Settings menu item. Expand the Footer Text section and edit the text in the Footer Text One field then click the Save button.

    Themify Settings

  2. Navigate to WPML -> String Translation and choose Themify text-domain from the Select strings within domain drop-down list. Search for the copyright text. Click on the translations link and add your translated text. Then check the Translation is complete box and click the Save button.

    String Translation

Translating Menus

With WPML, you can easily synchronize your language menus. For more information, check out WPML’s guide on translating menus.

Getting Help

In case you need help translating your site built using Ultra theme, Themify Builder and WPML, visit WPML’s support forum.

Read More

Fix Theme/Plugin Crash

Sometimes theme/plugin installation and updates might crash the whole WordPres site due to issues with conflicts, incomplete updates and WordPress core. If you can't login to WordPress admin after a theme/plugin installation or update, follow this tutorial to fix it.

Can you access wp-admin?

  • First check if you can access wp-admin. If you can access wp-admin, then you can use the WordPress theme/plugin installer to restore the conflicting theme/plugins.
  • To reinstall the conflicting theme/plugins, you basically need to re-install the theme/plugin zip (it is the same procedure as installing a new theme/plugin - upload the theme/plugin zip and replace it).

To restore a theme crash

  • If the issue is a theme crash/conflict and you can't access wp-admin, you would need to connect to your server using a FTP software.
  • From the root folder where you installed WordPress, go to 'wp-content > themes' folder.
  • Rename the activated theme folder to something else. Example: if you see critical error message related to Themify Ultra theme, then you would rename 'themify-ultra' folder to something else such as 'themify-ultra-crash'. When the activated theme folder is renamed, WordPress will deactivate the theme.
  • Now check if you can login to wp-admin. If you can login to wp-admin, then go to "Appearance > Themes > Add new" and upload the theme zip to reinstall it (if you are using a Themify premium theme, you can download the latest theme ZIP version from the Member Area).
  • NOTES: After you rename the activated theme, but the errors remain and you can't access wp-admin, the issue might not be related to the theme. The issue could be the plugin(s) or WordPress core. Or your server might be caching the files on the FTP server (purge the server side cache or contact your host provider if you have server cache that you can not purge).
  • After you resintall the theme and the site is fine, you can delete the renamed theme folder on the FTP server (don't keep the unused theme folder on the server).

To restore a plugin crash

  • If the issue is related to a plugin (eg. you see critical error messages related to a certain plugin) and you can't access to wp-admin, you would need to connect to your server using a FTP software.
  • From the root folder where you installed WordPress, go to 'wp-content > plugins' folder.
  • Rename the conflicting plugin folder to something else. Example: if the issue is the Themify Builder plugin, then you would rename the 'themify-builder' folder to 'themify-builder-crash'. WordPress should deactivate the plugin once its folder has been renamed.
  • Now check if you can login to wp-admin. If you can login to wp-admin, then go to "Plugins > Add new" and then reinstall the pluign using the latest plugin zip.

Not sure what is crashing the site?

  • If you are not sure what is crashing the site, try the following steps:
    • Connect to your server using a FTP software. Go to "wp-content > themes" folder, rename the current activated theme folder to something else and check wp-admin. If you can access wp-admin after renaming the activated theme folder, then reinstall the theme.
    • After renaming the theme folder and still can't access wp-admin, then revert the theme folder rename. Go to "wp-content" folder, then rename the "plugins" folder to something else. This should deactivate all plugins. Then try to access wp-admin. If you login to wp-admin, then go to Plugins admin page and activate the plugins one by one to find which one is crashing the site. After you find the conflicting plugin, you just need to reinstall that plugin and re-activate the plugins you had before.
    • After renaming the activated theme folder and plugins folder, but still can't wp-admin, then the issue could be WordPress core. Try to reinstall WordPress core: download it from wordpress.org, extract the WordPress zip, replace all files and sub-folders except the "wp-content" folder on your FTP server (the "wp-content" folder is where it stores the themes, plugins, and your uploaded content).
  • After you've tried all steps above and still can't access your site or wp-admin, the issue might be server related issues. Contact your host provider for assistance.

Read More

Coding Builder Modules

This tutorial will show you how to code your own custom addons/modules for Themify Builder.

Let's Get Started

Each module in the Builder consists of three files, a module-*.php file (only registers the module to Builder), and a template-*.php file (handles the display of the module), and a JavaScript file that does most everything else: controls the options displayed when editing the module, how data is saved for the module, renders the live preview, etc. For the default modules in Builder, the module PHP files are located in themify-builder/modules directory inside the Builder, the template files can be found in the themify-builder/templates and the JS files can be found in themify-builder/js/editor/modules folder.

We can add new modules via a plugin, or include them in the theme.

Example 1: Hello World module

Let's start by creating a simple module that displays a Hello World message. First under wp-content/plugins/ directory of your WordPress installation create a new folder (you can name this folder anything that you would like). This folder will hold all of the files required for the module. Inside that folder create a file named "init.php" and paste this inside:


<?php
/*
Plugin Name:  Hello World
Version:      2.0
Author:       Themify
Description:  Sample Builder module to greet the world!
*/

defined( 'ABSPATH' ) or die;

This is all that is needed for WordPress to identify the plugin, now if you head over to the Plugins manager in admin dashboard, you can activate it.

Now let's add the codes to load our module PHP file:


function hello_world_register_module() {
    Themify_Builder_Model::add_module( plugin_dir_path( __FILE__ ) . 'modules/module-hello-world.php' );
}
add_action( 'themify_builder_setup_modules', 'hello_world_register_module' );

This tells the Builder that when needed, load the modules/module-helloworld.php file inside the plugin. So let's create "module-hello-world.php" file inside the modules folder:

<?php

class TB_HelloWorld_Module extends Themify_Builder_Component_Module {

    public static function get_module_name():string{
        add_filter( 'themify_builder_active_vars', [ __CLASS__, 'builder_active_enqueue' ] );
        return __( 'Hello World', 'hello-world' );
    }
    public static function builder_active_enqueue( array $vars ):array {
        $url = plugin_dir_url( dirname( __FILE__ ) ) . 'assets/active.js';
        $version = '1.0';
        $vars['addons'][ $url ] = $version;

        return $vars;
    }
}

Note the "TB_" prefix and "_Module" suffix for our module's classname. This is the naming convention that you must follow in order for Builder to recognize the module. The "get_module_name" method returns the name of the module (this shows up in the editor interface), but also adds a filter to load an script file named "active.js" when Builder is active. As mentioned, this JavaScript file is where the module is actually defined. So next step, let's create that file:


((api,createElement,themifyBuilder ) => {
    'use strict';
    api.ModuleHelloWorld = class extends api.Module {

        constructor(fields) {
            super(fields);
        }

        static getOptions() {
            return [];
        }

        static default(){
            return {};
        }

        static builderSave(settings){
            super.builderSave(settings);
        }
    };
})(tb_app,tb_createElement,themifyBuilder);

The script creates a class named "ModuleHelloWorld" that extends "tb_app.Module". Note the "Module" prefix for the module name, this is required. The getOptions() method returns an array of options to show when you're editing the module, the "default()" method return an object of option_name : option_value pairs that define the default values those options will have, and the builderSave() method which is called when the module is saved, this can be useful if you want to validate or cleanup the module data before saving.

Now our module is ready. You can open the Builder editor and add this to your page:

module-title-option

So what does the module display on the front end? At the moment, nothing. We haven't add the template file for the module that will actually render it, to do that create "template-hello-world.php" file inside the /templates folder and paste this in:

	<h1> Hello World! </h1>

Viola! Now if add the module to a page and view that page on front end, you can see the output:

hello-world

Showing the same HTML snippet each time we add the module might be what we need, however often you want to add options to the module that dynamically changes it's output, so let's change the getOptions method to show an option where we can change who we want to say hello to:


static getOptions() {
    return [
        {
            id : 'say_hello',
            type : 'text',
            label : 'Hello Text'
        }
    ];
}

In the module's template file the options are accessible using the $args['mod_settings'] array, every key of this array is an option saved for the module, so now change the template file:


<?php
$say_hello = isset( $args['mod_settings']['say_hello'] ) ? $args['mod_settings']['say_hello'] : '';
?>
<div class="module module-<?php echo $args['mod_name']; ?>">
    <h1> Hello <?php echo $say_hello; ?>! </h1>
</div>

Congratulations, you just made your first Builder module. You can download the complete code here.

Example 2: Quotes module

Now let's dig deeper and create a more practical module. Let's say our client runs a heavy-content website and regularly posts quotes, so to pimp up the pages let's design a quote style module that our client can use:

Custom Quotes module sample

The quote style consists of an image, the quote text itself and the name of it's author. The only problem is this requires a specific bit of HTML to make. Handing a txt file to the client to copy and paste, then change the bits and pieces is not very practical. An option is to create a shortcode that outputs the quote, however shortcodes are not user friendly either. Your client will have to remember the exact shortcode and parameters used to replicate the same output.

First step like our Hello World module, create a directory inside the wp-content/plugins/ folder, add an init.php file inside it and paste this in:

<?php
/*
Plugin Name:  Custom Quotes
Plugin URI:   https://themify.me/
Version:      2.0
Author:       Themify
Description:  Custom Quotes
*/

defined( 'ABSPATH' ) or die( '-1' );

function custom_quotes_register_module() {
	Themify_Builder_Model::add_module( plugin_dir_path( __FILE__ ) . 'modules/module-quotes.php' );
}
add_action( 'themify_builder_setup_modules', 'custom_quotes_register_module' );

Same as before, we just point Builder to the file where the module PHP is registered. Now activate the plugin in the Plugins manager.

Next create "module-quotes.php" file inside the the /modules folder and paste this in:

<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
class TB_Quotes_Module extends Themify_Builder_Component_Module {

    public static function get_module_name():string {
        add_filter( 'themify_builder_active_vars', [ __CLASS__, 'builder_active_enqueue' ] );
        return __( 'Quote', 'custom-quotes' );
    }

    public static function get_module_icon():string {
        return 'quote-right';
    }

    public static function get_js_css():array {
        return array(
            'css' => plugin_dir_url( dirname( __FILE__ ) ) . 'assets/style.css'
        );
    }

    public static function builder_active_enqueue( array $vars ):array {
        $url = plugin_dir_url( dirname( __FILE__ ) ) . 'assets/active.js';
        $version = '1.0';
        $vars['addons'][ $url ] = $version;

        return $vars;
    }
}

The get_js_css() method n module returns an array which defines what files to load when the module is used on the page. In our case, we only need an stylesheet for customizing the design of the quote, so the method returns the path to an style.css file. Also the get_module_icon() is used to display an icon (from Themify icon set) for this module.
Next, create a folder named "assets" inside the plugin and add the "active.js" file in it:


((api,createElement,themifyBuilder ) => {
    'use strict';
    api.ModuleQuotes = class extends api.Module {

        constructor(fields) {
            super(fields);
        }

        static getOptions() {
            return [
                {
                    id : 'quote_text',
                    type : 'textarea',
                    label : 'Text'
                },
                {
                    id : 'quote_image',
                    type : 'image',
                    label : 'Image'
                },
                {
                    id : 'quote_author',
                    type : 'text',
                    label : 'Quote Author'
                },
                {
                    id : 'quote_link',
                    type : 'url',
                    label : 'Link'
                },
                {
                    type : 'custom_css_id'
                }
            ];
        }

        static default() {
            return {};
        }

        static builderSave(settings){
            super.builderSave(settings);
        }
    };
})(tb_app,tb_createElement,themifyBuilder);

Here we add four options in the module, three text options to put the quote text, the name of its author, and the link to the quote author's website, and an option to put the image. Now when you add the module you can see the options:

Perfect! Now for the module's template, create "template-quotes.php" in the /templates folder and add:

<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
/**
 * Template Quotes
 * 
 * Access original fields: $args['mod_settings']
 */

$fields_default = array(
	'quote_text' => '',
	'quote_image' => '',
	'quote_author' => '',
	'quote_link' => '',
	'animation_effect' => ''
);

$fields_args = wp_parse_args( $args['mod_settings'], $fields_default );
unset( $args['mod_settings'] );

$container_class = apply_filters( 'themify_builder_module_classes', array(
		'module', 'module-' . $args['mod_name'], $args['module_ID'], self::parse_animation_effect( $fields_args['animation_effect'] )
	), $args['mod_name'], $args['module_ID'], $fields_args );
if ( ! empty( $args['element_id'] ) ) {
	$container_class[] = 'tb_' . $args['element_id'];
}
if ( ! empty( $fields_args['global_styles'] ) && Themify_Builder::$frontedit_active === false ) {
	$container_class[] = $fields_args['global_styles'];
}
$container_props = apply_filters( 'themify_builder_module_container_props', array(
	'id' => $args['module_ID'],
	'class' => implode(' ', $container_class),
), $fields_args, $args['mod_name'], $args['module_ID'] );
?>

<div <?php echo self::get_element_attributes( $container_props, $fields_args ); ?>>
	<?php $container_props=$container_class=null;?>
	<?php do_action( 'themify_builder_before_template_content_render' ); ?>
	<div class="quote-wrap">

		<?php if( '' !== $fields_args['quote_image'] ) : ?>
			<img class="quote-image" src="<?php echo esc_url( $fields_args['quote_image'] ); ?>" alt="<?php echo $fields_args['quote_author']; ?>" />
		<?php endif; ?>

		<div class="quote-content">

			<div class="quote-text">
				<span><?php echo $fields_args['quote_text']; ?></span>
			</div>

			<div class="quote-author">
				<?php if ( '' ===$fields_args['quote_link']  ) : ?>
					<span><?php echo $fields_args['quote_author']; ?></span>
				<?php else : ?>
					<a href="<?php echo $fields_args['quote_link']; ?>"><span><?php echo $fields_args['quote_author']; ?></span></a>
				<?php endif; ?>
			</div>

		</div>

	</div>

	<?php do_action( 'themify_builder_after_template_content_render' ); ?>
</div><!-- .module-<?php echo $args['mod_name']; ?> -->

The snippet is pretty straight forward, we just check if some options in the module are set and if so output the proper markup.

NOTE: To set the default options for the module we use wp_parse_args function and pass it two things: $args['mod_settings'] array that holds the saved settings of the module, and an array of defaults, this way we'll have a default value. Also the extract function is used to turn each of the options into a separate variable, this makes working with them easier.
The rest of the code is just spitting out the proper markup we need to show the quote.

Last step is to add the CSS codes that style the quote, if you recall in TB_Quotes_Module class we used the get_js_css() to set a path for an stylesheet, so in the "assets" folder create a file named "style.css" add the CSS codes. You can get that from the this link.
You can download the finished plugin here which includes an alternative layout for quotes, and also sets up the Styling options for the module.

Field Types

The Builder has a variety of field types you can use to create the options for the modules, the table below lists some of available field types:

Type Description * Repeatable?
text General text box to input texts. You can set the "colorpicker" parameter to true to turn the text box into a color picker field. Yes
icon Icon picker, user can choose from the icons included in the Builder. For an example of this check the Feature module. Yes
image Image uploader, user can upload images or select one from the Media Library. Yes
textarea Multi-line text input. Yes
wp_editor Shows the TinyMCE editor to input formatted texts. Yes
radio Multiple choice option where only one can be chosen. Yes
checkbox Multiple choice option where none or any number of the choices can be chosen. Yes
builder "builder" field can be used to create repeatable rows of data (for example Accordion and Tabs modules use this feature), field types that in this table are highlighted as Repeatble can be used in the "builder" field type.

* whether the field type is repeatable and can be used in "builder" fields.

Override module templates in themes

The built-in Builder modules are also customizable, where you can change the look using the options provided by the module. However sometimes you need to change how the modules structure its output, and in such cases overriding the template files of the modules comes very handy. To achieve this first navigate to <theme_root>/themify/themify-builder/templates/ directory, here you can find the template files used by various modules. Now copy the template file for the module you want to change and paste it in <child_theme_root>/themify-builder/ directory and customize it.

Read More