How to integrate the calendar in WordPress (Part 1)

As it seems that instructions for a proper integration in WordPress are a bit scattered across a few posts and have to be gleaned to make up something that you can use, I figured it would be a good idea to create a multi-part tutorial that centralizes everything. In this first part, we’ll add the calendar to your sidebar. The next part will be how to create a page to integrate something like the TOC, or the List mode. And for the last one, we’ll go deep and create a custom Blog mode integration.

This tutorial will make some assumptions, like your WordPress is installed in your web root (not in a sub-folder), and you already have the calendar installed in the /calendar folder. Also, in order to be able to perform the integration, you have to make sure that the calendar uses the same database as your WordPress installation.

Let’s start easy with setting up the proper permalink structure. Go to your WP administration interface, in the Settings section, and then Permalinks. You will have to use the “Default” setting. This is so that the calendar navigation work. Using any of the other modes and you will not be able to navigate to different months.

Now, we’re getting into the guts of things. Here, you can use the Theme Editor, but I strongly suggest that you do not. Instead modify the actual files. All of the files that are modified are in your /wp-content/themes/<your theme>.

The first file to edit is your header.php so that we can add the CSS code required for the calendar. Find the </head> tag and then add the following code just before it.

<?php $CSS=1; require("calendar/calendar.php"); ?>

Now, for this step, you need to find the file that has the <body> tag. I can’t tell you which file to look in, but in my case it was also in the header.php file. Simply find the <body> tag and add this code just after it. This is required if you want to make use of the mouse-over popups.

<?php $OL=1; require("calendar/calendar.php"); ?>

And as the last step for this tutorial, we’ll add the calendar to the sidebar. So, open up your sidebar.php and copy one of the entries that make up the block. Here’s an example from my theme:

<?php wp_list_categories('title_li='); ?>

Yours will probably be a bit different, but you get the idea. Then, using that, simply modify it a bit in order to display the calendar.

<?php require("calendar/calendar.php"); ?>

This concludes this first part of the tutorial. We’ll keep coming back to this one as it will be the basis to many modifications.

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

Tags: ,

