Blog

There are many reasons why you might want to switch themes: You want a different look, you need a new feature, or you’re just bored of your current theme. It is not that difficult to change a WordPress theme. The process is fairly simple and this article will help you do it the right way.

Changing WordPress Theme Steps:

It’s important to perform a website backup before making any changes to your site. This will allow you to revert back to the original settings if something goes wrong.

After making the backup, the first thing you should do is search for the perfect WordPress theme for your website.

Check out our premium WordPress Themes:

Noor – Minimal Multi-Purpose WordPress Theme, AMP & RTL
Okab – Responsive Multi-Purpose WordPress Theme + RTL

Step 1: Installing WordPress Theme:

Once you choose the perfect theme, download it to your computer.
Now, login to your WordPress dashboard and navigate to Appearance > Themes > Add New Theme

Click on Upload Theme File. Select the file that you downloaded earlier and click Install Now.

Step 2: Preview The New Theme:

One of the best things about WordPress is that you can preview a theme before activating it. This makes it easy to see if the theme is what you want without having to activate it.

You can preview the themes in the WordPress admin area for your website. To preview a theme, click on Live Preview below the installation instruction or by going back into “Appearance” and then “Themes.” You will see a list of all the themes that are currently installed on your site. Hover over your theme and click on the Live Preview.

You will be redirected to a live preview screen with the customizer option so you can make the necessary changes before publishing.

Step 3: Activate The Theme:

When you are finished customizing your theme preview, click the Activate & Publish button. This will publish the preview to your WordPress site and make it active.

And that’s it! Now you learned how to change a WordPress theme.

Wrapping up

The process of changing your WordPress theme is simple and doing it the right way helps ensure that your site functions just as well with your new theme as it did with your old theme.

The contact form is one of the most important tools for any website. It helps to establish a connection with your visitor, get feedback and sales leads, and to keep in touch with your customers. It is also an important tool for any SEO campaign because it can help you build credibility.

Today, there are many WordPress plugins for form builders available on the market. JetFormBuilder offers one of the easiest ways to create a contact form in WordPress without touching any code at all using the Gutenberg Editor. The plugin creates a custom form that you can easily edit according to your needs.

In this tutorial, we will use the Noor theme and you can see the result on our Contact Page.

Why JetFormBuilder?

JetFormBuilder is a WordPress plugin that can give you all that you need to create any form starting from the contact pages to registration forms, subscription, appointment, and booking. It also has an easy-to-use drag and drop interface which makes it possible for anyone to build their form with no coding skills at all.

Moreover, It comes with pre-built forms and integrations with popular plugins like MailChimp, MailPoet, ConvertKit, and HubSpot which make it easy for you to send your leads directly into your marketing automation platform of choice.

Here are more features with more detail:

19 Form Field Blocks

Using Guttenberg you will get all the fields below:

Select, Radio, Checkboxes, Text, Textarea, Hidden, Calculated, Number, Date, DateTime, Time, Media, WYSIWYG, Range, Heading, Repeater, Group break, Form break, Submit, and Advanced Color Picker.

Smart Features:

Jetformbuilder will let you create smart online forms that react to User choices and personalize the form experience using Conditional Fields which means you can show, hide, enable, disable, or make Fields required/optional.

Calculated Content & Hidden Fields:

With these features, you can build calculator forms that perform basic and complex calculations.

Multi-Step Forms:

Multi-Step gives you the ability to break the form fields into logical steps to make them easy to digest and save the webpage space.

• Repeater Form Field
• Form Fields

JetFormBuilder PRO Addons:

As I said before JetFormBuilder comes with the free version and the Pro version with 16 Addons.

Install JetFormBuilder:

JetFormBuilder plugin is completely free, and you can easily download and install it on your website. First thing you need to visit the Plugins » Add New page inside your WordPress admin area.

Find the plugin by typing the plugin name, after that, click install and active the plugin.

here is a detailed tutorial that will help you go through the installation process, by the Jetformbuilder team.

How to Create a Form?

1- Add a new form

Go to your WordPress dashboard and go to JetFormBuilder > Add New.

It will open the Gutenberg page editing window. There is a text area to enter that form’s title and three fields: the Hidden field with post ID, text field, and the “Submit” button field will be added by default.

2- Add the Contact form fields

