How to place a widget in an article in WordPress

This article describes how to insert the code of a widget into an article of a site running on WordPress.

Note! You can also use the Travelpayouts WordPress plugin to add widgets. Please read more in the following article: How to add widgets and tables.

To place the widget follow these steps:

1. Log in to your WordPress account and choose the article.

2. Open the Article Editor.

3. Switch from Visual editor to Code editor mode.

In this mode, all elements of text formatting (bold font, images, headings, etc.) are in the form of HTML code.

4. Open your Travelpayouts account and in the list of programs, find the one whose widget you want to use. You can find more information about finding and customizing widgets in the About Widgets article.

5. Once the widget is configured and ready, copy its code from Travelpayouts, for example:

6. Insert the code in the desired place inside the article.

We recommend adding <!-- wp:shortcode → before and after the code of the widget. Because if you simply place the code of the widget in the Code Editor mode and switch to Visual Editor , it will not be displayed. It will only be visible in the Preview, Code Editor and when the page is published.

Therefore, if you switch back to the Visual Editor and continue writing the article, you may delete or damage the widget. The <!-- wp:shortcode → allows to separate the code of the widget from the rest of the article in the Visual mode:

7. Preview the article to make sure that the widget is placed in the correct paragraph.

8. Update and publish the article.

All set! Now all purchases made using your widget will be included in the statistics and bring you rewards!

Use the Shortcoder plugin to optimize the placement of code in your articles. Once installed, open the WordPress Control Panel, go to Settings, and select the Shortcoder menu item. Write the code name by which it will be called in the text of the article using the plugin and insert the code of the search form itself.

mceclip5.png

Once the code is saved, go to the Article Editor, click on the Shortcoder plugin icon in the Edit Panel, and select the desired code. Or write the code in the text of the article yourself.

 mceclip6.png