Modern Footnotes

Footnotes optimized for desktop and mobile, inspired by the styles of Grantland and FiveThirtyEight.

Use a footnote in your post by using the footnote icon in the WordPress editor or by using the shortcode: [mfn]this will be a footnote[/mfn] The plugin will automatically associate sequential numbers with each plugin.

On desktop, footnotes will appear as a tooltip when the user clicks on the number. On mobile, footnotes will expand as a section below the current text.


Code Editor in Gutenberg Editor

The Gutenberg editor gives you a visual interface that makes it easy for you to compose a page or post. However, many people still edit their content using the code editor. Fortunately, the code editor is still present within the Gutenberg editor. You can edit the entire post or page as code, or you can edit individual blocks as code. We will show you how to use the code editor in the Gutenberg editor using a sample post.

If you want to learn how to use the code editor on the classic editor, you can learn how to do so here.


  1. In order to access the code for an individual block you will need to be logged into the WordPress Administrator Dashboard. Open the page or post that you wish to edit using the Gutenberg editor.
  2. Click on the block that you wish to edit with the code editor.
  3. To the the right of the block you will see 3 vertical dots. Click on the dots.
  4. A pop-up menu will appear. Click on the option labeled Edit as HTML.
  5. You will then see the block displayed in code. Make your changes or additions to the block.
  6. Once you are finished, you will need to click on the Update or Publish options in the top right corner of the editor in order to save your changes. Note that if you wish to see the block in the visual editor after the changes, simply click on the 3 vertical dots again and then click on option labeled Edit Visually.

Classic editor – Edit page by HTML

WordPress authors have the option to create pages and posts in a Visual Editor or a Text Editor. While the Visual Editor does a reasonably good job with its toolbar options and easy editing environment, the use of the Text Editor allows maximum flexibility on how to organize content.

Let me explain not just why you’d want to use the Text Editor (in place of the Visual Editor), but how easy it can be to use.

How To Use WordPress HTML Editor image

Why might you prefer the Text Editor?

  • Your content will make more sense for your readers and search engines.
  • You only need to know a few HTML tags to make the Text Editor very useful.
  • You can apply CSS style properties directly to your HTML code.

What Happens When You Use The Visual Editor?

When you add copy, media or links to your Visual Editor you’re really adding HTML to your page or post. It all takes place under the hood.

Not sure what I mean? Try this.

Add some content by copying and pasting something in the Visual Editor. Then select the Text tab. What you’ll be looking at is HTML. Just like with the Visual Editor, you can edit your HTML code directly with the Text Editor.

In fact, you can do a lot more with the Text Editor than you can with the Visual Editor. This makes working in text mode not just more productive but more satisfying too. You’ll be able to more accurately markup your content which will benefit your readers and boost your SEO efforts.

HTML is about as straightforward as it gets. Every web page, including those generated by WordPress, use it.




Creating menus

Creating Your First Custom Navigation Menu

You can create menus in WordPress by visiting Appearance » Menus in your WordPress admin area.

This will bring you to the Edit Menus screen which is divided into two columns. The column on your left has your pages, categories, and custom links tab. The column on the right is where you add and adjust menu items.

Creating menus in WordPress

Let’s create your first custom navigation menu.

Provide a name for your menu, e.g. ‘My First Menu’ and then click on the create menu button. This will expand the menu area, and it will look like this:

Newly created empty custom navigation menu in WordPress

As you can see in the screenshot, our demo site has three theme locations labeled primary, secondary, and social. The location names and placements vary from theme to theme.

Next, you need to select the pages you want to add to the menu. You can do this by selecting the pages listed on the left hand side and clicking on Add to Menu button.

Selecting and adding items to custom navigation menu in WordPress

After adding pages to the menu, select the theme location where you want to display the menu and click on the ‘Save Menu’ button.

Selecting a theme location for the menu

Don’t worry if you’re unsure where each menu location is on your site. You can visit the website to see the menu in action. If you don’t like it, then you can always change the menu location.

Arranging Items in a Custom Navigation Menu

You probably noticed that each menu item you added is arranged in the order you added them. For example, your about link appears at the end, while the contact page link appears first. Don’t worry you can easily rearrange your WordPress menu items in any order you want.

Simply drag and drop a menu item to adjust its position in the menu.

Drag and drop menu items to rearrange their position

Repeat the process to create new menus for other theme locations.

Creating Nested Drop-Down Menus in WordPress

Nested menus, also known as drop-down menus, are navigational menus with parent and child menu items. These menus are usually styled by WordPress themes in such a way that when a user takes their mouse to a parent item, all their sub-menus are displayed.

Creating nested menus allow you to add a properly structured navigation system to your site. Here is how you can add a menu item as a sub-menu in WordPress.

In your menu structure, drag the menu item just below the parent item. Next, slightly drag the menu item to the right. You will notice that it will automatically become a sub-menu item.

