Map Results in Oxygen with WP Grid Builder

hey everybody welcome back to another premise log episode my name is jonathan and i'm super excited today to be showing you the wp grid builder map facet which is what you're looking at on your screen here and the reason why i'm excited about that is because this is something that i've wanted for things like a store locator on websites or maybe something like a local directory site where you want the associated address of a post to pop up in a map result like this and especially to have the little pin where you click it and extra data pops up in it this is something that really wasn't possible prior to wp grid builders oxygen integration without manually coding it or resorting back to just a typical theme but now what's cool about this is there's a couple of things that you can do with the faceted search component of it so as you can see i have these categories which are basically just the taxonomy category attached to these posts so if i click something of course my repeater is going to filter out but also my map here so i'm only left with two posts the other thing i can do is take this little box that says search as i move the map so let's say i zoom in a little bit then of course my repeater is going to update and the only thing i'm left with in the history and this region of the map is this particular post right there which is really neat so i'm actually going to go down here a little bit and just zoom out so i get everything back in here and then let's go just click on the nature category and then we'll just type in something like bat and you can see how it kind of combines filters like that so this is really neat basically what you're looking at here is just the oxygen repeater with a custom post type called locations and then a few acf fields for some of this data like the phone number and address and that sort of thing a little bit of custom code to get this info in the pop-up and then the wp grid builder facets which are the search this categories one and then the map that's about it if you're not interested in following along in this tutorial you can use the link in the description below to be taken to the premise log website if you're a member there go ahead and log into your account and on that post you'll see the export of the short codes and also the acf field group so if you want to take advantage of that and just basically import exactly what you're looking at here into your own site you can do that using the link in the description below but i am going to walk you through how to do just about all of this so let's go ahead and get started as i mentioned we're going to be using the map facet for wp grid builder so go ahead and take a look at their site if you don't already have it and check this out so let's just go ahead and move into our sandbox install so these are the plugins we're going to be using custom post type is what we're going to use to create our cpt called locations advanced custom fields i don't actually think you need the pro version for the google map field we're going to use but i always use the pro version so i would recommend it anyway and then of course we're going to be designing the site using oxygen i'm currently using the 37 alpha because it's relatively stable but this also is not a production site and then i just prefer the classic editor as you can see now of course we are going to use wp grid builder but i want you to see how that works from the very beginning with no settings set up you know on basically a clean install we're going to walk through that because i know some people had a few challenges related to getting that actually working i'll just activate that and then what you're going to want to do is go over wp grid builder and under the add-ons section you need to activate your license so that you can install the map facet add-on so i'm going to go ahead and do that real quick okay so now that i have my license activated the map facet install button is working so i'm going to go ahead and click install and then activate once that pops up then we need to do just a couple other things so in the settings of this particular plugin if you're using oxygen you need to make sure to come down here to facet and indexer and turn that setting filter custom content to on go ahead and save that and then in terms of the plugin settings that's all you need to do for this particular moment okay so now we need to do a few more setup things before we actually start creating our facets so we're going to go over here to cpt ui i'm going to go to add edit post type and this is the one i'm just going to call locations again plural label is locations and singular is location so we'll add that post type in then just go immediately over here to the edit post type we need to do a couple of things if you have more than one post type just make sure you have the correct one selected we need to go down to has archive and set that is equal to true and then we're going to go down to the very bottom and turn on the taxonomy support for the wp core categories so that we can use that for our filters on the front end just save that and that's about it now the next spot we're going to go is to oxygen settings and what we need to do is put in our google maps api key here because we are going to be using the acf map field which requires a google maps api key but because we're using oxygen we can actually just paste our api key right in this field here and acf will pick it up for us which is pretty cool so there is my api key i'm just going to go ahead and save that guy there and now we'll be ready to go ahead and actually create our field group in acf if you don't have that when you go to the map it's basically just going to have this big box that says you know not authorized and it won't let you proceed so just make sure you have that google maps api key in here all right so now we're ready to go create our custom field group so i'm going to go ahead and add a new field group here we'll just call this locations data or something like that i'm going to set this post type is equal to location and then i usually like to set the position to high after title and we need to do a couple of things here so the first one first field we're going to add in here is just going to be called address and that will be a plain text field the reason why is if you use the map field and try to import that and you just want the text out of it it doesn't really work because on the front end you get both the map the coordinates and the full address which is kind of clunky so just as like sort of a hacky work around i just added a text field as well and then we're just going to create another field we're going to call this address with map and then the field type let's just go to google map so it's under jquery if you click on that go to google map you'll notice you have the option to center this latitude and longitude don't worry about any of these settings because wp grid builder is going to take care of that for us the only reason why we need this google map field is because the facet for the map in wp grid builder requires coordinates and this outputs the coordinates that it needs to actually plot those pins on the map otherwise if you don't do this you just get basically nothing on your map which is a little frustrating but eventually i figured it out and you have to use the google map field so the other fields that i had in here was one just called features just like a basic text block and then i also had one for phone i think i actually called it phone number so i'm going to be consistent and just make it phone number like that and i'm just going to go ahead and publish this field group so now is the point where you would want to go ahead and add some posts into your location post type that we made so of course give it a title this is just the plain address field and this is the google map that we added earlier this is where i was talking about you're just going to get this error message right here if you don't have that api key in oxygen settings so this is what it's supposed to look like when it is working properly and then there's our other two fields i'm going to skip adding this in on camera and just jump to having a few fields already set up for us okay so i got a few of these posts in there so i'll just show you what one of these looks like so we just have the regular address in here and you can actually format this to be however you want if you wanted to drop off the zip code or whatever since it's just a plain text field it really has no bearing on what we're going to do on the front end this is where it does actually matter though so just make sure you choose the proper address and your map pin is where you want it to be i have the category set got a featured image put some data in these custom fields here and then this is just our description that's going to pop up in the map pin and this is just the wordpress content editor so all these posts look like that and now we're actually ready to go create our first facet so let's go to wp grid builder we're going to go to all facets and then we're basically just going to create a new one so the facet name this is just in the back end here so we're going to call this map results and then your facet title is only going to appear on the front end so if you want something to appear above the map you can do that i'll just go ahead and just show you what that looks like we'll just type in map results so we'll add that in this wasn't in the demo earlier but you can kind of see how it works make sure you click on the save so you actually get an id on this facet there you can see it went from zero to two i know some people had trouble getting the facets to load and i have to assume like i did you accidentally added the short code too soon so you got id equals zero instead of what it actually is supposed to be so too in any case just make sure you get that id correctly and we're gonna go over here to the behavior tab so because we have that add-on that we enabled earlier we're going to set filter is equal to map and then what we need to do is change the data source to custom field host field is good and we're just going to search address so address with map is the one that we want because that's the one that has the acf map field attached to it for our map api we're going to go to google we're going to put in our api key again and then we will turn on map filtering the map results you can either change to display markers that are on the current page which would be pretty much contingent on how many results you show in your repeater whether it's 9 15 20 whatever you want so i'm just going to go with display all markers since we don't have that many posts you do have the option to change the map style which is pretty cool the road map i think looks perfectly fine and because our map is going to be a square i'm going to change the aspect ratio to be one to one like that but as you saw it can be 16x9 4x3 5x7 whatever you want it to be layers is pretty neat if you have points of interest on it's going to show things like capital buildings and other you know landmarks like that transit and traffic are pretty self-explanatory let's go ahead and turn on bicycling because i didn't do that before and then the coordinates you can set kind of the center point if you want but otherwise it's just going to kind of center the map based around all your points that it plots for you default zoom let's crank that up to like 14 or something and then if you want you can set a minimum and maximum zoom as well now the behavior that it comes with on the drag to pan and the scroll to zoom i think it's good to leave those on because otherwise it's a little clunky sometimes if you click on a map pin it will push some others off and if either of these two settings are turned off then it becomes nearly impossible to find those other map pins again without refreshing so just keep that in mind panda search is what i turned on earlier where as you move the map the repeater is going to update so we will go ahead and turn that on and then here is all your standard controls so zoom you would want to leave on probably scale probably not full screen well actually maybe the scale you would want but full screen probably not rotate no we'll do map type and street view just so you can see it marker content is what's actually going to appear on the little tool tip when you click a map pin so we do want that and then the marker icon i uploaded just basically like this png that's not actually a true png so forgive me for that and that's basically it so now we can just save the changes on this one and then before we leave here i'm actually going to go ahead and just create a new facet and this one is just going to be a basic search field so we're just going to call this one search pretty easy our facet title will just be search again i'm going to save this and just move over to behavior filter we're just going to set to search field and then i basically have to do nothing else instant search you can do but i personally am not a fan of that so i'm just going to save this and then let's create another one let's go create one that will work for categories so we're just going to call this one choose category and actually we'll set that as the facet title as well let's go ahead and move to behavior and let's do something a little interesting in the demo earlier we used the buttons so i guess that'll work again we'll just do the buttons and it's actually just going to pull the data source as the taxonomy by default so once again you don't really need to make any changes there you can include or exclude certain terms if you want which is really neat filter logic whether you want them to be kind of combined or separate multi-select we could do that in this particular case because we have so few posts that won't really be applicable so i'm going to leave that off and then all these other choices are relatively self-explanatory but as you can see all very useful and powerful so we'll just save that and now we have three facets so we'll come back to those short codes in a little bit so now we're ready to go ahead and create our oxygen template so i'm going to create a new one here just called locations archive and i'm going to basically ignore the header and footer for now perhaps in the future i'll make a video on like a full directory but basically i'm going to go to archive set the post type to locations and publish it and then we will get started editing this with oxygen so of course earlier i mentioned that if you want the short codes for this template to basically build it out of the box for you if you go to the premise log website at the link in the description below basically what you can do is just take those short codes pop them in right here publish the template and then what you'll have is exactly what we end up with on this demo but in any case we'll hit edit with oxygen all right so to start off with we're just going to pop in a section let's make this background color like slightly off-white and then i'm just going to pop in a shortcode element this will be kind of our first facet here so actually let's open up a new tab go to grid builder here and grab our facet shortcodes so as you can see we have our short codes here and if you just click on one of them it's actually going to copy that shortcode for you so now what i'm going to do is move back over here paste in that short code and you'll notice it says the grid id0 it can't find which of course that would be the case what we're going to need to do is change this 0 to wp gb hyphen content wp grid builder content and it's not going to find anything right now but that's a step for us to save later and it's actually nice that you can see the preview of the facets in the back end which unlike facet wp you can't i'm going to go ahead and just duplicate this short code and then our other one is just id4 so all i really need to do is just change the id there and then i'm going to set this to be horizontally aligned we'll just go space around i'm going to decrease the padding here to like 25 pixels something to that effect is perfectly fine and then we'll add in a new section here so in our demo earlier this section was actually full width so we'll go to advanced size and spacing and set this to full width we'll leave the left and right padding so it's not completely pushed up to the edges and then we're basically going to build our own column layout so we have a bit of a gap between the two columns so we're going to go to add div and set this one's width to 100 inside this div i'm going to add in another one and this one is going to be set to 48 width the reason why is i'm going to duplicate this again and then in our parent div here if i open my structure panel a bit on this parent div i'm going to set this to horizontal and then space between and as you can see that leaves a bit of a white gap between these two columns which is kind of hard to achieve with the built-in columns elements so i do like to do this even though you kind of have to control your responsive sizing manually not that big of a deal to me though so now what we're going to do is go ahead and pop in a repeater element and because we're in the archive post type 4 locations you can actually just leave the query set to default but this will work with a manual query if you want to set things like order by or you know post count or that sort of thing but you can also create those facets in wp grid builder as well to handle pagination and set all that kind of stuff for you so it's not necessary that you do it as manual but you can if you want to so inside this main repeater div here i'm going to go ahead and pop in an image element this image we're just going to use as the post featured image and we'll set that as medium underneath this i'm actually going to add in another div i'll show you why in just a minute so inside of this div i'm going to pop in a heading we'll make this tag h2 and the font size will set to like 24 and then we'll use the post title here underneath that let's just pop in a link wrapper then i'm going to add in an icon this icon will just be a phone and then we'll set that to like 25 and then it's blue because it's inside of a link wrapper which i'm not too worried about but i'm going to pop in a text element let me expand what we're doing over here so you can kind of see this we're getting kind of div section going on but we have our link wrapper here with our phone icon and some text set this to horizontal and then what i'm going to do here is in this text element go to insert data advanced custom field and we'll go phone number and then let's just add in a little margin on the right side of this icon maybe like 8 pixels and then on the link wrapper i want the text to be more gray than black so let's just go something light like that it's perfectly fine and then this link here what we can do is actually just go insert data advanced custom field and phone number and then all you need to do is just put tel tel whatever that is called colon apostrophe colon yeah colon um and so now it's going to make that phone number clickable on the front end what i'm going to do from here is basically just add 8 pixels of margin i'm going to pop in just a regular div this time because we don't necessarily need the address to be clickable and actually i need to pull that out of my link wrapper so we're just going to pop in another icon here this icon will just use as like a map pin we'll set that to icon size of 25 8 pixels on the right there and then text this text is just going to be pcf and then it's going to be just the regular address field and then once again we're going to set this div to horizontal alignment we'll just set that to middle just in case and then we'll use 8 pixels of margin underneath that last but not least let's go ahead and just add in a text link here this text link we're just going to use as the posts permalink and then we'll just say like read post something like that all right and then the other thing was this div had a different text color so i think that was seven like that so now the reason why i added all this other content in a div here is because i want to add some padding so let's go like 15 pixels of padding all the way around and then the main repeater div here go to repeater grid layout grid we'll set that to column count of two and then more or less what i wanted is there to be padding in between the edges of the text and you know the outside edges of this particular row but i didn't want the images to be pushed in so now what i'm going to do is go to this div and let's go to borders first we'll set the bottom left and bottom right borders to 5 pixels and then we'll go to effects box shadow just do like a light 0 5 and zero and set the opacity to like 10 percent now we have a little bit of a box shadow effect behind our cards there now of course our images do kind of have a different size here so one thing that you could consider doing is using a div instead of an image so go to the div you could set that to 100 width and then let's define a height here of like 250 pixels actually that's probably too much because this card is pretty small we'll go 200 pixels background once again the post featured image we'll set as medium large and then i'm going to set this as cover and then we'll go no repeat and then top 50 and then left 50 i don't think it's actually going to matter all that much but that looks pretty reasonable so now all of our images are going to be pretty much the same size that looks much better to me the other thing you could probably consider doing is decreasing some of these font sizes maybe a little bit too small but just for the sake of example to kind of clean things up a little bit all right so that's good enough let's save real quick and let's just take a look at the front end on what we have so that's what it looks like on the front end looks perfectly reasonable and actually our filters should already be working so if we click on nature here then you can see it's only going to filter out things that are in the nature category if i go to food i'm just going to get our pizza post type history race tracks etc okay so now we're ready to go ahead and get that map facet added in over here so let's go over here to this right hand div all we need to do is pop in a short code element go back over here to our facet and grab that real quick that one was the id of two and then once again just change this zero to wpgb hyphen content and then sometimes the map has a little like you know it's basically doing this where it like glitches out it kind of disappears it will flash a bunch but on the front end it's probably going to end up working perfectly fine so let's expand this shortcode real quick and we're going to set this to 100 width you don't need to worry about setting the height because it's going to do that for you so we'll save real quick and go look on the front end and there it is so i'm not sure what i put on here i guess maybe it was transit that made this map look absolutely terrible so i'm gonna go turn that off real quick we'll go back over here to the map results and then the behavior we had uh maybe it was bicycling actually sorry cyclists nothing personal all right there we go looks much better so there is our plot so far here in austin texas which is really cool so you can see these pins are spaced around the map and like i mentioned earlier this is not a true png so we're getting kind of a white bleed effect but that's just my map pin now if i go ahead and click on one of these map pins you can see what it has by default is the post title and the post description we can modify that with some custom code once again you'll find that at the link in the description below but what we have is a really cool map filter here so if i go ahead and click on food what you're going to find is the map automatically updates to basically show the only post that we have for food so let's change it to something with more than one like this nature category so funny enough these two pins are relatively close together but you could still zoom the map out a bit kind of get a handle on where you are in the town and then the other thing that's really cool is if i tick search as i move the map like i showed you guys earlier then you're going to see your repeater results start updating in real time assuming you're not like me and haven't selected a category with only two posts but if i change that back just to demonstrate if i zoom in down here then you can see there's that one result left which is the race track so what i love so much about this is in oxygen there's just nothing special that you really have to do you know we didn't have to do any custom coding to get the repeater connected to the map results in fact we didn't even have to add a custom class to the repeater the only thing you have to do is just make sure that your shortcodes are set to the grid of wpgb content you can customize that but that's for another video so we won't touch on that today now one thing i wanted to show you is on the front end if we take a look at the transition effects here it just has kind of that instant effect but if you want there to actually be some sort of like you know sliding transition effect to it we can add a little bit of custom code this is going to be from mike from super design so again you can find the link to his site in the description below he was gracious enough to let me reuse this code that he has on his site so all we need to do is just basically anywhere on your site you know on the page we're going to stick a code block for the php section we're just going to comment this out and then we're going to add some css and then we're going to add in a little bit of javascript as well so now if we save this and go take a look on the front end then when we change the cards here you can see there's that nice little transition effect so things kind of slide in a little bit instead of it being sort of that instant appear and disappear effect so that looks pretty nice i think the only caveat to that is whenever you move the map it does refresh the results every single time even if there's nothing that's actually changed so that is a downside just kind of whatever you prefer personal opinion on that and then last but not least in the demo what we had was a sticky map so if i get this stuff out of my url bar there then what you would want is the map to kind of follow you down the page as you scroll that's super easy to achieve so what we're going to do is add in just a little bit more custom css to this page once again you can find that at the link in the description below so this css is basically just going to assign the sticky function to whatever class we have here so i'm going to change this to map hyphen sticky this code i used in a different tutorial a long time ago but now all we need to do is go to that right hand column div here and just add a class of map and then hyphen sticky like that now we can save take a look on the front end and we might not get much of a scroll effect here but you can see the map does kind of follow you down the page which is pretty neat like that a lot okay so lastly what you need to do to actually edit what's in the map pin here is you have to add a code snippet to your site so we'll go over here go to plugins code snippets go ahead and install and activate that what we'll do from here is go to snippets add new and you can just call this like map and data and then this code here is basically just taken straight from the wp grid builder documentation but as you can see what it's doing is pulling in the title it's wrapping that in its link and then it's adding a class here so if you wanted to modify the styling a bit and then there's also the excerpt that is trimming to 26 words and then there's a class for that now i did do some modifications that you saw in the demo at the beginning of this video to get a few custom fields in and some basic text if you want that link in the description below but this is how you can get started here and you can check the documentation on wp grid builder for that so hopefully you enjoyed this particular tutorial i'm very excited at the power of wp grid builder just seems like a really well thought out plugin and so far everything that i've tried i've been able to accomplish which has been fantastic as always thank you so much for watching and i'll see you in a future video

Channel: Permaslug

Views: 3,661

Keywords: map facet wp grid builder, oxygen builder map results, multiple map pins, acf map field

Id: JxacxWhRB7c

Length: 26min 16sec (1576 seconds)

Published: Fri Jan 01 2021