Title: Tutorial: Events List Grid
Last modified: January 29, 2017
---
# Tutorial: Events List Grid
* Resolved [Robswaimea](https://wordpress.org/support/users/robswaimea/)
* (@robswaimea)
* [9 years, 4 months ago](https://wordpress.org/support/topic/tutorial-events-list-grid/)
* Because the topic on this spanned 19 posts… I figured it might be easier for
others to cut it down to this “tutorial”
* **This will be in a grid.**
* **This will be in two parts.**
**Part 1 will be for you site… ie: mywebsite/
events** **Part 2 will be for inserting in a generic post or page.**
* **Part 1** Putting the code in for “mywebsite/events” the default “events list
page”.
In Settings -> Events Events Manager Options –> Formating click ->Events(
it expands to “Events Page”)
* There are three parts here…
“Default event list format header” “Default event
list format” this is like the “body” “Default event list format footer” =====
================================== **“Default event list format header”**
* ```
```
* ==============================
The following code for all this was gleemed from
[http://www.w3schools.com/css/css_rwd_grid.asp](http://www.w3schools.com/css/css_rwd_grid.asp)
* The CSS to make this all work…
Now you also need to know about CSS and where
to put it for all the above to work. Put the CSS in your Child Theme…. or use
a CSS Editor like the one in JetPack, or other type plugin.
* So for the above to work you would use CSS like this below.
* ALWAYS make backups of your files and database before editing files…
while this
won’t hurt your database… it is a good practice to remember.
* ===========================================
**Part Two… Generic Post or Page**
Use the same CSS code as above… Then using “shortcodes” for Events List…. Put
this in… Obviously using the “text” not “vusual” editor…..
* ```
```
* =========================
If you don’t know about placeholders… you need to
learn and know them… [http://wp-events-plugin.com/documentation/placeholders/](http://wp-events-plugin.com/documentation/placeholders/)
* If you haven’t already… learn about the shortcodes will help…
[http://wp-events-plugin.com/documentation/shortcodes/](http://wp-events-plugin.com/documentation/shortcodes/)
* And the documentation…
[http://wp-events-plugin.com/documentation/](http://wp-events-plugin.com/documentation/)
* =========================
ALWAYS make backups of your files and database before
editing files… while this won’t hurt your database… it is a good practice to
remember.
* Hopefully I got the above correct from my previous lengthy thread…
- This topic was modified 9 years, 4 months ago by [Robswaimea](https://wordpress.org/support/users/robswaimea/).
- This topic was modified 9 years, 4 months ago by [Robswaimea](https://wordpress.org/support/users/robswaimea/).
- This topic was modified 9 years, 4 months ago by [bdbrown](https://wordpress.org/support/users/bdbrown/).
Viewing 7 replies - 1 through 7 (of 7 total)
* [caimin_nwl](https://wordpress.org/support/users/caimin_nwl/)
* (@caimin_nwl)
* [9 years, 4 months ago](https://wordpress.org/support/topic/tutorial-events-list-grid/#post-8716942)
* This is great, thanks for sharing. Bookmarked and ready to share next time the
question comes up. Thanks again.
* Thread Starter [Robswaimea](https://wordpress.org/support/users/robswaimea/)
* (@robswaimea)
* [9 years, 4 months ago](https://wordpress.org/support/topic/tutorial-events-list-grid/#post-8717775)
* You are welcome Camin, Angelo, and Marcus and others…
just my part of giving
back.
* And thanks for the great plugin.
* Below is a slightly more complex “layout”….
* And to help others learn… use of “placeholders”
* **This is for a generic post or page…**
_if you would put this into the “Default
Events List…” Remove the “shortcodes” and apply “Header” and “Footer” as described
above.
* Also in place of the “placeholder” #_EVENTDATES I use the Event “date” with
`#
D #d #M`
* AND we are also using the Shortcode of Grouped. “weekly” .. which can also be
daily, monthly, yearly, none.
* ```