Creating nested menus with sub-menu items

You can add multiple layers of sub-items to create deeply nested navigation menus. However, it’s important to note that not all themes support multi-layer nested menus. Most do up to 2-layers.

Sub-menus with their own child menu items

Adding Categories to WordPress Menus

If you’re using WordPress to run a blog, then you can add your blog categories as a drop-down in your WordPress menu.

By default, WordPress provides an easier way to add pages and categories from the left-hand column on the menu editor screen.

Start by clicking on the Categories tab to expand it. You will see your blog categories listed there. Simply select the categories you want to add to the menu, and then click on add to menu button.

Adding categories to custom navigation menu in WordPress

You will notice that categories will appear as menu items under menu structure column. Just like pages, you can simply drag and drop them to arrange their position on the menu. In this example, we have dragged all categories to appear as sub-menu items under the Blog.

Adding categories to navigation menu


Adding Custom Links to Your WordPress Navigation Menus

While adding categories and pages is easy, what if you want to add a link to your social media profile or another location? This is when you can use the custom link option.

Simply click on the custom link tab in the left-hand column to expand it. You will notice that it only has two fields. The first one is for URL where you will need to add the actual link you want to add. The second field is labeled link text where you will add the anchor text for the link.

Adding custom links to WordPress navigation menus

Note: It’s important that you must start all links with http:// or https://. If you don’t, then the links will be broken.

Editing a Menu Item in WordPress Navigation Menus

When you add pages or categories to your custom navigation menu, WordPress automatically uses the page title or category name as the link text. This does not mean that you cannot change it.

All menu items can be edited by simply clicking on the downward arrow next to a menu item.

Expand a menu item to edit or even remove it

Here you can change the menu’s navigational title or link text. You can also add a title attribute to the link. Don’t forget to click on the save menu button to store your changes before previewing your website.

Removing a Link From Navigation Menus in WordPress

You can remove a link in the same way you edit them. Just click on the downward arrow icon next to a menu item, and you will notice a red Remove link. When you clicking on it, the link will be removed from your navigation menus.

Removing a link from navigation menu in WordPress

Understanding Theme Locations For Your Navigation Menus

Navigation Menus are a theme feature in WordPress. Their appearance and display is controlled entirely by your WordPress theme. The admin area only provides a user interface to add and manage those menus. The theme we were using Only had two menu settings available, Primary Menu, and Social Menu. We can change our theme to “TwentyFourteen” to show an example of two menu bars. If you would like to learn how to change your theme, please check out the following article.

WordPress themes usually have at least one theme location for navigation menus. However, some themes may have more than one theme locations such as the theme TwenyFourteen which has two theme locations primary, secondary menus.

Also it’s important to note that the names of these menu locations would also vary from theme to theme. While some may call it primary another may call it header. It’s entirely based on theme developer’s preference.

Advanced Custom Fields

Use the Advanced Custom Fields plugin to take full control of your WordPress edit screens & custom field data.

Add fields on demand. Our field builder allows you to quickly and easily add fields to WP edit screens with only the click of a few buttons!

Add them anywhere. Fields can be added all over WP including posts, users, taxonomy terms, media, comments and even custom options pages!

Show them everywhere. Load and display your custom field values in any theme template file with our hassle free developer friendly functions!


Made for developers

At the core of the Advanced Custom Fields plugin is the simple and intuitive API.

Use functions like get_field() and the_field() to quickly build powerful templates.

Simple Calendar – Google Calendar

Simple Calendar is the easiest way to add Google Calendar events to your WordPress site. Quick to setup. Fine-tune to your needs. Mobile responsive. Beautifully designed.


– Display events from any public Google Calendar.
– Keep managing events in Google Calendar. No need to create events in WordPress.
– Out-of-the-box designs that match your theme’s look and feel.
– Fully responsive and mobile-friendly monthly grid and list views.
– Customize event content display using simple tags. No coding required.
– Combine multiple calendars into single displays explicitly or using categories.
– Intuitive, simple display configuration changes for fine tuning.
– Advanced settings to adjust time zones, date/time formats and start of the week.
– Integration with Event Calendar Newsletter for quickly turning your events into a newsletter-friendly format.
– Additional functionality offered with add-ons.
– Translations available with more being added on a regular basis. Translations welcome!



How to integrate your Google Calendar

Please Note: your google Calendar must be set to Public in order for this integration to work.

If you need help making your Google Calendar public, please check the following article

  1. Navigate to the ‘Plugins’ tab from the Dashboard.
  2. In the search bar search for ‘simple Calendar’.
  3. Click the ‘Activate’ button.
  4. Once activated, click the ‘Settings’ link.
  5. Enter the following api key into the ‘Google API Key’ box AIzaSyBqjOgheI-cSVnxjLX-MsMrL8sEF1MtNj8
  6. Click the ‘Save Changes’ button. 
  7. Click the ‘Add New’ tab in the Calendars section of the dashboard.
  8. Click the ‘Google Calendar’ tab under ‘Calendar Settings’
  9. Enter your Calendar ID into the ‘Calendar ID’ box.
    1. If you need help finding this, please check the How to find your calendar ID support article.
  10. Hit the blue ‘Publish’ button.

