Expanding WordPress – Pods

well good afternoon everybody we are just a few minutes away from getting started I'm still setting up a few things here in the studio we'll start right at the top of the hour for members of WP studio definitely join the private chat there on our regular chat room that will get information directly to me ask your questions there if you're joining us on either YouTube or Facebook welcome we'll talk a little bit more about that after the webinar so we'll start right at the top of the hour three or four minutes to go you'll note we're really live and the little banner that says starting soon goes away so go ahead and grab a cup of coffee and we will get started with our pods webinar extending WordPress shortly in just a minute or two I will turn on the screen share so that you can follow along with our live development if you've never been on a WP studio live event you'll know that I don't cookie cut anything everything we are going to develop from scratch I might show you some examples but we are gonna be working on a live web sites there's no better way to learn than to actually do it in practice so about two or three minutes to go I'll go ahead and share my screen you should actually be looking at the pods website hearing my voice and I'll go ahead and flash up a nice little banner there [Music] all right for all members of WP studio don't forget to join me on the private chat room at WP studio comm forward slash chat all others I hope you will enjoy the simulcast to both Facebook and YouTube we'll talk more about that at the end so we've got about another minute to go for a minute or half to go before we get started when one o'clock hits it we should drop the starting soon banner and we'll be off to the races working with the pods plug-in this is just kind of our pre-show banter have conversations hope you are all doing well this Wednesday that you haven't gone stir crazy stuck in your homes but if you haven't been shopping to a grocery store lately you'll know that I think everybody is baking because there's not a single packet of yeast or baking soda to be found for my members of WP studio yes you can go fullscreen I believe you should be able to click on the youtube link if not head on over to the WP studio youtube link and then you can open the chat room in the same chat link that I sent to you in your email all right it just turned one o'clock so let's kick this off and get going here so good morning good afternoon good the evening welcome back to another live WP studio training event this is a special event because we are not only broadcasting to the members of WP studio but also simulcasting to the YouTube and Facebook channels of WP Studios so welcome to the new attendees will talk more about that later today just to give you a a brief overview of what we are going to do this webinar is part of a series of webinars we're doing here at WP studio looking at ways to extend the capability of WordPress yes we'll be looking at how to do it with plugins we'll be looking at how to do it with code but the premise for this whole series of webinars revolves around the concept that for many people developing with WordPress building websites blogs client sites simply using the blog post and the blog or the WordPress page are limiting those so two of the the primary post types that are inside WordPress and so there are times we have clients who need custom solutions like articles maybe it could be press releases maybe it might just be status updates that might not be a traditional blog or a page so that's what we're gonna be doing today we're gonna start off by taking a look at them kind of the basics of pods we're going to then look at how fields fit into pods and then I don't want to leave you hanging we're gonna also then look at how to see the fields that we create on the front end of WordPress and then we'll do drive into a kind of like a real world example which we will build so again all Maat the members of WP studio you can find our private chat room at WP studio comm forward slash chat and for those of you joining on you Tube and Facebook welcome we'll talk a little bit more about that at the end so without further ado let's dive off into the deep end and start to look at the basics of pods so the basics of pods revolves around a plugin that we can install in our WordPress site now you can either download the PAS the plug-in directly from the pods IO website download it right here or it's easy enough if you go into your WordPress site and you can search for the word pods and you can install pods directly from this location now just to alert anybody if this is the first time you've installed pods in a long time or the first time you're coming back the pods team recently added integration with the free meais plugin or the free meais framework I am NOT a big fan of free meais because of all the stuff it does in the back end but just to let you know that you're perfectly fine you can opt out of all the tracking if you don't want free meais and pods team to be tracking different things about your use case as well as some future sales opportunities that pods is bringing in so I just wanted to put that out there so what I'm doing is I have a pre-built WordPress test site and we are going to go through and install pods which I've already done and we are going to look and see what happens so when we install pods we are all set to have a pods section here an admin menu area most of the time if this is the first time you are seeing pods you are going to be seen this page which is basically at a point where we can create a new post type or we can extend something we're gonna start with creating and then we're gonna extend something just so you can see the two differences in pods most people out of the gate if this is the first time you're using pods you will be wanting to create something new this is that illustration I gave at the very beginning where you have a client or you have your own site and the client says you know what we need to release press releases and so we don't want to put it on a page we don't want to put it on a post we want to create a new content structure now just as a we're gonna take lots of rabbit trails during this type of a webinar the way WordPress stores data the content it's in a database and the backend of WordPress operates like a data entry point this is we're filling out forms in which to save content into the database now the themes which we'll look at towards the end of this webinar is how we pull information out of the database to display it to everyone so to make our life easy we're gonna create new data structures where we can enter information it will be stored in a unique manner that is slightly different than posts for example and I'm just gonna you jump over here to the post area if we are writing a post in WordPress and we come here we have our title we have our content we have our categories over here on the right we have our tags we have our featured image we have other things like SEO and discussion options and there's all sorts of things that are very specific to the posts so when and and when we add something to the database using this it stores it as a post so that on our front end on our theme we're able to say go get me all the posts that are stored using this entry point and then we're going to display it so with pods when we go add a new pod we're now saying hey we're gonna store some information in the database as a press release which we're gonna create here just a moment and it's going to store all those things with similar systems so that on the front end using the word press loop and the query we're able to say go get me all press releases and then we can display it that's that's kind of the storage at a ten thousand foot view all right so when we create a new custom post type I can simply just say am i using a post type that's like a post or a page am I gonna create a taxonomy which I can link to posts or pages I like to think of taxonomies these are our file folders or sticky notes that we would put on to each one of the posts so that on our theme and our query we can begin to filter we can say go get me all the posts that have a category muffin or something like that now in this today's webinar we're not gonna be dealing with the settings page at WP studio we have done a lot with showing how you can do settings pages sorry so let's create our first post type and to get started Potts makes it super easy you just have to say what type of what's the name you're going to use and so we're gonna do press release press releases say oh you say that was we hit next step and before you know it on the left hand side we now have press releases that are ready to take our data entry entry and it's gonna then save those in the WordPress site now quick overview you have a few of the other items so we can set up our new custom post type in a unique format that makes it more user friendly so I want you to know about three areas we'll deal with the fields in just a bit but there's labels admin UI and Advanced Options and at the end of the webinar we'll deal with templates the labels are where we can change the way WordPress displays the labels in front of different forms so what we're gonna do to make life easier I'm gonna open up two two windows so we're gonna have an add new on press release so notice how it says add new press release here might have other thing I'll press releases add new these start these are labels so if I look at this and say oh here's something that says add new press reliefs what if we're dealing with a client or a company that is very particular about what they want or maybe we want to help them out slightly different so with this add new press release we are going to see let's change the name or the label to prepare a new press release it's slightly different but let's just save this and immediately we are going to see you know no major changes here still is there but if we go back to this add new press release and we refresh we're now going to see it's a prepare a new press release notice how I haven't touched any code and we have now been able to modify the output or the use case for our clients this is this is why one of the reasons why pods is so useful to anybody doing client work because we can provide customization without the need to spend hours in our code customizing things with WordPress action hooks and filters and everything else like that all right so that labels are there you can see that you can go through in every single instance of generated content that would appear in the admin screen we can change all that now in admin UI this is there's several things I want you to know about the admin UI is the user interface that exists that tells pods where to place our press release stuff and there's I'm gonna focus on just a few key areas the first one is this menu icon by default the menu icon is just gonna pods it's always going to use this little thumbtack now WordPress for years and it will continue to be so ships with a pre-built or icon library it's called - icons you can learn more about that if you actually go to developer don't work press dot org /resources /resource find something that looks like a press release he doesn't you don't have to use anything that says quote press release but we can jump through here and say you know what let's just use a simple item let's do this globe here I need this right here - icon - admin now let's go ahead and copy this because I go back here to my menu icon just paste the - icon that's here save and you will immediately see that oh look at this we will have once it loads did I pick one of the brand new - icons that don't exist yet I did so - icons just got a huge update where they added about 36 new - icons and I just happen to pick the one that is not has not been included in the current version of WordPress so I'm just gonna grab a different globe that I know works so we'll go back to the admin UI let's change it and save we'll wait for the page to reload and I'm wondering if I have a caching issue it's just I'm just checking to see if it's hidden there all right well let's see this is the great thing about live webinars now we get to go down another rabbit trail well I try and figure out what in the world did I just do so let's do the exactly their example star empty let's see if that will pull up a star empty all right what we're gonna now do oh I think I know why guess what I am connecting to the insecure version of our test site all right so again if you've never been on a WP studio event I always work on live sites and so therefore what we've just run into is something that you'll probably run into if you are working with test sites and okay I just what we're looking for is making sure we're trying to figure out why it's not secure so we have a certificate and it looks like there are some images that are being pulled in from the site that are not secure all right so this is the first thing you do if you ever run into this you need to check and make sure what in the world is going on are you do you not have HTTPS on here looks like we do so therefore we're going to come back over here where my pods go we're going to edit our press releases somebody made a great suggestion that there was a space in front and and that's exactly what it was so thank you Ben on the chat room for pointing out the obvious sometimes you just have to go and dig in and try and figure out what's going on so notice what happened after we got rid of the space we now have secured things so what it was trying to do is trying to load a - icon that didn't exist so therefore it couldn't grab the actual image because currently - icons are font icons return by definition icon images the future version of - icon is going to be an SVG system so you won't ever run into that in a future release of WordPress alright so there's our little rabbit trail for those of you watching on the live feed or the replay on YouTube or Facebook thanks for hanging in there okay so let's get back here so the admin UI is very helpful on if you do it correctly adding your menu icon and then we can change the location if you've never played around in the admin menu here on the left hand side you should just know that everything basically starts from a number 1 to 2 to 100 or any number that you can do so if I want to change the location of this I can simply add a number let's to a menu position of let's 200 I'm going to save this and you're gonna see that our press release is going to move down here there are identifying numbers of priority on how these menus are constructed and placed so by giving it a specific number we can move things around you also have controls on whether or not you are going to show things in the navigation or not show it in the admin or not those are all benefits so other things before we go into dealing with fields is the advanced options for today's webinar we don't need to deal with anything we'll come back to this archive page but if you scroll down here you can see all the different capabilities and functionalities that we can add to a custom post type created by Potts if you want to learn more about this we have much more in-depth webinars at WP studio but over here this is how we can choose how what type of supported functionality we're adding to the custom post type press releases so by default it's always going to have title and editor that's that content area and the title box but these are things that might exist on regular WordPress posts or regular WordPress pages the author featured image and custom fields comments post formats if you decide you want one of these for your content or for your custom post type you can simply just enable it we're not going to do that right now so once you've done that save the pot now pods has the ability to you can one of the reasons why I like to use pods is this functionality I'm going to explain to you if you write encode a custom post type which you can put it in your functions dot PHP and put make it into a plug-in if you want to make changes you have to go rewrite that code or insert that code if you want to change any of your custom post types add functionality change functionality pods allows you to manage them within a management screen like this where we can easily edit we can easily add fields we can easily subtract fields we can easily customize the functionality so that's one of the reasons I really enjoy working with pods but before we get into fields I want to show you the benefit of using pods is because I can extend something that already exists in WordPress so I can come and say you know what any posts that you currently have now we're not talking just rake your WordPress pose so regular WordPress pages I'm also talking about custom post types that might be built by other plugins so maybe you have a plug-in you're using that creates a custom post type but you wish you could add an additional field because you let's say you're you're using a camera photo blogging plugin but for some reasons they don't have a field that you can enter the location you shot the photo at well with pods we could go in and we could extend that now for this example I'm just gonna come in here and say alright let's go ahead and extend which these are all different types of custom post types that are on this site we're just gonna custom we're gonna update and extend the regular WordPress blog posts so I'm in the extend I'm configuring it I selected the post type I want I click next step now notice how I can't really go in and change the user interface the admin options because we are not changing how posts work in WordPress we are simply adding additional fields that we can use on the front or on the data entry and then we can insert it into the look and feel of the site so when we look at how to add fields to a pod whether it's an extended pod or a new custom post type you're Korean with pods everything revolves around these fields so we're gonna do this with our extending of regular posts when I hit add field we are given a four tab option and the dip and the the options that appear will change based on the field type we add so now I just saw a question pop up what a post formats do this is an old thing that basically got abandoned by most theme developers and WordPress but it's a element of regular wordpress posts that people could say hey this is just a quote this is a status update that's what post formats do but it requires the theme or the developer to stylize the output of the different type of posts basically without going into too much detail it was word presses attempt at having a competitive competitive elements of tumblr and the way tumblr did all right so let's jump back here in the fields we are adding an additional field to post so let's let's go back way back we're going to turn regular WordPress posts into MySpace updates so if you remember the old MySpace updates you would also do I'm feeling whatever so our label is how are you feeling today so how whatever type of field are we gonna do we could offer a plain text a link to a website put our phone number down we could do a paragraph text we could add a visual editor for people to use we could do any type of field there's a lot of different options so we're gonna do two or three different things so I'm gonna use a plaintext I'm gonna leave that here but I can come over to additional field options and let's limit it to a hundred word 100 characters because we don't want somebody just writing an entire blog post in their feelings this is we're trying to keep it a little more manageable I can come over here into the Advanced Options again this allows me to restrict who can use it what you can do who sees this this field pods has ultra fine-grained controls so that different roles that exist in WordPress could see different fields on the same post type so there's some really cool things that you can do with that so I'm gonna just go ahead and save this and let's add one more just so that you can see and if there's several different types of fields that you can deal with so I'm going to add another field and let's do let's what time of day the reason why I'm picking something is I want to do a simple relationship so basically a relationship is a field that has other fields that it can fill in sure I can connect this to other posts other things or I can do a simple one which is going to now turn it into a drop-down list so morning afternoon evening night save this now when I save this pod notice how I have several different fields we're gonna come back to this but I want you to look at this middle column right here under name at the end of this webinar when we begin to display this content on the front end of in our theme we need to know what these are because these are the identifiers zuv this cific field so when we enter content we have stuff here we need to be able to pull this stuff out of the database without being a super coder all right let's go back and take a look at our posts so I have a few posts here that have already been written and these were written in prior webinars so there's some crazy stuff in here I'm gonna edit this the reason why we're gonna do this is I want to show you those two additional fields that we added so if I'm gonna come down here you're gonna see these more fields now ignore all this stuff there are different ways you can customize the backend of WordPress we're not gonna deal with that today but I just want you to see look I now have the ability to how are you feeling today I'm feeling very happy and then I can say alright it's the afternoon notice how with regular WordPress posts you couldn't do this but now we can add additional fields we can add new functionality so I'm gonna update that so now stored in the database are these additional fields that are now automatically associated with this specific post all right again let's talk about adding fields to the Pope to posts because now we need to customize what these press releases look like so if I went over here to this add new press to release the one that we just created basically what we're looking at is the title the content now this is dealing for this is from the the plugin this is sorry this is from the theme this is from the SEO plugin so I'm turning those things off just so there's not confusion these are coming from other themes and plug-in elements alright so we need to customize things that revolve around the press release so we're gonna go back to our post we're gonna edit our sorry we're gonna go back two pods we are going to edit our press release so things that we would have here is maybe we need to begin to say alright let's add a field that is let's create release date okay so we got a release date let's go ahead and put a date on here and you're gonna see that because we selected date we can predefined the format how do you want that date to output what about if you want to set a certain year range because you don't want them to have the the entire range of the the date that the years you know we don't need them to go all the way back to nineteen twelve or something so you can actually see that all we have to do is figure it out all right we're gonna do 2010 through 2030 those are the only years that you can select you can see how that's done right here now I'm gonna save that and I'm gonna come over here and say let's say what else we need we need things like PR contact so this PR contact is gonna be a name so name of contact you're gonna see what that looks like in just a moment and then most PR press releases also have PR phone contact in which case I am going to now say that this is a phone number reason why we're choosing that field is I can come over here to the additional fields and select a format notice how these additional field options that allow us to pre format and filter and verify validate these fields all change based upon the field I choose all right let's go ahead and save that now if I want to change this maybe if I just want what about if it's international you know different countries are gonna have different validations so basically if you're doing international phone numbers can be added it's too difficult to validate every single type because like a u.s. phone number may not validate against a Nigerian phone number or something so I'm going to go ahead and have I'll just use the very basic format save that field all right let's go ahead and save the pod and now when we refresh on our press release the prepare a new press release we have the ability for us to add our release date our PR contact notice how it has a description there that should be helpful that this is the name of the contact so let's fill this press release out super muffinz discovered this is absolutely an amazing time to be alive because you get to see how horrible of a speller I am luckily grammerly to the rescue okay so we can come down here to our release dates notice how because we chose a date we get a drop down making it super easy for our clients to deal with this and bob-bob arson is the one and it's five five five one two three four five six seven great phone number alright let's go ahead and publish this all right now for most people who start working with pods this is the point where you're like okay I understand this or I can get to this state but this is where I fall what is that showing the fields on the front end of WordPress so let's take a look we have a press release we had additional fields let's see what this looks like on the front end of our site we come over here great there's our super muffins discovered this is an absolutely amazing time where is the other info nation where are those other fields well there are multiple ways to display the content on the front end of a WordPress site I'm going to show you one or two of them and we are going to use probably the easiest and fastest way and that is simply using pods templates so pods templates are an add-on a component of pods that comes pre-installed on every brand new pod installation any wordpress installation that you add the pods plug-in now if for whatever reason you've had pods on your WordPress website you haven't really used it and it's just been sitting there you'll want to go to the components section in which you're gonna find templates and go ahead and enable templates you need that to do what we are about to do okay so we go to our pods template section once it's enabled and you will see that you know this looks like a custom post type it's exactly how we would be doing all this stuff for our WordPress whether it's post pages or any of the custom post types that we create so we're gonna add new now what I'm about to show you is the reason why I think using pods templates is the easiest thing to to get started showing your content on the front end so we're showing it on your theme really doesn't matter what theme you're using or anything like that this will all work so the only thing you do need to know is a tiny bit of HTML if you remember the old days of using writing HTML you're gonna find this as super simple if you are unfamiliar with HTML that's definitely a skill and a thing to learn because it'll make your life so much easier because if you know how to open a paragraph open a div insert information you'll be able to use pods templates have to do some really incredible things so let's come over here and we will tall call this our show me my PR fields again the name of this template doesn't matter it's simply for you to know what content you're doing now before you get into anything in this template section we want to find our pods reference so this llll says hey we're gonna use press releases and immediately this drop down is a list of all the field values that are stored in the database that are part of press releases so basically so you might want to think about WordPress database as a giant mailroom let's say your big business of our just the US Postal Service every custom post type might be a different post office so when we're storing information we send a letter to the press release it's gonna go to the press release post office and then the postmaster at the press release post office is going to look at all the fields you filled out here and each of those fields is a different peel box and it's gonna say hey I need to put something in when the last time you put post content I'm gonna put a field for post title I'm gonna I'm gonna fill all those post office boxes with information now get this is just illustration it definitely breaks down quickly but this is trying to give you just the reference that there are tiny folders of information that we for every single press release they get a different box of storing so this pod reference gives you an output of all the different fields we can choose so for example if our big concern is you know what I don't see my additional fields so let's go ahead and add those additional fields let's do something like this so we're here on our add new pod I'm going to do a simple let's do a div can you see that I probably shouldn't zoom in slightly just to make it a little bit easier to see div and then we can add a class later but I'm gonna do a paragraph tag because what I'm looking for is down here is the release date so I am going to say press release date and then I'm going to close the paragraph tag this is a point where we get to use something called pods magic tags this is like the old school mail merge where we're taking those fields and saying hey if you have something in this field place it here now because it's called release date that's all we need to know but magic tags are activated by using that open squiggly bracket and the @ sign if we are inside the template area for pods templates and we hit that open squiggly brace the @ sign it's going to give me a drop-down list of all the different fields same thing that's here if we change the pod reference this will change as well so I can either click this double click it and you'll see it show up there and then we got to just close the brace and all of a sudden now that release date is gonna show up and then let's do something like this strong contact and let's do this let's close the strong and we're gonna at and we can start again you can come over here PR contact the great thing about working in the posit em planet is it has autocomplete so I can start typing and the moment I have highlighted the magic tag I want to use I can hit the tab and it will complete that so and then let's also put the phone number PR phone complete it alright so here's my little HTML layout this is where you can add your own CSS your styling whatever you want to make this unique but we're just trying to do this as quick as possible so let's publish this template now at this point it is as simple as connecting the pod to the template to display the content on the front-end so let's go edit our pod edit pods go back over here to our press release and remember I said it's kind of at the beginning of the webinar I said we are gonna take a look at this Auto templating option so we're gonna click on that Auto template option for our press release and we're going to enable it and for our single view so this is when we have are looking at a single post of this a very specific one or this specific press release we are going to connect our book archive where do you want to put it I want to put it after the regular content so this is if your theme does not operate the using a traditional loop system the traditional WordPress loop you'll want to do this after so that basically you take the current setup and then once your theme is finished creating or displaying the content and we get to show this so I'm gonna hit after save this pot so I've got my pod now connected to an auto template so I can now refresh and we are going to see on this single post page for the press release we have our information now Oh guess what I did I actually picked the wrong eye I picked the book archive so so what happened was I used a template for from my from another webinar that's why I didn't show up let's make sure we have that Oh show me my PR fields that was the name of the template that we were using so let's let's switch this up and now we should have a successful completion of showing the content on the front end all right so that's saved again you always have to save the pod in order to see the changes I was wondering why there was an author and a book pages thing showing up okay so there look there's our press release date and there's our contact Bob barber tson and based on the fields that are filled out this changes and it was as easy as attaching a pods template to this area now this next step is something that frustrates a lot of people that I want to kind of take this this rabbit trail let's take a look at this so if I were to be looking at the home page you know the default home page for a wordpress site is going to have a list basically it's all the content in a need so there's title content title content it's just a feed of the content it's called the archive page it's a listing of all the items you can also see your archive if we were to go to different things like show me all the posts from March of 2020 and it will create an archive list here's our one hopefully you're familiar with how WordPress deals with archives now if I were to be looking at press releases let's go back to our press releases press release technically WordPress should be able to without any work give you an archive of all of the pods the custom post type posts like the press releases but notice how we got a page not found that's because in the Advanced Options of that pod that we're editing can edit pods choose the pod you want to do the custom post type go to Advanced Options you're going to see enable archive pages by default this is off so by default there are no archives for a custom post type that you created with pots if you need an archive page which is probably a good idea just simply check this now if you want to change this see how this says press release press - release it's pulling that slug press release it's pulling that slug from the name the title of the name the identifier of this custom post type I can override that for just the archive page so we'll call this one PR I'm overriding this let's go ahead and save this pot now the reason why I'm doing that let's go back over here and we're gonna refresh not found so let's look at the new slug PR and now PR gives me the SuperDuper muffins notice how it says press releases well I click on super muffins discovered see how we now get our press release up there now showing so that's the URL slug structure it's part of the permalink in WordPress we have the flexibility within pods to manipulate that without dealing with code so what are we doing with our archive page because if I go to the archive page which would be a list of all the press releases why isn't it showing all the stuff that I want well go back to pods Auto template you are going to now have the option of an archive view template sure I can go ahead and use the exact same template field if I want save the pod it's after the content the content let's go refresh this and now we will see that we will have that information Abbott but I'm gonna do it slightly different we're gonna go create a new template pod template and we will call this one our PR archive so let's we'll do it really simple add new and let's call this one our PR got to wait for that page to load archive view I'm going to select this select my press releases now let's just do something really dumb like put everything under an unordered list Li title and then we can do post title see that we're just gonna pull that item out and then we can do a release date what is it release their release date now that's not going to link directly to our posts because this is gonna be a list of all our items so what I need to do and then let's do this we're gonna add we're gonna use this a simple H our horizontal line at the end of every single press release listing but I want to link this so we're gonna add an H ref let's find this this is what you're looking for is the permalink and it's I don't think it actually shows but basically permalink that's going to give us a link directly to this post all right so let's publish this and now we have a special archive view that's completely different than the front the single post but notice how you know what I if I were using let's go back here to our I have to refresh on this so that we can load that new template if I were to use the after option which you'll see here in just a moment once this loads go to our auto template and I'm waiting for that page to load Auto template notice how I chose the after because the after went in and said hey you already have content here you already have as part of your theme the the title and the the content and we're just adding this stuff afterwards I want to replace it for the archive so let's go ahead and say hey we're replacing what the theme supports so now the only thing we're going to show is this PR archive view we're not going to allow the theme to put content that we're not controlling so let's save this pot so now I'm replacing the themes template file for how to show the archive with our simplistic pod template file I come back over here to our press release we're refreshing on our PR and we are going to immediately see there's our title super muffins discovered release date and notice how it's now linked I can take it to the single post page so yes there are many different ways of showing the content we're already going long here yes you can go on a theme template files yes you can use short codes you can use custom solutions like beaver theme ER that's a beaver builder add-on you can use custom loop plugins that will extract the information you know these different fields create its own template all those are definitely ways of doing this now if you are the only person developing Trish your question that just came through to me how do you handle not showing field labels on the front end if you don't have an entry great question let me do one other thing and then I will answer that question so some of you may feel like hey I'm the only one who operates my WordPress website is there a simpler way for me to show content but cuz I don't want to deal with templates I don't want to write any of that I'm simply going to be writing a blog post see this I'm gonna be let's will write a blog post right now I'm writing a new blog post wait for that to show this is a new blog post brilliant this is come on and now we're waiting for my server to die because it just seems to take forever today hopefully the Internet's doing okay this is the content that I will share oh good thank you George for reminding me that I did schedule this for 90 minutes all right so I'm gonna come over here and let's fill out those fields I'm feeling awesome what time of day is it evening so I filled this stuff out but again I already showed you the first time through hey we we'd have to go create a template that would add these additional fields to our blog post but it can be easier because Pods gives you short codes I can come in here and say you know what my feelings are display afield from this item and there's different things you could do which field do you want at this point we have to remember what the field name is and I have no idea what it was so let us go back over here to our pods this is what happens if you forget the name of field you literally have to go back to the pods editor go to our post that we extended the regular wordpress post we're editing so that we can find the field name how are you feeling - I should have remembered that one basically it was exactly the label so we're gonna copy that go back over here which field are we wanting to put there that's what we're wanting to put there see how it it puts a shortcode now you might be saying well why do that well what if we have different fields that we're gonna use multiple times on a long blog post and then to make life easy if I ever want to change this you'll see why in just a moment let's publish this and let's go take a look at this piece of content on the front end close out of some of these items I don't need alright let's take a look at this piece of content it says this is new blog post feelings I'm feeling awesome so let's just pretend that this is a gigantic 40,000 word blog post and we have used that shortcode in multiple locations and all of a sudden I decide you know what I'm not feeling good anymore I'm feeling Blaire well I can go back to my pod field that I added make this change here I don't have to mess with the actual content because the pods field is already pulling that information in I just simply update my post and then everybody else who visits the post after this will now see the modification so that's why use it you might feel it's easier to just use those little little short codes add the fields directly into the content and this way you did not have to write write any template you didn't have to hook up any template you didn't have to do anything like that you can simply handle that now the question that was asked in the the members area this is how do you show a field that doesn't have an entry so let's go back to our press release and that's where I'll demonstrate it so I'm gonna close these out let's go to our press release pod so what happens if over here take a look at our press release what happens if we don't have a date associated with the press release so as this field opens up on our site so let's say there's no release date but we still want PR contact and a phone contact so what I want to know is I want to remember the name of this field release dates this is a little more advanced than I was planning on going to but this it's a quick little example so let's go to our pods template and we're gonna look at our show me the PR fields notice how in this one there's a release date but I have some hard-coded labels like press release date so if we went over to let's take a look at our I want to let me just open this up in a new tab oops nope that's gonna be in this exact same tab alright let's just jump over here view I'll go back okay so this is going to the front end just so you can see the front end give it a moment to load okay here is our press release we're gonna change it so that pods will check first to see if a value has been entered into a field in order to choose whether or not we display something in the template so we can use 8 it's very simplistic it's not an advanced PHP function we put something that looks like a shortcode it's an if statement and then I just type the name of the field and this is going to do a search and say hey if there is something in that field see if release date will show this if there's no release date we're gonna ignore the stuff that's inside this if statement so let's update this you're gonna see that when we now look at the front end everything is gonna be perfectly exactly the same nothing will have changed I'm refreshed in the mr. so you can see nothing has changed we still have this release date but let's go now edit this press release and we're gonna remove that feel so we come over here alright now we're gonna remove this come on okay so there's nothing entered in here let's update this we're saving this field saving the post type we're gonna view that press release it's gone that hard-coded press release date label has now been completely eliminated because there is no date it's that easy again that is as simple as adding an if statement release date now the other thing you can do is add in an else statement else this is released immediately so what this is doing is saying you know if there's no release date basically as soon as it's published it's released and it's all dependent on the release date so if I hit update I now have an if-then statement and if-else statement so we can come back over here and we should now see a statement that says this has been released immediately now we're not going to be getting into beaver builder today or any of the page builders the problem for those of you who asking questions about well how does this these templates fit into page builders it actually depends on whether you are using the page builders to modify the actual content of the website or if you're using the page builders to simply structure the the front name of the tire site meaning the outside you're leaving the themes ability to handle the actual output of the content if you are using something else that's probably a different rabbit trail we have to chase a different time the if-else statement only works within templates in write directly in the templates of potts if you are using if you need if-else statements outside of pods that's where we'd have to get into PHP we'll have to go into template tags we'll have to go into queries because we have to check the the meta data of each post see whether or not a field has been entered information this is why getting started with pods providing a layout output so Brett your question on can use pod templates in a hook we're not going to be drawing yes you can but we have to do it within PHP in today's webinar I'm not gonna go down the road of building out a PHP query if that is something that people desire if you're on you know Facebook or if you're on YouTube watching this and those are things you want you want more in-depth pods things where we will go through the process of actually writing the PHP code to do all advanced things let me know in either in the comments either liking the post or following or subscribing all that type of stuff that way I know these are types of webinars you want our goal today is really to to make sure we see how pods can extend WordPress and then at least get you started on showing the information on the front end I hope that makes sense all right so since we still have time I've got a real-world example for you and the reason why we're dealing with a real-world example this also shows one of the things that I like about pods and that's we can add the pods plug in to an already existing website or a client site and it makes it super easy to develop beyond or add new features or let's say you're building a site for yourself or clients you've structured it out and then that client gives you that dreaded phone call that says oh yeah I know you're you're almost done with the website and we're launching tomorrow but I want one other thing yeah that's the that's the one where you go back to the contract you charge them extra again if you want contract stuff or how to deal with clients let me know in your comments but in this one let's say we had a client and we have their gonna be a bookseller and they've done all this work we have our information you know we've got our great books here because the client had already agreed to all the information of simply wanting to be able to show the the title of the book a synopsis summary of the event and also wanted to have the name of the author and the length of the book and then all of a sudden the client says yeah I want to put an image there whoa like I already developed all this stuff I went through here and I said all right so we're gonna create our content and we've already created our template that adds in the additional information maybe you even had stylized an archive page where you were going to be able to display the different content in unique ways so how do we have something just this it exists on your WordPress site this is the great thing about working with pods because yes you can cowboy code do it live you can move everything off to a staging site and push it back either way it really is easy to add new functionality to a WordPress website to the different custom post types using pods and nobody will know the difference if they're visiting the website so let's go ahead and say they want an image so let's come over here and we're going to come to pods and it's as simple as all right what are we gonna do with this now I don't want to use the regular featured image of WordPress because my theme already comes with custom display a featured image I want to be able to control the the look in the feel of the book image so I'm just gonna create a new field in my books here manage my fields we're gonna add a new and image alright add that field so this field that we are adding what did I press the button there this field we're adding we'll call it a book cover I can come over here under the options it's going to be a file image now in this file image I can choose in the additional details of whether or not we're going to connect it to the media library or we're just allowing them to upload whether we're gonna have multiple images I can even come in here and put restrictions on the type of images how we're listing it the labels we're going to use and I'm going to just go ahead and use what's currently existing here we're gonna save this field now we have a book cover save the pot Wyatt now I'm doing this on a quote live site I'm not gonna break anything for my my client site and while I develop this we don't have to worry about all the past books that don't have this field yet because we're gonna use that if statement that I just showed you in the template so we've got our book cover now let's go back to our pots template in our pods template for our book we're gonna come over here let's book archive looks like we didn't create a single one we're just gonna use a regular book archive so where we have a author strong blah blah blah let's just at the end of this we're just going to div let's float this to the right we'll use some crazy CSS float this to the right now I want one of the new fields look I have multiple options for my book cover the book cover image the source the source for the thumbnail I could I could simply just do book cover and then I could do all those things but watch what I want to do I want to add source medium so it's the medium sized thumbnail that is already created by WordPress but I now can wrap this in an image tag source see how that's it's getting me the actual source URL of the image that is created by WordPress and I can I can do other things in here like actually add a width equals 100 we're using old-school HTML so we can now force this into this height let's end before we do this we don't want to mess anything up for all of those posts that don't rizal those books that don't have a book cover so we're gonna do an if book cover and we're only going to show this image if there is a book so we're gonna update this and we're perfectly fine for the four books that are already in the custom post type showing on the front end of our WordPress site see this our everything's perfectly fine nothing's gonna be out of reach because we've made an if statement so let's come back over here and let's edit one of those books I'm gonna open this in a new tab just so we can have a few tabs open here and let's just pick this one danger book basically I just went to Amazon and grabbed some descriptions coming from scandalous Florida treasure hunter and drug smugglers Sloane Macpherson is for I'm not sure who wrote it but I think I went to the top ten best seller so if this description says like I must read this now do not go look for the book danger book it's some other title and no it was not written by danger man all right so let's add a book cover I believe I have some images in here all right this is danger man we're adding that file update all right so now we have danger man book cover but if we now go to our list of books this is the archive page our template now let's go down scroll down where's our danger book oh look there's our image and it's really small because basically we only gave it a 100 pixel by 100 pixel capability and obviously my HTML was broken because we're so here's the extra div tag and it's that easy so I've been able to then take her existing WordPress site that already had content that already had layout and I just needed to add an additional feature and I did that by extending a using pods add an additional field when I go to the template wrapping whatever it is that I'm adding with an if statement and nothing will be quote blown out of whack or messed up on the theme of the front end because prior posts prior custom post type entries didn't have that field yet so using pods to not only add new custom post types so now this this site now has press releases books pages posts all different things that can be used we also took a look at how easy it was with the template to use these magic tags to auto insert the different fields from each of these custom post types and all of this was done without having to do any PHP yes we can do much more advanced things in code and all sorts of other great adventures of styling and customizing but the greatest amount of code that we did in today's webinar is some simple HTML and so this is one of the reasons why I think pods you is one of the easiest methods of extending WordPress beyond just its being stuck in posts and pages so I hope today was a helpful day for everybody that at least if you've used pods or you want to remember pods it's this is a direction that you can go in the future to extend WordPress sites there are some exciting things coming with pods there are a lot of add-ons that you can use that are free and there's even some premium things coming for pods if you like to use beaver builder or gravity forms you can integrate pods with that if you are enjoyed this type of a webinar and you want more for pods or you want more for step-by-step me showing you and talk you through developing with WordPress live and step by step definitely if you're watching this on YouTube or Facebook give it a thumbs up subscribe to the channel I'm really excited to say that this is going to become much more of a regular feature for both Facebook and YouTube and if you want to dive and even further make sure you visit over here at WP studio comm scroll down to the bottom and subscribe for updates we've got some great things coming but you need to be on that list to get information for it now what I will say when you enter your email address if this is the first time you've done it you've got to confirm the email address I will not send you anything if you have never confirmed the email address you're not going to receive any spam the only things you receive from w studio R hey we've got a special free event going on or we've got a live training going on we've got things that you might be interested in so visit WP studio scroll down to the bottom enter your email address so that you can be aware of things that are coming in the future and head on over to youtube and again you can also get to youtube down here click on this button you can get to Facebook subscribe to those items like the feed and I really hope if you have or if you want more of these type of webinars please let me know you can either leave comments in the chat at Facebook or on YouTube or you can send me an email you can always reach out directly to me Benjamin at WP studio comm and I will try and respond as soon as possible so thank you everybody I hope you have a great rest of a day and hopefully I'll see you on a future broadcast

Channel: WPStudio

Views: 756

Keywords: WordPress, Custom Post Types, Pods, VocePress, WPStudio, custom fields, pods framework, wordpress custom fields, wordpress custom fields display in post

Id: VmJiRJZeRJc

Length: 90min 0sec (5400 seconds)

Published: Wed Apr 22 2020