How to integrate the calendar in WordPress (Part 2)

The first part of this tutorial tackled integrating the regular mode calendar in your WordPress sidebar. In this part, we will be creating a page in WordPress and integrate one of the more advanced modes of the calendar, like the TOC or Blog mode. Note that we are building on the previous part where the required $CSS and $OL lines were added. If you only want to have the page part and skip the sidebar calendar, you will still have to refer to the first part in order to have a working integration. Ok, let’s dive in.

Once again, I won’t be getting into specific code as it deals with a file that is theme specific. You should be able to find where to add the code in your own files. Here’s a quick overview of what we’ll be doing :

  • First, we will create a new page template
  • Then, we will create a new page that uses that template
  • Finally, we will tweak the code to add your preferred calendar mode to the page

The easy way to create a new page template is simply to copy and rename page.php. If you already have a page template that you would want to reuse for your calendar page, feel free to use that one instead. You will find that file in /wp-content/themes/*your-theme*/. Once you have your new file created, you will want to take out the code that is in “the loop” and replace it with some placeholder text for now.

What “the loop” is defined as is the area between two very specific lines of code :

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- This here is the loop -->
<?php endwhile; else : ?>

So you can add any text you want as a test where I have put the comment. At the very top of the page, you will want to add the template name so that you can use it.

Template Name: Calendar Page

When you are done, save the file and upload it to your theme folder. That completes creating the template.

Now, we create the page. This is the easy part. Simply go in your admin screen, to the Write -> Page section. You can name the page anything you want, but the text you add in the page section will not be added to the actual page. Then select the page template to apply (it’s in one of the possibly collapsed sections underneath the page text). Save your page, publish it, and then check it out to make sure that the text we added as a test is showing up. If that all checks out, then you can proceed to adding the calendar code.

Go back to the template file that was created in the first step, remove the test text and replace it with the calendar code. Here you can add any of the modes that you want, and any plugins or options you would like. For the purpose of this tutorial, we’ll use the TOC as it is probably going to be a very popular selection, and it is also one of the simplest modes. So, replace the text in “the loop” with this :


If you view your page again at this point, you should now see the TOC mode, and part two is now completed. Should you want to add the List mode, or the multi-calendar, then follow the official integration instructions for each of the modes.

On the last part, we’ll add the Blog mode to this page here, and create a custom redirection for the sidebar calendar. Stay tuned…

In case you missed the other posts in this series, please go to:

Tags: ,

5 Responses to “How to integrate the calendar in WordPress (Part 2)”

  1. Thanks for the post as the forum is very bitty. Although this is probably the most advanced calendar I have come across, installing it on CMS is quite a pain – not just because you need to use the default permalinks. Well worth the $20 though if you have the patience to install it…. Not sure I do and I need the blog version guess I need to search the forum again as part 3 never seems to have been added!!

    Comment by BarranquillaJanuary 17th, 2010 @ 3:57 pm

  2. @Barranquilla – You are correct, part 3 hasn’t materialized yet… and I have no one to blame but myself. The actual setup needed to make the custom blog mode is actually fairly easy and has already been described on the forums before. However, if all you want is the regular Blog mode, simply replace the bit in part 2 that makes the TOC possible with the code required for the Blog mode.

    Comment by ve9graJanuary 17th, 2010 @ 5:53 pm


    Comment by mattxOctober 1st, 2010 @ 11:03 pm

  4. I was doing so well till the “the loop” thing. It would be helpful to see exampe page.php coding on here. I don’t know what I am suppose to be deleting and adding from this?

    Comment by Blake BaxendellJanuary 13th, 2011 @ 3:26 pm

  5. @Blake – “The Loop” is very well documented in the WP Codex. Like I said in my tutorial, I cannot give examples as it is unlikely that what I would present would match your theme. You’re better to refer to WP’s documentation to figure out where the code should go.

    Comment by ve9graJanuary 13th, 2011 @ 8:27 pm