you are all done and should now be able to see your Google Calendar integrated into your site.

Note: If you want to embed the Calendar on a specific page you can grab the ‘shortcode’ from Calendars –> All Calendars.

Hover Effects in Elementor

Hover Effects

Elementor provides Hover Effects that help to increase and improve your website’s engagement and design interaction.

Hover effects can be applied at the WidgetColumn, and Section level, and can be combined to create unlimited effect variations.

Wherever you see the Normal and Hover buttons  , you have the option to add hover effects.

Elementor – Adding Shape Dividers

Shape Divider

Shape dividers are graphic shapes that separate the sections of a page.

How to Add Shape Dividers

  1. Add a new Section
  2. Go to Section > Style > Shape Divider
  3. Choose to display at the Top or Bottom of your section
  4. Type: Click the dropdown to choose your Shape Divider style
  5. Color: Pick a color
  6. Width: Set the width of your Shape Divider
  7. Height: Set the height of your Shape Divider
  8. Flip: Flip the direction of your Shape Divider
  9. Bring to front: Force your Shape Divider to be in front of other objects

Elementor – How To Add Video Backgrounds

Section Background Video Options

You can set a video as the background of a Section, enabling you to create interesting hero headers and other engaging areas on your page. The background video options can be found within the section’s Style tab.



  1. Background Type: Click the video icon
  2. Video Link: Enter a YouTube or .mp4 link to the video
  3. Start Time: Specify start time in seconds
  4. End Time: Specify end time in seconds
  5. Background Fallback: Upload a cover image, to replace the background video on mobile and tablet devices, as background videos are disabled on mobile devices to avoid browser restrictions and bandwidth draining.

Mouse Effects in Elementor

Mouse Effects – Mouse Track

Set an element to move in relation to the visitor’s mouse movement.


Advanced or Style > Background

Motion Effects

  1. Mouse Effects: Slide to ON
  2. Mouse Track: Click pencil edit icon
    Direction: Choose from Opposite or Direct. Opposite will move the element in the opposite direction of the mouse movement. Direct will move the element in the same direction as the mouse movement.
    Speed: Set the speed from 0 to 10
  3. Apply Effects On: Select to apply the motion effects on Desktop, Tablet, and/or Mobile devices.

Elementor Templates

Template Library

Elementor Template Library gives you access to hundreds of designer-made Page layouts and Blocks, all with premium high-end stock images, which you can use freely on your site.

Inserting Templates

  1. Click the  icon to add a Page template, Block, or your own saved template from the editing screen.
  2. Click the magnifying glass icon   to preview a template.
  3. Click INSERT to select the required template.
  4. Give your favorite templates a heart and save them to MY FAVORITES.
  5. Click the arrow in the top right corner  to upload a .json or .zip file.

Saving Pages as Templates

  1. Click the green button located at the bottom of the panel
  2. Choose Save Template
  3. Give a name to your template and save

Saving Sections as Templates

  1. Choose the section you want to save and right-click the Section Settings 
  2. Give it a name and click Save

How to Export Templates

You can export your saved templates.

  1. Click the  icon in the Elementor editor
  2. Under My Templates click the 3-dots  and click Export

How to Import Templates

You can import templates you’ve exported or downloaded.

  1. Go to Templates > Saved Templates or Templates > Theme Builder or Templates > Popups
  2. Click the Import Templates button
  3. Choose the file you want to import and click the Import Now button
  4. Your imported template will now be displayed in your Templates list

Typography on

Here on Sites, we offer different ways for a user to change the typography on their site. In this article, we will go through the different methods to do so.


What is Typography?

Web typography refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each web browser.

With WordPress, you have the ability to change these settings in a handful of different ways.


How to Change Font Size, Color, Family & Style in Elementor Page Builder

Many Elementor Widgets offer the ability to edit text color and typography settings. These design options are located in the widgets’ Style tab.


Text Color: Choose the color of your text

Under the Widget Setting > Style, click the icon to access the typography settings.


  1. Family – Choose your font family
  2. Size – Choose a size for your font
  3. Weight – Choose the weight of the font
  4. Transform – Choose the Transform properties for the font
  5. Style – Choose between Normal, Italic, and Oblique
  6. Decoration – Choose the text Decoration
  7. Line-Height – Use the slider to set your line-height
  8. Letter Spacing – Use the slider to set your letter spacing




