News

How to Easily Add JavaScript in WordPress Pages or Posts (3 Methods)


Do you want to add a JavaScript in your WordPress pages or posts? Sometimes you may need to add a JavaScript code to the entire website or into specific pages. By default, WordPress does not let you add code directly in your posts. In this article, we will show you how to easily add JavaScript in WordPress pages or posts.

How to easily add JavaScript in WordPress posts and pages

What is JavaScript?

JavaScript is a programming language that runs not on your server but on the user’s browser. This client-side programming allows developers to do a lot of cool things without slowing down your website.

If you want to embed a video player, add a calculator, or some other third-party service, then you will be often asked to copy and paste a JavaScript code snippet into your website.

A typical JavaScript code snippet may look like this:


<script type="text/javascript"> 

// Some JavaScript code

</script>

<!-- Another Example: --!>  

<script type="text/javascript" src="http://www.wpbeginner.com/path/to/some-script.js"></script>


Now, if you add a javascript code snippet to a WordPress post or page, then it will be deleted by WordPress when you try to save it.

That being said, let’s see how you can easily add JavaScript in WordPress pages or posts without breaking your website.

Method 1. Add JavaScript Site-Wide Using Insert Headers and Footers

Sometimes you will be asked to copy and paste a JavaScript code snippet into your website to add a third-party tool. These scripts usually go to the head section or at the bottom before the </body> tag of your website. This way the code is loaded on every page view.

For example, Google Analytics installation code needs to be present on every page of your website, so it can track your website visitors.

You can add such code to your WordPress theme’s header.php or footer.php files. However, these changes will be overwritten when you update or change your theme.

That’s why we recommend using a plugin to load javascript on your site.

First, you need to install and activate the Insert Headers and Footers plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » Insert Headers and Footers page. You will see two boxes, one for the header and the other for the footer section.

Insert Headers and Footers plugin settings

You can now paste the JavaScript code you copied to one of these boxes and then click on the save button.

Insert Headers and Footers plugin will now automatically load the code you added on every page of your website.

Method 2. Adding JavaScript Code Manually Using Code

This method requires you to add code to your WordPress files. If you haven’t done this before, then please see our guide on how to copy and paste code in WordPress.

First, let’s take a look at how to add code to your WordPress site’s header. You will need to add the following code to your theme’s functions.php file or a site-specific plugin.


