lorenzocaum/new_gist_file.md

## new_gist_file.md

      
    Raw
  

              new_gist_file.md
            
          
    The [ESPRESSO_CALENDAR] shortcode cannot currently be used twice on a WordPress page. However, it is possible to get this setup by using an iframe to load the second calendar.
Step 1 - Create a page that for the first [ESPRESSO_CALENDAR] shortcode
Create a new WordPress page and add the [ESPRESSO_CALENDAR] shortcode to it. Feel free to add any parameters that you may need. Then publish it. Now view the page to ensure that the calendar appears as expected. If it doesn't, then go back to the WP page in the page editor and toggle the Text view via the Text tab in the top right corner of the content editor. Ensure that only [ESPRESSO_CALENDAR] appears and that there is no extra HTML such as pre tags. If there are, then remove and save changes.
Step 2 - Create an additional page for the [ESPRESSO_CALENDAR] shortcode
Create a additional WordPress page and add the [ESPRESSO_CALENDAR] shortcode to it. Feel free to add any parameters that you may need and then publish. Similar to step 1, double-check that the page shows the calendar on the front-end of your site.
Then set the page to use a full-width option from your theme. This means that there will be no sidebar and be sure to save changes to the page.
Step 3 - Edit the first page to add an iframe to show the second calendar page.
Go to the first WordPress page with the calendar and switch to Text view. Then add the sample HTML below:
<br />
<div style="width:100%; height: 800px;">
<iframe src="http://example.com/events-calendar-2/" width="100%" height="100%"></iframe>
</div>

Now you should change the URL to the URL of your second calendar page and then save changes.
You can now view the original calendar page on your site and you should see the first calendar and then the second calendar that appears in your page. You may notice that the header and footer content appears and that can be hidden via CSS to provide a cleaner look.
Step 4 - Hide the header and footer for the second calendar page
You'll use some CSS to hide the header or footer on the second calendar page. If your theme has a custom CSS area, then you can use that. If not, then go ahead and install and activate a free plugin like Reaktiv CSS Builder or Simple Custom CSS.
Go to the second calendar page and then inspect the header area to determine the body classes that you can use for hiding. This will vary from theme to theme so unfortunately there isn't a universal CSS example that is available. However, please see the explanation below so you understand what is happening.
Modern themes add various body classes to pages and posts on a WordPress site. Some may be used on all WP pages. For example, all WordPress pages may have a body class of "page" and all WordPress posts may have a body class of "post." There are also unique body classes. For example, if a page ID is 123, then it may have a body class of "page-id-123." This is helpful as it means that you can target specific pages or posts on a site.
Once you have the body class, then you'll combine that with some elements from the header and then do the same for the footer.
Then these can be added to your theme's custom CSS or via a plugin like Reaktiv CSS Builder or Simple Custom CSS.
Step 5 - Review the original calendar page
Now go to the original calendar page and you should see both of your calendars. If the second calendar appears cutoff, then increase the height on the example iframe code shared in step 3. If it is too long, then reduce the width and save changes. Then view the page.
You may need to repeat this step a few times but afterwards, you should have two event calendars on your page.