How To Change Font In Gutenberg Editor and Classic Editors.


  • The first step is to navigate to the ‘plugins‘ tab on the menu.

  • once in the plugins menus, search for ‘Easy Google Fonts‘ and click the ‘activate button underneath it.



  • Now, go to Appearance → Customise to change font in Gutenberg Editor.

  • Click on Typography and to change Content font go to Default Typography → Paragraphs


  • Now, under Paragraphs, choose the font family you want.
  • You can change the font family by clicking on the Edit Font dropdown arrow and then clicking on Font Family dropdown arrow.
  • Once done click the Blue ‘Publish‘ button in the top right corner of the menu.

Download Leaflet Map


Add a map generated with LeafletJS: an open-source JavaScript library for mobile-friendly interactive maps. Map tiles are provided by default through OpenStreetMap, or MapQuest (with an app key). Can be set per map with shortcode attributes or through the dashboard settings.


Simply create a map with:


Lookup an address with:

[leaflet-map address="chicago"]

Know the latitude and longitude of a location? Use them (and a zoom level) with:

[leaflet-map lat=44.67 lng=-63.61 zoom=5]

Add a marker under your map shortcode, like so:


Want more? Make more (and fit the map to contain all of them):

[leaflet-map fitbounds]
[leaflet-marker address="tokyo"]
[leaflet-marker address="oslo"]
[leaflet-marker address="cairo"]
[leaflet-marker address="toronto"]

You can even add popups (to any shape) with their names:

[leaflet-map fitbounds]
[leaflet-marker address="tokyo"]Tokyo[/leaflet-marker]
[leaflet-marker address="oslo"]Oslo[/leaflet-marker]

Add a link to the popup messages the same way you would add any other link with the WordPress editor.


Add a line to the map by adding [leaflet-line]. You can specify the postions with a list separated by semi-colon ; or bar | using lat/lng: [leaflet-line latlngs="41, 29; 44, 18"] or addresses: [leaflet-line addresses="Istanbul; Sarajevo"], or x/y coordinates for image maps.

Add a circle to the map by adding [leaflet-circle]. You can specify the position using lat and lng and the radius in meters using radius. You can also customize the style using Leaflet’s Path options. Example: [leaflet-circle message="max distance" lng=5.117909610271454 lat=52.097914814706094 radius=17500 color="#0DC143" fillOpacity=0.1].

Or you can add a geojson shape via a url (make sure you are allowed to access it if it’s not hosted on your own server): [leaflet-geojson src=""]. Add custom popups with field names; try out the default src file and fields like so (note fitbounds needs to be on leaflet-geojson (for now)):

[leaflet-geojson fitbounds]{name}[/leaflet-geojson]

name is a property on that GeoJSON, and it can be accessed with curly brackets and the property name.


Alternatively, you could use a plain image for visitors to zoom and pan around with [leaflet-image src="path/to/image/file.jpg"]. See screenshots 3 – 5 for help setting that up.

Page Builder Gutenberg Blocks – CoBlocks


CoBlocks is the most innovative collection of page building WordPress blocks for the new Gutenberg WordPress block editor.

With additional blocks and true row and column building, CoBlocks gives you a true page builder experience for Gutenberg.

CoBlocks is powerful but lightweight: it adds functionality to the WordPress editor without bloat. This is the plugin you’ve been waiting for, and it will make you rethink what WordPress is capable of.



CoBlocks is the last page builder you’ll ever need: you get a winning mix of additional WordPress blocks, and page builder functionality. With CoBlocks you have everything you need to make beautiful web pages with the new block editor:

  • Resizable Row/Columns Blocks
  • Shape Divider Block
  • Hero Block (New!)
  • Buttons Block (New!)
  • Features Block
  • Media Card Block
  • Icon Block
  • Map Block
  • Accordion Block
  • Alert Block
  • Author Profile Block
  • Click to Tweet Block
  • Dynamic Separator Block
  • Gif Block
  • GitHub Gist Block
  • Highlight Block
  • Pricing Table Block
  • Social Sharing Block

And we’re adding new Gutenberg blocks all the time!


CoBlocks features an innovative block system that allows you to create stunning web pages, and even entire websites, with the new WordPress editor.

You get the extra blocks you need and the layout and design functionality for a true page builder experience.

Use the exceptional Row and Columns blocks to add dynamically generated content areas with specific responsive margin and padding settings that only CoBlocks provides.

Style these with innovative new blocks such as the Shape Divider, which lets you split up your content with beautiful dividers.

Each of the WordPress blocks within CoBlocks have been precisely fined tuned to offer a familiar, yet powerful, customization experience. Tailor each block to your taste using our custom controls and settings. Change fonts, set margin and padding, pick colors and more.


The breakthrough Typography Control Panel within CoBlocks lets you design web pages with alluring typographic elements. Set fonts, sizes, weights, transformations and more, in our CoBlocks blocks, and in core WordPress blocks.


Easily toggle off any WordPress block in the Gutenberg editor with the new CoBlocks Block Manager. No more unnecessary WordPress Gutenberg blocks standing in the way for you, or your clients.



