wordpress

How to Synchronize WordPress Live and Development Databases

Posted on by Mario

How-to-Synchronize-WordPress-Live-and-Development-Databases

As a web developer, using real content is considerably easier when developing WordPress themes. However, in the process you will encounter some unexpected situations, especially when adding pages, posts, media and comments. Hence, the only way to improve your workflow is by automatically synchronizing your content.

Synchronization Snags

You may think that database replication can be more challenging than you expect. But, you can learn from several reasons why few coders can survive in this dreamland.

Data Differences

There are various configuration settings in WordPress database. Some of them are the domain name and paths which are used throughout posts and asset references. To avoid any undesired consequences, do not import this information into a local database. Even though, the image and link URLs seems like working but it could take you back to the live server. To add to the complications, WordPress serializes some data. It can be difficult to parse and change those values.

Multiple Installations

If you are working alone on a local installation and uploading to a single live server, synchronization becomes less necessary and complicated compare to working with teams with multiple developers, staging servers, or more than one production server.

Databases can be Large

You’re unlikely to want or need numerous megabytes of post data, even if fast incremental synchronization were implemented.

It’s Not Just Databases

In the local file system, WordPress stores uploaded images and other media. Those need to be downloaded and the database references must be updated accordingly. Besides, you also need to make sure that theme and plugin files are synchronized, enabled, and configured appropriately. This will help avoiding certain plugins, e.g. multi-site, caching, etc enabled.

Is Synchronization Possible?

It will be difficult to find one option that can fit to all sizes as it will depend on your circumstances. For instance, you may want one-way replication from live to development servers. However, you can choose one among so many options below:

WP Migrate DB Pro

Many people find that the WP Migrate Pro WordPress plugin is the best-known and easiest choice from Delicious Brains. It is available in a free edition.

WP Sync DB

WP Sync DB is an open-source fork of WP Migrate DB.

VersionPress

VersionPress is able to manage database merging. It is a Git-based version control plugin for WordPress. This product seems promising even though it is in development process.

WPSiteSync for Content

WPSiteSync permits real-time synchronization of pages, posts and other data. It is also offering free and commercial editions.

Database Sync

Even though, Database Sync is not compatible with multi-site installations but it may be enough for some developers.

WordPress Importer

WordPress Importer is suitable for those who prefer a safer, more manual process, exports posts, pages, comments, categories, tags, authors and other data to an XML file that can be imported into another installation.

SyncDB

SyncDB is a bash script. It synchronizes local and remote WordPress databases.

WP Staging

The WordPress WP Staging plugin can clone data and files from live to development or staging servers.

WordPress GitHub Sync

The WordPress GitHub Sync plugin allows you to synchronize content allows you synchronize content from a GitHub repository or Jekyll-created website.

Experience a New Way to Design WordPress Visually with Elementor Page Builder

Posted on by Mario

elementor-page-builder

As a web designer, you will notice that the main differentiator between Elementor and other page builder is template library. This template enables you to work faster and more efficient. So, here are two unique benefits that these features mainly hold:

The Ability to Save Your Collection of Designs
Most of the time, you will see that the work of creating websites usually includes some repeating tasks. This is because a website designer somehow will need to reuse some elements in her previous design.

But don’t worry as with Elementor’s template library, now designers can save any page or section they create. Besides, they can reuse the previous design with a click of button on the same site or any other site.  Furthermore, they can customize the color, typography and design to give it unique touch after adding the saved template.

Using Predesigned Templates
You can also find a set of beautifully predesigned templates and UI kits. These templates will help inspiring a new design as it covers a wide range of subjects. They are architecture, restaurants, fitness and more, and also include different pages: landing pages, homepages, services, contact and about. In fact, the amount of templates will keep increasing in the future, so you will never be lack of ideas.