You can add your form from scratch or by adding JetForm patterns I’ll explain how to do this step by step.

– First, remove the default field.

– Click the “Add block” button with a plus-shaped icon in the left upper corner of the window and click patterns in the right upper corner below the search input.

– Select JetForm in the secluded input.

– Choose the form you want to use, for me I added the “Contact Us Form”.

3- Deal with the Form Settings

When you create a form you will have settings for each block and settings for the whole form.

• Fields Layout. Here you can choose the position of the label. If you select the Column option, the label will be placed over the field and if you choose the Row option – it will be positioned in the same row with the field;
• Required Mark. You can choose the symbol that will be placed near the label if the field is matched as “required”;
• Submit Type. In this drop-down menu, you can choose how the page will react to the form submission. Page Reload means that the page will be reloaded when the user hits the “Submit” button, while the AJAX option doesn’t reload the page.

4- Add Captcha Settings

To put a captcha on your form, unfold the Captcha Settings section and enable the Enable reCAPTCHA v3 form verification toggle. Enter Site Key & Secret Key details to continue.

If you don’t have a Site Key and a Secret Key for your domain, make sure you follow the link. Enter your site’s name in the Label field, pick reCAPTCHA v3 in the reCAPTCHA type field, and type your domain name into the Domains text area.

Once you click “submit,” you’ll be redirected to a page with the keys. Copy the keys into the corresponding fields of Captcha Settings.

5- Set Post Submit Actions ( Send Email )

When the user hits the “Submit” button, this action sends an email to some address you choose in the settings. To do the customization, click the “Edit Action” button with a pencil-shaped icon on it. This will open a settings window.

6- Go through the general messages settings

The last section allows you to set the messages that the user will see in different situations. You can type in any message that you think will be understandable to the user.

Conclusion 

I hope you have enjoyed this tutorial and learned how to create a non-spam form using the JetFormBuilder plugin and Gutenberg Editor. In conclusion, JetFormBuilder is a great way to create your contact forms, surveys, or bookings. They can be used in any niche and for any purpose.

Sources:

Crocoblock : JetFormBuilder: How to Create a Form?

Jetformbuilder : Jetformbuilder Documntation

Today I’ll show you how to start a Local WordPress Development on your machine for free, In the end, we will be appel to test any theme or plugin or start your website locally and with one click you can make it online.

For a zillion years, I used XAMPP after that I moved to MAMP PRO before I switched all my local WordPress development over to Local by Flywheel. it’s really good It does everything you want it to.

What’s Local by Flywheel

In brief, it’s A development tool for WordPress sites, it let you create a local WordPress website.

Some of Local by Flywheel’s key features include:

• Running Multiple WordPress Installs: Local by Flywheel spins up a local site for you with all the dependencies that WordPress needs
• Awesome UI
• Support HTTPS (SSL)
• Secure Shell (SSH) access
• Live Link: making it possible to show your site to select people

How to get started with Local by Flywheel (in 2 Steps)

Step 1: Install Local by Flywheel

To download Local by Flywheel, visit the website and select the Free Download button. Next, choose your platform, and enter some basic information (only the email field is mandatory):

Your download should start right away. Give it a few moments, and then run the installer file. You’ll then be taken to a start-up screen, where you simply need to select the Let’s Go! button:

This will install a few programs that are required for Local by Flywheel to work properly. The installation may take a few minutes to complete. If you receive any prompts during the process, make sure to hit Yes to permit the installer to do its job.

After, you’ll be taken straight to your new Local by Flywheel dashboard:

Step 2: Create your local WordPress site

Next up, let’s create a brand-new local WordPress website. To do so, select Create a New Site in your Local by Flywheel dashboard or just click the + button on the left-hand bottom corner. This will take you to a simple setup wizard, where the first step is to create a name for your site.

You may want to make this something descriptive, especially if you plan to create multiple local sites. You can always change the name of your site later on.

In addition, you can expand the Advanced Options tab to configure a few optional settings if you’d like:

Here you can set a domain and path for your local site, and choose whether to create it using a Blueprint. This last option is a handy time-saving Flywheel feature that lets you set up a site using a predetermined set of themes and plugins.

Once you’ve entered a name for your site, you can continue to the next screen, here, you have two options.

You can choose Preferred to set up your local site using a recommended set of tools, or select Custom to configure your environment:

The Preferred option works well for most beginner users, while Custom comes in handy for developers with more specific requirements.

Either way, continue to the last step once you’re done here:

On this screen, you’ll create a WordPress username, a secure password, and an admin email address. Under Advanced Options, you can also specify if you’d like this installation to be a multisite setup. Then, hit the Add Site button.

After a few moments, you’ll see your new site listed in the dashboard, along with all of its information:

You can now select the Admin button to log into your site and get to work! In addition, you can always come back to this dashboard if you want to make changes to your local site’s setup or domain.

Installing Noor theme demo for testing

A lot of our clients on PixelDima asking us for pages from another demo they install, this video will show you how to install any demo you want locally so you can copy and paste any page you want.

Conclusion

Creating WordPress site never been easier with Local by Flywheel all you’ll need to do is install it and create your local WordPress site and export the site any time to your flywheel when it’s ready to go.

If you have any questions about Local by Flywheel or you want to try the pro version you can talk to Local by Flywheel chat and ask for Shelbi Kyler before signing up it will help you to choose what best for you.

[button text=”Get Noor Now” type=”fill” size=”large” shape=”dima-btn-pill” color_class=”” float=”start” lightbox=”” delay=”” delay_duration=”” delay_offset=”” href=”https://pixeldima.com/go/noor” title=”” popup_content=”” id=”” class=”mag-elms” style=”margin-right: 20px;”][button text=”View Demos” type=”fill” size=”large” shape=”dima-btn-pill” color_class=”di_green” float=”start” lightbox=”” delay=”” delay_duration=”” delay_offset=”” href=”https://noor.pixeldima.com/noor-promo” title=”” popup_content=”” id=”” class=”” style=””]

⚠️ HTTPS is no longer optional, Starting from February 2020, Google Chrome browser will block all mixed content on web pages by default.

In this tutorial, we will show you how to quickly fix WordPress mixed content warnings.

HTTPS benefits

When a browser requests resources over HTTPS—which stands for HTTP Secure—it uses an encrypted connection to communicate with the webserver.

Authentication: HTTPS lets the browser check that it has opened the correct website and hasn’t been redirected to a malicious site.

Data integrity: HTTPS lets the browser detect if an attacker has changed any data the browser receives. 

Secrecy: HTTPS prevents an attacker from eavesdropping on the browser’s requests, tracking the websites visited, or stealing information sent or received.

SEO: HTTPS builds trust, is an SEO ranking factor, and provides more accurate referral data.

What is Mixed Content Warning?

Mixed content occurs when initial HTML is loaded over a secure HTTPS connection, but other resources (such as images, videos, stylesheets, scripts) are loaded over an insecure HTTP connection. This is called mixed content because both HTTP and HTTPS content are being loaded to display the same page, and the initial request was secure over HTTPS. Modern browsers display warnings about this type of content to indicate to the user that this page contains insecure resources.

WebFundamentals

How to find the non-HTTPS contents

There is a free little tool called SSL Check from JitBit which you can use to crawl your HTTPS WordPress site and search for insecure images and scripts that will trigger a warning message in browsers. The number of pages crawled is limited to 200 per website.

How to Fix Mixed Content Warnings

Ther are several strategies to fix the HTTPS mixed content warning on a WordPress site, manually or using tools and plugins, in this tutorial we will use the best and efficient way to fix the mixed content warning.

We are going to Edit the site database with the easer and secure way using easy-to-use plugin Better Search Replace to find and replace http://example.com with https://example.com in a few minutes, and then simply delete the plugin after you’re done.

1. Enter in the search for the field the value you want to search for in the database, which in this case is our HTTP domain: http://example.ink.
2. Enter in the replace with the field the new value that should be used to replace the value that you are searching for. In this case, it is our HTTPS domain: https://example.ink.
3. Select tables you want to search on, for multiple tables select click Ctrl-Click for Windows or Cmd-Click for Mac, In this case, we select all tables.
4. Ensure the “Run as dry run?” option is selected first, as this will count how many replacements will be made without actually making the replacements.
5. Uncheck “Run as dry run?” and click ‘Run Search’

Important: Ensure you don’t include any leading/trailing whitespace in either of the fields as this might produce undesirable results.

We hope you will find this tutorial helpful while fixing HTTPS mixed content. Thanks for being with PixelDima!