The vision for CoBlocks is to create a suite of Gutenberg blocks to help folks make beautiful websites easily. These newest releases of CoBlocks is the ultimate expression of that vision.

WP 1 slider


Documentation  | Demo

WP 1 slider – is probably the most feature-rich Free WordPress slider. While doing 1000s of WordPress website for different clients, we came across various slider requirements. From our learning – we made a slider with the most useful features, variety of layout and configuration options and here it is – WP 1 Slider!.

WP 1 Slider – is developed considering user friendliness, features, layout designs for various users.


  • Add unlimited amount of images to the slider.
  • Add unlimited sliders in one page.
  • Enable/disable buttons (with/without link) on the slider.
  • Separate slider settings for each slider.
  • Separate caption settings for each slider.
  • Four different caption layouts for each slider.
  • Separate pager setting (slider navigation pager) for each slider.
  • Four different dot pager(slider navigation pager) layouts for each slider.
  • Ten different thumbnails pager(slider navigation pager) layouts for each slider.
  • Separate navigation / Arrows setting for each slider (7 designs to choose from).
  • Two different box shadow for slider image.
  • Nine different positions for slider title and description within image.
  • Ability to change colors of title,description,buttons and button hover on slider image.
  • Ability to change font size of slider title and description on image.
  • Ability to change background color and active color of dot pager navigation on slider image.
  • Add unlimited sliders in widgets.
  • Slider is fully responsive.
  • Easy usage via Shortcode.




  1. Activate the plugin through the ‘Plugins’ menu in WordPress.
  2. For customizing the plugin’s settings, click on WP 1 Sliders option menu in WordPress left admin menu.
  3. To display the slider in the frontend, please use dynamically generated shortcode from shortcode WP1S Usage metabox or you can use ‘Add WP 1 slider’ button in post or page for easy insert of the slider into post/pages.


Slider Manager

Once the plugin is installed and activated you will find a menu named “WP 1 Slider” in the left menu bar of the admin menu.Once you click on that menu , you will be redirected to the plugin’s listing page and you will see the add new button, once you click on that button you will be redirected to the slider page where you can create slider. Basically there are 6 type of slider type with its own settings configurations which is individually described below.

Creating New slider

This is the landing page for plugin. Here you can see the listing of the slider created along with its respective shortcodes. Here you can see Add new button at top of slider listing table.For creating a new slider, you will simply need to click on the Add New submenu of the Wp 1 sliders menu or click on the Add new button in the slider manager’s listing table. You can also edit or delete slider from here.Once you click the button, you will be redirected to the new slider builder page where you can add the unlimited numbers of slides.

Slider Builder Page

Slider Builder Page

This is the builder page of plugin where you can add unlimited numbers of images ,post ,videos ,woocommerce product,facebook image or instagram images slides and build awesome slider.
In this page you will see Slides metabox inside this metabox you will see the Slider type option which include image slide,video slide,post slide,woocommerce slide,instagram slide and facebook slide option.
Below are the detail description for each slide type.

Creating Image Slider

Once you have selected the image slide in Slider Type option then you will see the Slider mode for image slide option , inside this option you can select either normal mode or animation mode.If you want to create simple slider then you can choose normal mode and if you want to have animation effects and layers in slider then you have to choose the animation mode.You will also see the Add Image Slide button from where you can add unlimited number of image slides.Below are the detail description for these two mode:

    • Normal Mode

Normal Mode

After selecting the normal mode, you can click on the ‘Add Image Slide‘ button then you will see the untitled slide.Once you click in untitled slide a slide box will appear where you can add the available input fields in the slide. You can see all the available fields in the slide box as shown above in the image. You can enable or disable the buttons and can give text and link for button.

General Settings

Just below the Slides Metabox ,you will see Slider Style option which include Single Slide Layout and Carousel Slide Layout.These two option include different settings configurations.
Below are the detail description for each slide style:

      • Single Slide Layout

General Setting

When you will select the single slide layout then the Slider settings,Caption settings,Pager Settings,Navigation arrows settings will appear where you can switch the tab by clicking on each setting tab to go to respective setting tab and can edit the way you want to display slider by changing your own setting options.
We have following feature available in our current version to choose from:

        • Slider Settings:

Slider Setting

Allows you to choose either display slider box shadow or not and allow you to choose shadow box types template.

        • Caption Settings:

Caption Setting

Allows you to choose four different caption types option with its respective title font size, title font color,description font color and size,button color,background color,border color and caption position settings.

        • Pager Settings:

Pager Settings

Allows you to choose either display dot pager or thumbnail pager or pagination pager or disable the pager.

Visualizer: Charts and Graphs


Visualizer: Tables and Charts Manager for WordPress (Lite) plugin is a simple, easy to use and quite powerful tool to create, manage and embed interactive charts & tables into your WordPress posts and pages.