In addition, you can also experience many interesting features. As the team at Elementor recently released the Pro version of Elementor, such as follows:

  1. Live Forms – The first ever frontend form builder that lets you create any form right on the live editor.
  2. Posts & portfolio – These two handy widgets let you display your posts and works in the most beautiful and diverse ways.
  3. Slides – A speedy, easy to use slider widget that helps you create rotating slides much easier.
  4. Global widget – An advanced feature that lets you place widgets on multiple areas across your site. Change it once, and it instantly updates in all areas.
  5. Embed anywhere – With this feature you can embed Elementor inside sidebars, footers, posts, using the WordPress widget area, the Customizer or shortcodes.
  6. Custom CSS – This feature lets you add custom CSS to sections, columns and widgets, and see it render live.

A trick to Speed Up your Google Fonts in WordPress

Posted on by Mario

a-trick-to-speed-up-your-google-fonts-in-wordpress

As web developers, you should remember for not to ignore each small portion of the overall web page. Since those small things can produce faster load times, if you can optimize them better. Web fonts is one of the good examples, even though images are still the main thing to consider. So, in today’s article, we will reveal a method for optimizing and speeding up Google Fonts in WordPress for faster web experience.
What are Google Fonts?
Google fonts is an open source (free) directory which over 800 web font families that you can download and use it on your website. You can also download locally for print and other uses. There are many great free way to enhance the look and usability of your site in Google Fonts. No wonder that there are millions of WordPress websites utilize Google Fonts nowadays.

A good web font will give the effect of professionalism and aesthetic. However, system fonts will always win when it comes to pure performance. In fact, typography has been shown to affect conversions in a positive way. Besides, it is important to understand how Google Fonts will affect speed and performance of WordPress site.

How to Use Google Fonts in WordPress

There are two opts to add Google Fonts to your WordPress site. The first way is to grab them directly from Google. This method uses their global CDN to deliver the fonts quickly from different servers from around the globe.

  • First Method

When you add them to your site there will be an external request to fonts.googleapis.com.

google api

  • Second Method

There are also external requests to fonts.gstatic.com for the WOFF or WOFF2 versions depending upon browser support.

blog2

Host Google Fonts Locally

There are many ways that you can use to speed up your Google Fonts in WordPress. For example you may add embed code from Google fonts, host Google fonts on your own CDN, and Host Google fonts locally. But today, we are going to give brief explanation on how to host Google fonts locally on your web server.

Google-webfonts-helper is a great choice to host locally, in fact, it is a free tool. By using this tool, you can download the Google fonts locally more easily and gives you all of the CSS.

Google Fonts locally is usually suitable for audience which is in a certain geographical location and close to server. Google Fonts CDN is great; however adding those additional external requests and DNS lookups can cause delays. It implies that the method will work great if you are using fast hosting such as manages WordPress hosting from Kinsta. Below is an example on how to install Google Fonts locally.

/* roboto-regular – latin */
@font-face {
font-family: ‘Roboto’;

font-style: normal;

font-weight: 400;

src: local(‘Roboto’), local(‘Roboto-Regular’),

url(‘https:/perfmatters.io/fonts/roboto-v15-latin-regular.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */

url(‘https://perfmatters.io/fonts/roboto-v15-latin-regular.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 – latin */

@font-face {

font-family: ‘Roboto’;font-style: normal;

font-weight: 500;

src: local(‘Roboto Medium’), local(‘Roboto-Medium’),

url(‘https://perfmatters.io/fonts/roboto-v15-latin-500.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */

url(‘https://perfmatters.io/fonts/roboto-v15-latin-500.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

}

/* roboto-700 – latin */
@font-face {
font-family: ‘Roboto’;

font-style: normal;

font-weight: 700;

src: local(‘Roboto Bold’), local(‘Roboto-Bold’),

url(‘https:/perfmatters.io/fonts/roboto-v15-latin-700.woff2’) format(‘woff2’), /* Chrome 26+,
Opera 23+, Firefox 39+ */

url(‘https://perfmatters.io/fonts/roboto-v15-latin-700.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

}