function wpb_hook_javascript() {
    ?>
        <script>
          // your javscript code goes
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

Adding JavaScript to a Specific WordPress Post or Page Using Code

Let’s suppose you only want to load this javascript on a specific WordPress post. To do that, you will need to add conditional logic to the code. Take a look at the following example:



function wpb_hook_javascript() {
  if (is_single ('16')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');


If you take a closer look at the code above, you will see that we have wrapped javascript code around conditional logic to match a specific post ID. You can use this by replacing 16 with your own post ID.

Now, this code would work for any post type except for pages. Let’s take a look at another example except this one will check for a specific page ID before adding the javascript code to the head section.


function wpb_hook_javascript() {
  if (is_page ('10')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

Instead of is_single, we are now using is_page to check for page ID.

We can use the same code with slight modification to add javascript code to your site’s footer. Take a look at the following example.


function wpb_hook_javascript_footer() {
    ?>
        <script>
          // your javscript code goes
        </script>
    <?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');

Instead of hooking our function to wp_head, we have now hooked it to wp_footer. You can also use it with conditional tags to add Javascript to specific posts or pages.

Method 3. Adding Javascript Code Inside Posts or Pages Using Plugin

This method will allow you to add code anywhere inside your WordPress posts and pages. You will also be able to select where in the content you want to embed the javascript code.

First, you need to install and activate the Code Embed plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to edit the post or page where you want to add the javascript. On the post edit page, click on the ‘Screen Options‘ button and check the ‘Custom Fields’ option.

Show custom fields meta box

Now scroll down and below the post editor, you will see the ‘Custom Fields’ metabox where you need to click on the ‘Enter new’ link.

Add a new custom field

The custom field name and value fields will now appear.

You need to provide a name for the custom field with a CODE prefix (for example, CODEmyjscode) and then paste the javascript code in the value field.

Adding a JavaScript code to a custom field

Don’t forget to click on the ‘Add Custom Field’ button to save your custom field.

Now you can use this custom field to embed the JavaScript code anywhere in this post or page. Simply add this embed code anywhere in your post content.

{{CODEmyjscode}}

You can now save your post or page and view your site. You will be able to see the javascript code by using the Inspect tool or by viewing the page source.

Tip: These methods are for beginners and website owners. If you are learning WordPress theme or plugin development, then you need to properly enqueue JavaScript and stylesheets to your projects.

We hope this article helped you learn how to easily add JavaScript in WordPress pages or posts. You may also want to see our list of extremely useful tricks for the WordPress functions file.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.





Source link

Read more...

How to Easily Translate Your WordPress with TranslatePress


Did you know that you can install and use WordPress in multiple languages? Yes, you can even create a multilingual website with WordPress by translating your content into different languages. In this article, we will show you how to easily translate your WordPress with TranslatePress.

How to translate your WordPress site with TranslatePress

Why Use TranslatePress for Translating a WordPress Website

The best part about WordPress is that it can be used in any language. Most WordPress themes and plugins can also be used and translated into any language as well.

If your business website have a multilingual audience, then it can be very beneficial to translate your content.

You can use machine translations like Google Translate, but these translations are not good and sometimes can be quite misleading.

On the other hand, if you’re using a multilingual WordPress plugin, then you need to create multiple posts which requires switching back and forth between different languages.

TranslatePress is a WordPress translation plugin that helps you solve all these problems.

  • You can translate your website and content using a live editor with the actual preview of each page on your site
  • You can instantly switch languages from the live editor.
  • Translate your theme, content, and plugins easily using the same interface.
  • Use Google Translate for automatic translations and only edit the parts that don’t make sense.

Let’s take a look at how to easily translate your WordPress website with TranslatePress.

Translating WordPress with TranslatePress

The first thing you need to do is install and activate the TranslatePress plugin. For more details, see our step by step guide on how to install a WordPress plugin.

If you want to translate your website to more than one language, then you will also need to install ‘Extra Languages’ add-on. You can do this from the download addons button under your account on TranslatePress website.

Download addons

After downloading the add-on, you can install and activate it like any other WordPress plugin.

Upon activation, you need to visit Settings » TranslatePress page to configure plugin settings.

Add license

First, you need to switch to the license tab and enter your license key. You can find this information under your account on the TranslatePress website.

After that, you need to switch to the General settings tab to setup other settings.

TranslatePress settings

The first option on the page is to choose the default language of your website, and the languages you want to translate your website into.

Next, you need to choose whether you want to display language names in the native language. The default option is ‘No’ which means language names will be shown in the default language.

The next option is to choose whether you want to display the default language name in the URL as a subdirectory. For example, http://example.com/en/.

The default choice is no which means only the other languages will have the language name in URL as a subdirectory. We recommend leaving this setting as-is for best SEO.

TranslatePress settings

This brings you to the next setting, ‘Force language in custom links’. The default option is ‘Yes’, because that will change custom links for translated languages making the URLs more SEO friendly.

Next, you need to choose whether you want to use Google Translate for automatic translations. The default choice is ‘No’, but you can change that if you would like to use Google Translate.

You will need to provide a Google Translate API key in the next option. You will find a link under the option which will show you instructions on how to get one.

Finally, you will come to the options on how you want to display the language switcher on your website. TranslatePress provides you with three choices.

You can use a shortcode, add switcher to your navigation menu, or display a floating menu. We will show you how to add the language switcher to your website later in this article.

Go ahead and click on the ‘Save Changes’ button to store your settings.

Translating Your Website Content

To translate your website, you can simply click on the ‘Translate Site’ tab on plugin’s settings page or the button in your WordPress admin bar.

Translate site button

This will open the live translation editor in a new browser tab.

In this live editor, you can click on any text on your website in the right pane and TranslatePress will load it in the left column to translate.

Translating site in TranslatePress

Now click on the language you want to translate the string into and then provide your translation.

After entering the translation, click on the ‘Save Translation’ button on the top and then click on the next button. TranslatePress will automatically load the next string on the page for you to translate.

You can also just click on the drop-down menu below your default language, and it will show you the list of translatable text strings on the page. You can select a string and then provide its translation.

Select and translate strings on a page

You can translate all content on any page. This includes navigation menus, buttons, sidebar widgets, meta text, and more.

You can also visit any page by clicking on the links on the screen and start translating that page.

TranslatePress allows you to instantly start translating any page or post on your site when logged in. Simply click on the ‘Translate Page’ button on the top to enter the live editor.

Start translating any page

Once you have translated a string, the plugin will automatically translate it for you on other places. For example, if you translated a post title, then the post title in your sidebar widgets will be automatically translated.

Adding Language Switcher to Your Website

Language switcher allows your website visitors to select a language when they visit your website. It usually displays the flag of each country to indicate languages available on your site.

TranslatePress allows you to add language switcher by using a shortcode, as a navigation menu item, or as a floating banner. The language switcher can be displayed as flags, language names, or both.

Adding language switcher in WordPress using shortcode

You just need to add [language-switcher] shortcode to posts, pages, or a sidebar widget where you want to display the language switcher.

Shortcode switcher

Adding language switcher to your WordPress navigation menu

Simply go to Appearance » Menus page and click on the ‘Language Switcher’ tab in the left column. Now select the languages you want to display and then click on add to menu button.

Adding language switcher to WordPress navigation menus

You will now see languages added to your WordPress navigation menu. Don’t forget to click on the ‘Save Menu’ button to store your changes.

This is how it looked on our test site:

Language switcher in navigation menu

Adding a floating language switcher

Go to plugin’s settings page and scroll down to language switcher section. From here make sure the box next to the ‘Floating language selection’ option is checked.

Floating language switcher

Don’t forget to click on the save changes button to store your settings.

You can now visit your website to see the floating language switcher at the bottom of every page on your website.

Floating language switcher

We hope this article helped you learn how to translate your WordPress site with TranslatePress. You may also want to see our list of the best WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.





Source link

Read more...

Welcome SeedProd to the WPBeginner Family of Products


Today, I’m extremely excited to announce that SeedProd has joined Awesome Motive, and it is now part of the WPBeginner’s family of products.

SeedProd is the most popular coming soon and maintenance mode plugin for WordPress. Currently it is being used by over 800,000 WordPress sites.

SeedProd Joins WPBeginner Family

The SeedProd free plugin allows you to quickly create a basic coming soon page or maintenance mode page for your website.

The pro version of SeedProd allows you to jump start your website with a viral coming soon page, so you can start building traffic, subscribers, and customers before your site even launches.

You can use SeedProd page builder combined with our 50+ pre-made templates and 500,000+ free stock photos to quickly create a beautiful coming soon page or maintenance page for your website.

SeedProd - Select theme for your coming soon page

It integrates with all popular social media platforms, so you can easily add share buttons to grow your following.

SeedProd pro also comes with subscriber management and email marketing integrations, so you can grow your email list by connecting it with your favorite email marketing service like Constant Contact, MailChimp, AWeber, and over 1000+ apps via Zapier.

On top of that, you can use SeedProd pro addons to create a notification bar, countdown timers, custom login page, custom 404 page, and custom landing pages.

Even though it’s not a brand new product, we’re going to keep up with tradition and allow our loyal WPBeginner readers to get an Ultimate Lifetime license for SeedProd, so you can get lifetime updates and access to all new features that we’ll add.

Get SeedProd Lifetime License Now

Background Story

If you’ve been reading WPBeginner for a while, then you know that we have recommended SeedProd for years on our website because we want to make it easy for beginners to make a website or start a WordPress blog.

I have met John Turner, SeedProd founder, at numerous events and have a lot of respect for what he has built.

When we announced the WPBeginner accelerator fund, John was one of the people who applied.

After several conversations, we decided that a full acquisition makes more sense for SeedProd given the synergies between our brands and existing products.

We quickly finalized the details, and here we are :)

SeedProd is officially an Awesome Motive product, but they will also be part of the first WPBeginner accelerator class as well.

I’m super excited about this acquisition because John is joining the Awesome Motive team and will be leading the SeedProd product development.

What’s Coming Next?

We have already started working on our plans to revamp the SeedProd builder and add more powerful features that I know will help businesses get a Big Head Start by helping them build an audience before their site even launches!

You can expect SeedProd to have deeper integrations with our existing plugins including but not limited to WPForms, MonsterInsights, and OptinMonster.

We will also improve custom branding features for freelancers and agencies, so they can use it on their client sites to help build their own brand.

Whenever we launch a new product, we allow our loyal WPBeginner readers to get lifetime access. Even though SeedProd is not a new product, I still went ahead and added a limited time lifetime plan for you.

This will grandfather you in and allow you to get all future features and updates.

Get SeedProd Lifetime License Now

Remember, this is a limited time offer, and it won’t last forever.

If you have suggestions on features you’d like to see in the SeedProd plugin, then please let us know by sending us a message via WPBeginner contact form.

As always, I want to thank you for your continued support of WPBeginner. We look forward to bringing you more amazing solutions to help you grow your business.

Yours Truly,

Syed Balkhi
Founder of WPBeginner



Source link

Read more...

How to Add Age Verification in WordPress


Do you want to add age verification to your WordPress website? Some website owners may want to ask their site visitors for age verification before accessing content due to the nature of content and the legal requirements. In this article, we will show you how to easily add age verification on your WordPress site.

Adding age verification to a WordPress website

The first thing you need to do is install and activate the Age Gate plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin adds a new menu item labeled Age Gate to your WordPress admin area. Clicking on it will take you to plugin’s settings page.

Age Gate settings

First, you need to enter the required minimum age for verification. After that, you can choose whether you want to apply the age verification restriction on all or selected content.

The ‘Varied Age’ option allows you to select different minimum age requirements for different posts and pages on your website.

For age verification, the plugin provides three options. You can display a form where users can enter their age, drop down boxes, or simple Yes/No buttons.

You can also allow users to remember the age verification or go ahead and enable ‘Remember me’ option by default. This would save your users from seeing the age verification message each time they visit your website.

Once you’re done configuring the settings, go ahead and click on the save changes button to store your settings. You can now visit your website to see the age verification screen in action.

Default age verification notice

The default age verification screen doesn’t look very good. Let’s take a look at how to customize it and make it look better.

Customizing Age Verification Screen and Message

The Age Gate plugin allows you to easily customize the appearance of the age verification screen and even include your own message.

First, click on the ‘Messaging’ tab on the plugin’s settings page. From here, you can change the age verification message. You can provide a title, description, terms and conditions, privacy policy, and any other information you want to display.

Change age verification messaging

Don’t forget to click on the save changes button to store your settings.

Next, you need to switch to the ‘Appearance’ tab on plugin’s settings page. From here, you can change background color, foreground color, background image, text color, and more.

Appearance settings for age verification screen

After changing the appearance settings, don’t forget to save your changes.

You can now visit your website in a new browser window using incognito mode to view the age verification screen in action.

More colorful age verification screen

Advanced Age Verification Settings

If you are having trouble with your age verification screen page, then switch to the ‘Advanced’ tab on plugin’s settings page.

The most likely issue you may see are caused by conflicts with your WordPress caching plugin or the caching enabled by your WordPress hosting service.

In that case, Age Gate comes with a JavaScript version that you can enable from the Advanced tab.

Advanced age gate settings

You can also enable other advanced settings from this page like Gutenberg support, adding custom CSS rules, and enabling anonymous age verification.

Setting Age Verification Screen for Specific Posts

If you chose ‘Varied Ages’ or ‘Selected Content’ options in the plugin’s settings page, then you can enable age verification for individual posts and pages.

Simply edit the post or page, and you will see the age restriction options under the publish meta box.

Age verification options for posts and pages

If you run an online store, then you can also use this option for specific products on your site.

We hope this article helped you learn how to add age verification in WordPress. You may also want to see our complete WordPress security guide to keep your site safe and secure.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Age Verification in WordPress appeared first on WPBeginner.





Source link

Read more...