The plugin uses Google Visualization API and to add responsive & animated charts/diagrams, which support cross-browser compatibility (adopting VML for older IE versions) and cross-platform portability to iOS and new Android releases. Is the best Excel to WordPress solution who let’s you insert charts to your wp site using a simple chart builder.



This WordPress graph plugin provides a variety of charts that are optimized to address your WordPress data visualization needs. It is line chart,flow chart, area chart, bar chart, column chart, pie chart, geo chart, gauge chart, candlestick chart and scatter chart. These charts are based on pure HTML5/SVG technology (adopting VML for old IE versions), so no extra plugins are required. Adding these charts to your page can be done in a few simple steps. The premium version can act as a interactive WordPress Table plugin, with sorting capabilities.


Make the charts your own. Configure an extensive set of options to perfectly match the look and feel of your website. You can use Google Chart Tools with their default setting – all customization is optional and the basic setup is launch-ready. However, charts can be easily customizable in case your webpage adopts a style which is at odds with provided defaults. Every chart exposes a number of options that customize its look and feel.


Charts are rendered using HTML5/SVG technology to provide cross-browser compatibility (including VML for older IE versions) and cross platform portability to iPhones, iPads and Android. Your users will never have to mess with extra plugins or any software. If they have a web browser, they can see your charts.



How to set up Visualizer

The Events Calendar


Create an events calendar and manage it with ease. The Events Calendar plugin provides professional-level quality and features backed by a team you can trust.

Packed with loads of useful features, The Events Calendar by Modern Tribe is ready to go right out of the box. It’s extensible, easy to use, and completely customizable.

Just getting started? Read through the New User Primer to get set up.



The Events Calendar is built to work out of the box. Just turn it on, configure the settings to match your needs and you’ll be making events in less than 5 minutes.

Whether your vision is big or small, you’re in good company. Hundreds of thousands of churches, eateries, small businesses, musicians, venues, and non-profits are publishing and promoting their events with The Events Calendar.


Whether you’re operating a hyperlocal hub listing thousands of events, a university with many thousands of users, or you’re a sole business owner listing your classes, The Events Calendar has your back.

  • Rapidly create events
  • Saved venues & organizers
  • Calendar month view with tooltips
  • Event List view
  • Day view
  • Event search
  • Google maps
  • Widget: Upcoming events list
  • Events Taxonomies (Categories & Tags)
  • Google Calendar and iCal exporting
  • Completely ajaxified for super smooth browsing
  • Completely responsive from mobile to tablet to desktop
  • Increase your SEO with Microformats
  • Internationalized & translated
  • Multiple stylesheets to improve integration



Configure your settings. Configure both your WordPress settings and Events Calendar settings so that your calendar works how you’d like it.

Customize your event settings to get the look you want by going to Events, Settings, General.

Events > Settings

Add a link to your calendar on your website so that visitors can find it.

How to add events page to menu: go to Appearance , Events, View all, and select the Events page to add to menu

Go to Appearance > Menu to add your events page to the menu

Create an Event

You’re ready to add your first event!

Relevanssi Premium


Relevanssi replaces the standard WordPress search with a better search engine, with lots of features and configurable options. You’ll get better results, better presentation of results – your users will thank you.



  • Search results sorted in the order of relevance, not by date.
  • Fuzzy matching: match partial words, if complete words don’t match.
  • Find documents matching either just one search term (OR query) or require all words to appear (AND query).
  • Search for phrases with quotes, for example “search phrase”.
  • Create custom excerpts that show where the hit was made, with the search terms highlighted.
  • Highlight search terms in the documents when user clicks through search results.
  • Search comments, tags, categories and custom fields.
  • bbPress support.
  • Indexing attachment content (PDF, Office, Open Office).
  • Improved spelling correction in “Did you mean?” suggestions.
  • Searching across multiple sites in the same multisite installation.
  • Search and index user profiles.
  • Search and index taxonomy term pages (categories, tags, custom taxonomies).
  • Assign weights to any post types and taxonomies.
  • Assign extra weight to new posts.
  • Let the user choose between AND and OR searches, use + and – operator (AND and NOT).
  • Highlighting search terms for visitors from external search engines.
  • Export and import settings.
  • Related posts.


Activate the ‘Relevanssi Premium’ plugin on your desired site.

After enabling, check Settings > Relevanssi to adjust the settings and build the index.

Search widget

Relevanssi doesn’t come with a search widget. You can use the default WordPress search widget or any other method that generates a standards-compliant search form.



All options on this tab affect the indexing and won’t have any effect until you build the index. You need to save the options before indexing. Clicking Build the index will wipe the index clean and rebuild the complete index, based on the indexing settings you’ve chosen on this tab. The indexing will run until it’s finished. It can take a while, especially on a large site, but the indexing process will show an estimate of the remaining time. Keep the browser window open as long as it takes to index.

