-
Notifications
You must be signed in to change notification settings - Fork 0
Shortcode ‐ Examples
L.O.R.E. uses a simple WordPress shortcode to embed maps on your site. This guide shows you all the ways to use it!
Just drop this into any page or post:
[lore_map]
Result: Full-width map at 600px height, centered on your configured coordinates, zoom level 3.
[lore_map width="800px"]
Makes the map 800 pixels wide.
[lore_map height="800px"]
Makes the map 800 pixels tall - great for square maps!
[lore_map width="100%" height="600px"]
Map fills the container width, perfect for responsive layouts.
[lore_map width="300px" height="300px"]
Compact map for sidebars or small sections.
[lore_map width="100%" height="900px"]
Big, impressive map as a page hero!
[lore_map zoom="1"]
See your entire grid at once. Good for very large grids.
[lore_map zoom="3"]
Default zoom - shows good detail while seeing multiple regions.
[lore_map zoom="6"]
Zoomed in for detailed region viewing.
[lore_map zoom="8"]
Closest possible view - shows individual region detail.
Zoom levels: 1 (farthest) to 8 (closest)
[lore_map center_x="10000" center_y="10000"]
Visitors see your Welcome region immediately when the map loads.
[lore_map center_x="10050" center_y="9985" zoom="5"]
Center on a specific area with close zoom.
Page 1 - Residential Areas:
[lore_map center_x="9500" center_y="9500" zoom="4"]
Page 2 - Commercial Hub:
[lore_map center_x="10200" center_y="10100" zoom="5"]
If you run multiple grids from one WordPress site:
[lore_map grid_url="secondgrid.com:8002"]
Overrides the default grid URL for this map instance only.
[lore_map width="100%" height="700px" zoom="4" center_x="10000" center_y="10000"]
Full-width, tall, zoomed on Welcome region.
[lore_map width="250px" height="250px" zoom="2"]
Compact overview map for widgets or sidebars.
[lore_map width="600px" height="600px" zoom="7" center_x="10025" center_y="9999"]
Square map, very zoomed in on one specific region.
[lore_map width="100%" height="80vh" zoom="3" center_x="10000" center_y="10000"]
Map takes up 80% of viewport height - huge visual impact!
Note: vh (viewport height) is a CSS unit - 80vh = 80% of browser window height.
[lore_map width="100%" height="400px"]
On mobile: full width but shorter height (easier to scroll past).
[lore_map width="100%" height="700px"]
On desktop: tall map with plenty of detail.
Pro Tip: WordPress doesn't let you do media queries in shortcodes, but you can use CSS in your theme to adjust the .lore-map-container height based on screen size.
Main Grid:
[lore_map zoom="3"]
Test Grid:
[lore_map grid_url="test.yourgrid.com:8002" zoom="3"]
Each map is independent!
Stop 1 - Welcome Plaza:
[lore_map center_x="10000" center_y="10000" zoom="6" height="400px"]
Stop 2 - Shopping District:
[lore_map center_x="10050" center_y="9985" zoom="6" height="400px"]
Stop 3 - Event Venue:
[lore_map center_x="9975" center_y="10020" zoom="7" height="400px"]
Create a visual tour of your grid!
Goal: Comprehensive grid map visitors can explore.
[lore_map width="100%" height="700px" zoom="3"]
Tips:
- Add a heading above: "Explore Our Grid"
- Include text below with instructions
- Link to region directory or events
Goal: Show visitors where to land.
[lore_map width="100%" height="600px" zoom="5" center_x="10000" center_y="10000"]
Tips:
- Center on your Welcome region
- Zoom in closer (5-6) so it's obvious
- Add "Click the map to teleport!" text
Goal: Show where the event is happening.
[lore_map width="600px" height="400px" zoom="7" center_x="10025" center_y="9999"]
Tips:
- Very zoomed in (6-8) on event region
- Include event details above/below map
- Teleport button makes it easy to attend!
Goal: Show available rental regions.
[lore_map width="100%" height="500px" zoom="4" center_x="9800" center_y="9800"]
Tips:
- Center on your rental area
- Visitors can click to see region names
- Add pricing/availability info nearby
Goal: Let visitors browse all regions.
[lore_map width="100%" height="800px" zoom="2"]
Tips:
- Wider zoom (1-3) to see everything
- Taller map for more detail
- Mention the search box in instructions
These features aren't available but may be added in future versions:
❌ Filter to show only certain regions
❌ Custom marker icons
❌ Different colors per map instance
❌ Click callbacks / JavaScript events
❌ Disable search box or teleport button
Want these features? Request them in GitHub Discussions!
You can customize map appearance with custom CSS in your theme:
.lore-map-container {
border-radius: 20px;
}.lore-map-container {
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}.lore-map-container {
border: 3px solid #2563eb;
}Where to add CSS: WordPress Admin → Appearance → Customize → Additional CSS
Quick reference for all shortcode parameters:
| Parameter | Type | Default | Description |
|---|---|---|---|
width |
size | 100% |
Map width (px, %, em, vh) |
height |
size | 600px |
Map height (px, %, em, vh) |
zoom |
number | 3 |
Zoom level (1-8) |
center_x |
number | From settings | X coordinate to center on |
center_y |
number | From settings | Y coordinate to center on |
grid_url |
string | From settings | Override grid URL |
-
Test on different devices! What looks good on desktop might be too tall on mobile.
-
Use descriptive text above/below maps to guide visitors.
-
Link to your registration page near maps to convert visitors!
-
Combine with other content - maps work great next to text, images, or videos.
-
Update coordinates if you move your Welcome region.
-
Keep it simple - most grids only need 1-2 maps total.
Now that you know how to embed maps:
- Customize Colors - Match your branding
- Set Up Auto-Sync - Keep map updated automatically
- Troubleshooting - Fix any issues
Need more help? Check the FAQ or ask in Discussions!
Share your maps! We'd love to see how you're using L.O.R.E. - post screenshots in Discussions! 📸