16 Responses to “How to integrate the calendar in WordPress (Part 1)”

  1. Thanks for writing this, I am hoping to get this working on my current WP build. Is it possible to have the calendar appear multiple times, each one only highlighting posts for that particular category you are viewing?

    Comment by zac — April 18th, 2010 @ 3:29 am

  2. @Zac – Yes, that can be done. At this point, the same limitations as a stand alone integration would apply. You would simply have to add the required code in the area described in this tutorial.

    Comment by ve9graApril 18th, 2010 @ 6:48 am

  3. My WordPress is installed into a subdirectory on my site. In other words, my “wp-content” folder iand other wp- folders) are in a root-level subdirectory called “/wpsystem.” In this event, (1) in what directory should I install the /calendar directory?; and (2) how would that change the relative linking in lines like:

    (that was the CSS line before the tag, just in case it doesn’t get displayed when pasted into this comment field)

    Comment by DABOctober 20th, 2010 @ 3:16 pm

  4. @DAB – You should install the calendar in your WP root… so at the same level as your other wp-* folders.

    Comment by ve9graOctober 20th, 2010 @ 3:26 pm

  5. I can’t get the mouseover to work, but it’s appearing in (one of) the sidebars — not the one I tried for, in the footer (and that may have something to do with the php or html code behind it), but in another one. However, the mouseover/click-thru does nothing so I have to play further and read further to get this to work. But just the fact that it’s showing up is, to me a good sign! For the record, I’m using WordPress as a CMS and have all the wp- folders in a subdirectory HOWEVER the homepage/redirect is at the root level. And, because of that I’m pretty sure, once I installed there, it showed up.

    Comment by DABOctober 21st, 2010 @ 10:21 pm

  6. @DAB – Please post your issues at the official forums. There’s a section dedicated to WordPress and it’s easier to go back-and-forth on a forum than in a comment thread.

    Comment by ve9graOctober 22nd, 2010 @ 7:40 am

  7. You wrote:

    “. . . you have to make sure that the calendar uses the same database as your WordPress installation.”

    Before discovering your wonderful tutorials, I set EPC up to use a different database. It seems to display the initial page of the calendar fine. When trying to navigate to different dates, though, it throws an Error 404. Is the cause of this error due to not using the same database as my WordPress installation?

    How then, do you use the same database? Is it as simple as reinstalling EPC and specifying the WordPress database during setup? This won’t cause conflicts?

    Is there a way to do this without going through a reinstallation of EPC?

    Comment by o4tuna — January 5th, 2011 @ 2:49 am

  8. @o4tuna – Your 404 error is not caused by the database problem… To fix it, you will need to use the $thisFile variable so that the links that EPC generates will match your site. However, note that I did make mention of using the default permalinks configuration… any other mode used might lead to the problem you’re experiencing.

    As for setting up the database, simply enter the WP’s database info in the calendar’s Setup Manager. Once done, you will get a warning that you need to re-run the setupSQL.php. Do so. This will simply create a new table inside of your WP’s database. This won’t cause any conflicts, and you do not need to reinstall EPC.

    Comment by ve9graJanuary 5th, 2011 @ 7:30 am

  9. @ve9gra – Thank you for such a prompt, thorough, and useful reply.

    I followed your advice on reconfiguring the database settings, and a new table was added to the same database used by WordPress just fine. EPC is saving events, categories, users, etc.

    My attempts at adding the $thisFile variable didn’t resolve the Error 404 problem. I attempted to add the $thisFile variable per EPC’s documentation. It’s very likely I didn’t add this variable properly–I enclosed it in tags and tried three different interpretations of “add this line at the top of the file in which the calendar is integrated”. Also, the file I added it to was the template page modified to contain the code that “requires” the EPC calendar–this could have been a mistake.

    One thing I haven’t tried yet is changing the site’s permalinks setting back to its default setting. Again, this is my inexperience with WordPress showing, but fear that doing this might scramble the references and hyperlinks that exist elsewhere in the system. Could doing this mess up inbound links? Also, whereas I could make do with blog posts having “ugly” URL’s, the static pages I’ve added must be able to retain their “pretty” (semantically descriptive) URL’s.

    Does WP alllow you to switch the permalinks setting at any time, without any side effects or causing link rot? Is it not possible to integrate EPC into an existing WordPress site and retain its original human-friendly URLs?

    Comment by o4tuna — January 6th, 2011 @ 3:42 am

  10. @o4tuna – You got it right. You should insert the $thisFile in the template page that gets created in my tutorial. The variable needs to be set just before the calendar is displayed, so that it is used when the calendar is generated.

    The problem with using the pretty links is that they are usually handled by some sort of URL rewrite filter. What happens there is that it takes the “fake” path of /category/date/post (for example) and convert it into variables that are then passed to index.php to generate the page. The problem with that is that there are no variable handlers for the extra ?mo=1&yr=2011 that the calendar needs to enable navigation. Since it passes variables that are unknown to index.php, you end up with a 404. Only the default configuration of permalinks uses the ?var=value type URL, hence why the calendar needs that.

    What you could do is (I’m not sure on the exact procedure on how you would do that but…) on the page that you created for the calendar, instead of using my tutorial steps, simply have an iFrame. Then link the iFrame to a plain jane regular PHP page that contains only the calendar. That should create the same effect, without needing to mess with your permalinks configuration.

    Comment by ve9graJanuary 6th, 2011 @ 8:21 am

  11. @ve9gra – I finally went all in. I put the $thisFile variable immediately before the calendar require statement. I changed the permalinks setting to its default. Still, attempts to navigate to different months throw 404 errors.

    There were side effects of switching to the default setting; it did break the hyperlinks in HTML code I had used inside the site. And of course, the URLs for pages of which I had manually specified permalinks were being shown with the human-unfriendly (and search engine-unfriendly) “?p=N” format. Happily, I learned that you can switch back to the custom permalinks setting without a hiccup.

    And for the benefit of others who might be traveling down this same path, I am not using a plugin to prettify permalinks . . . I’m simply choosing “Custom Structure” and specifying “/%category%/%postname%/”.

    Obviously, I’ve done something wrong because although I think I’ve followed all of your suggestions, I still haven’t been able to get EPC to navigate to different months.

    I definitely appreciate your help. Also, I sorely need EPC. As badly as I need EPC, though, losing search-engine friendly URLs is something my client can’t afford to do.

    Also, I had already spent tons of time trying use iFrame to make things work before discovering your great tutorials, but trying to use iFrame led to way more page formatting problems than it was worth. Besides, I’m also hoping put a calendar in the sidebar once the basic calendar working.

    I hate to give up, especially since I haven’t been able to get the navigation working yet. I keep thinking there has to be a way–or is it just that so many people are willing to sacrifice search engine optimization for the sake of having EPC?

    I’ll meticulously make sure I’ve followed your suggestions and doublecheck my work against your tutorials again. I’ll report back when I figure out what I did wrong.

    Thanks again!

    Comment by o4tuna — January 6th, 2011 @ 12:47 pm

  12. @o4tuna – It is possible that you didn’t have the right value in $thisFile… That would also lead to 404 errors, even with the proper permalinks config. This variable is supposed to contain what it needs to build valid links. For example “/page/calendar”, or “/?page=calendar”, etc…

    I think that we’ve gone as far as possible by using comments on a blog. You have my email address, and the forums are also available. I would need to actually see the site, and possibly the code that you’ve used, to be able to troubleshoot further.

    Comment by ve9graJanuary 6th, 2011 @ 2:17 pm

  13. @ve9gra – The problem was setting $thisFile to the wrong value. I had set it to the name of the template file that contained require(“calendar/calendar.php”); . . . it should have been set to the “file” for the WordPress-generated page that displays the calendar.

    I haven’t thoroughly tested it or put it into production yet, but so far so good! All indications are that it’s working fine.

    It might be of interest to note that permalinks setting is “Custom Structure”, as described in comment #11 above.

    Thanks for everything, ve9gra!

    Comment by o4tuna — January 6th, 2011 @ 4:22 pm

  14. Hi.
    Ihave EasyPhpcalendar installed and the database is set up correctly.

    In the first part of the tut i can find the head and body tags, so appear to be okay there.
    its the last step in this 1st tut that has me.
    You say:
    open up your sidebar.php and copy one of the entries that make up the block and change it to :

    I am using the twentyeleven theme and can see this in my sidebar.php:

    ‘monthly’ ) ); ?>

    Can you tell me where and what I am adding /changing here.

    Any help appreciated.

    Comment by Tony MallenApril 15th, 2012 @ 7:16 am

  15. @Tony – It’s likely that your theme doesn’t use the sidebar but instead uses Widgets. In that case, you would need my EPC Widget.

    Confirm that you’re using the Widget system, and I’ll send you the plugin.

    Comment by ve9graApril 15th, 2012 @ 7:42 am

  16. Many thanks, Took seconds with the widget

    Comment by Tony MallenApril 15th, 2012 @ 11:00 am