If for some reason the indexing is interrupted, you can click the Index unindexed posts. This will index all the remaining posts (including all post types). This button can be useful if you import posts in a way that doesn’t trigger Relevanssi indexing: just click the button after the import to index all the new posts.

State of the index shows the number of documents (posts, pages), users and taxonomy terms (Premium only) in the index, number of terms (words) in the index and the highest post ID in the index. These are useful for debugging purposes, for example to see if the indexing works.

Post types
Just check the boxes for each post type you wish to include in the index. The “Excluded from search?” column shows whether the post type is marked public or not, but it doesn’t mean you can’t index those post types. It’s just for information.

Choose which taxonomies are indexed for the posts. If you check a taxonomy here, it means that searching for the taxonomy term name will find all posts that have this taxonomy term attached to them. Again, the “Public?” column is just for your information.

Choose which comments are indexed. You can choose to include only regular comments or also include pingbacks and trackbacks.

Custom fields
Choose which custom fields are indexed. “All” includes all custom fields assigned to a post, “visible” only those that are shown on the edit page. If a custom field name starts with an underscore (_), it is hidden from the post edit page, and won’t be included if this setting is set to “visible”. Since some themes can add quite a bit of behind-the-scenes data in the custom fields, “visible” is a reasonable setting. You can also choose to index only specific fields you list.


Author display names
If this option is enabled, Relevanssi will index author display names. Searching for an author will find all posts written by the author.

If this option is enabled, Relevanssi will index post excerpts.

Expand shortcodes
If this option is checked, Relevanssi will expand all shortcodes in post content before indexing the post. That means the shortcode content will be included in the index. This doesn’t always work as expected. If the shortcode provides dynamic content, Relevanssi will index the post with the content at the moment of indexing, and won’t update the index when the dynamic content changes.

Some plugins don’t enable their shortcodes in the admin side, so Relevanssi can’t expand them. Some plugins, especially those that don’t respect WP programming standards, may break Relevanssi. If indexing doesn’t work, one of the first things to try is to disable this option.

Disable these shortcodes
You can list unwanted shortcodes here: if a shortcode is causing problems in indexing, list it here and it will be disabled when Relevanssi indexes posts.

Index user profiles
If this is checked, Relevanssi will index user profiles. Relevanssi indexes first name, last name, display name and user description. You can also index other data for users, see two options down.

Since WordPress expects the search results to be posts, Relevanssi needs to convert the user profiles to posts. That requires some changes in your search results template. the_permalink()should work in most cases, pointing to the user profiles. See User profile search for more information.

Index subscribers
If checked, Relevanssi will also index subscribers, otherwise only admins, editors, authors and contributors are indexed.

Extra fields
If you want to index other user fields, you can list them here. These field names should correspond to MySQL database columns in the wp_user table or user custom fields.

Index synonyms
Synonyms generally only work in OR searches: the synonyms are used by adding more words to the search query and in OR search that works as expected, widening the search. In AND search, it will restrict the search, so it won’t work. Enabling this option will make Relevanssi index the synonyms as part of the post content, making them compatible with AND searches.

Index taxonomy terms
If you enable this option, you can index taxonomy term pages. If this option is enabled, searching for a taxonomy term name will return the term archive page as a result. By default, Relevanssi only indexes those terms that are attached to posts. With this option enabled, get_permalink() won’t work on search results template. the_permalink() does, but if you don’t want to echo the permalink, you can use relevanssi_get_permalink() instead. See Indexing taxonomy pages.

Taxonomies controls which taxonomies are indexed.

Index for parent (Premium only)
If checked, Relevanssi indexes the PDF content both for the attachment post and the parent post. You can control the attachment post visibility by indexing or not indexing the post type attachment.



Attachments tab

Attachment tab handles the PDF content reading. If you have PDF files in your Media Library, Relevanssi can read in the PDF contents so that they are available for indexing.

In order to read the contents of the PDFs, the files are sent over to, a PDF processing service hosted on a Digital Ocean Droplet in the USA. The service creates a working copy of the files. The copy is removed after the file has been processed, but there are no guarantees that someone with an access to the server couldn’t see the files. Do not read files with confidential information in them. In order to block individual files from reading, use the Relevanssi post controls on attachment edit page to exclude attachment posts from indexing.

Read all unread PDFs reads in all the PDF content in attachments. This does not wipe the index, and will only process those PDFs which haven’t been read yet. If reading the PDF caused an error message before, the PDF will be skipped, unless the error message is a time out, in which case it’s attempted again.

Reset all PDF data from the posts will empty out the PDF information from the posts. It is stored in the attachment metadata: content in _relevanssi_pdf_content and errors in _relevanssi_pdf_error. Clicking this button will wipe these custom fields empty.

Upload PDF files
By default Relevanssi sends a link to the PDF to the reading service, which then downloads the PDF and reads it. However, if your files are behind a firewall, in an intranet or otherwise not accessible from the outside world, this is not going to work. In that case, check this option, and Relevanssi will upload the files directly.

