Customizing Events Widget on WP "pre-made" template

[Aaron]

Hi all,
First and foremost, let it be noted that I’m a novice when it comes to using wordpress.

Now that is out of the way, I am trying to figure out how to customize the upcoming events widget. If it matters at all, my wordpress site template was premade and provided by my site host.

I was reading through several articles that mentioned “php” stuff, and another forum where it was suggested to someone that they should download a php widget to modify certain templates. OH SO CONFUSING!!!!

Either way, any assistance would be greatly appreciated.

[Jonah]

Hi Aaron,

I won’t be able to walk you through all the steps and possibilities but I should be able to give you a little more direction to get you pointed in the right direction.

What sort of customization are you looking to do?

Thanks,
Jonah

[Aaron]

Hey Jonah,
In short, I want to be able to have my side bar widget appear to be (or look as close as possible) to something like this…link below.
(http://s.wordpress.org/extend/plugins/all-in-one-event-calendar/screenshot-12.png?r=599037)

Is that possible or am I dreaming?

[Jonah]

Hi Aaron,

That’s definitely possible but it’s going to require a lot more than we’re going to be able to assist you with. There’s two main components to making customizations, there’s the CSS and then the PHP. You only need to mess with the PHP when you need to change the way or type of information being displayed.

For example, grouping multiple events on a specific day like in this example. Our widget doesn’t do that, so you’d need to rewrite some of the PHP to customize the query. Basically, all of the views template files that you can do this for are located in /wp-content/plugins/the-events-calendar/views/ (for the base plugin) or /wp-content/plugins/events-calendar-pro/views/ (for the PRO plugin).

To make changes to the PHP or HTML in any of them, just make a copy of the file you want to modify and place in an ‘events’ folder in your theme. You can find an overview of all of our views here: https://theeventscalendar.com/support/documentation/events-calendar-themers-guide/

To make changes to the CSS, I would recommend just adding CSS to your themes style.css file and overriding existing styles by applying a higher specificity: http://css-tricks.com/specifics-on-css-specificity/

Hopefully that points you in the right direction and good luck!

Cheers,
Jonah

[Author]

Posts