Link to PDFs
If you decide to have attachments in search results (by indexing the attachment post type), by default the links in search results pages will lead to the attachment page. That’s often less than helpful, as it’ll take one more click to reach the actual PDF. Enabling this option will make the search results pages link directly to the PDF file.


Searching tab

Default operator
OR search will return all posts where at least one of the search terms appears. AND search will only return posts that have all search terms in them. OR search will prefer posts that have all search terms in them, so in most cases it is the better option.

Fallback to OR
If you have chosen AND as the default operator and the search finds no results, Relevanssi will perform an OR search with the same search terms. If you want to disable this, check this option.

Default order
By default Relevanssi orders results by relevance, trying to put the most relevant results first. This makes a lot of sense. Some people prefer other methods. From the settings page, you can choose post date order, most recent posts first. If you want other orderings, you can use the orderby parameter. For multiple levels of ordering, Relevanssi supports array orderby.

Keyword matching
Relevanssi can match whole words or partial words. Matching whole words means only complete words are matched. If you search for “ledge”, you will only find documents that contain the word “ledge”. Partial words also matches parts of words, so searching for “ledge” will also finds documents that contain words “knowledge” and “ledger”.

The search term has to be either in the beginning or the end of the word, so searching for “ion” will find “caution” or “ionized”, but not “cautionary”.

Here you can adjust weights for different features like post titles, tags, comments, different post types or taxonomies. Some of these adjustments are Premium only. All the weights work the same way: they are multipliers, so 1 keeps the weight neutral compared to everything else, below 1 makes the weight smaller and values over 1 make the particular item weigh heavier in the matching.

If you want to emphasize something, don’t be afraid of using big numbers. If you want to make sure that posts with the search terms in titles come up in the search, slap a weight of 100 or 1000 for the titles. Subtlety is overrated.

Recent posts bonus cutoff
If you’ve added extra weight for recent posts, this option determines which posts are considered recent.

Admin search
If you enable this option, Relevanssi will be enabled for admin searches. Otherwise default WordPress search will be used in all searches in the admin interface. Admin searches may not always work very smoothly. For example page search will not use Relevanssi, because that’s just how WordPress works.

Respect exclude_from_search
If you check this option, custom post types which have exclude_from_search set to true will be excluded from the search. If the option is unchecked, Relevanssi won’t respect that setting and will search anything that is indexed.

Throttle searches
On large sites searches can become heavy to process, particularly when there are common words involved. Relevanssi has to load every post that is found by any search term, and that can require lots of memory. In most cases, the user only cares about the few posts on the first page of search results.

This option will restrict Relevanssi to only first 500 posts per search term. Relevanssi will only take the first 500 posts per search term, so the maximum number of posts Relevanssi will load in memory is 500 times the number of search terms. The 500 posts are chosen with some sense, so it is very likely the best posts are within those 500 posts. This way the search becomes more effective and less memory-intensive. On a small site this option isn’t necessary – if a single search term finds less than 500 posts, the limit of 500 doesn’t make any difference – but on a large site this is very useful option, and I recommend you use this option all the time.

Do note that choosing the probably best posts only works with the relevance ordering. If your order posts by date, it is quite likely the limit will drop out useful posts. If you need to have the limit and you want posts ordered by date, I suggest you set Relevanssi to relevance order, use a limit and then use orderby parameter to sort the results by date.

Knight Lab TimelineJS


A simple shortcode plugin to add the TimelineJS made by Knight Lab. Now updated to support TimelineJS3.

Supports custom width and height, Google Spreadsheet and JSON data sources and many more.

Checkout how to create your amazing Timeline at

To embed your timeline use the button located at the post content editor (TinyMCE).

You can also embed the Timeline on your post using this shortcode :
[timeline src=”Your source url here”]

Jetpack by


Hassle-free design, marketing, and security — all in one place.


Create and customize your WordPress site from start to finish. Jetpack helps you with:

  • Hundreds of professional themes for any kind of site
  • Intuitive and powerful customization tools
  • Unlimited and high-speed image and video content delivery network
  • Lazy image loading for a faster mobile experience
  • Integration with the official WordPress mobile apps


Measure, promote, and earn money from your site. Jetpack helps you with:

  • Site stats and analytics
  • Automated social media posting and scheduling in advance
  • Elasticsearch-powered related content and site search
  • SEO tools for Google, Bing, Twitter, Facebook, and
  • Advertising program that includes the best of AdSense, Facebook Ads, AOL, Amazon, Google AdX, and Yahoo
  • Simple PayPal payment buttons
  • Optimize: Activate Jetpack’s site accelerator to load pages faster, optimize your images, and serve your images and static files (like CSS and JavaScript) from our global network of servers. You’ll also reduce bandwidth usage, which may lead to lower hosting costs.