Tuesday, May 2, 2023
HomePHPEasy methods to Show Posts and ACF Fields in WordPress (2 Methods)

Easy methods to Show Posts and ACF Fields in WordPress (2 Methods)


For these of you who do not know: ACF is a WordPress plugin that permits you to add customized fields and the rationale we’d like a plugin like this, is that though WordPress does help Customized Fields by default, they’re fairly restricted, so this plugin takes the performance to the following degree giving us a excessive diploma of customization.

Now here is the factor: for those who’re not code savvy and also you wish to show Customized Fields on the entrance finish, so on the precise web site, you would possibly discover it a bit troublesome, as a result of it’s essential to write some PHP code to seize these fields from the database.

That is why on this tutorial I will present you two methods you are able to do that. First with code, and second with an superior plugin referred to as ACF Views. Which is definitely the sponsor of as we speak’s article. ACF Views is a WordPress plugin which works on prime of Superior Customized Fields. It permits you to show Posts and ACF fields anyplace in your web site utilizing shortcodes. This implies you will now not want to write down any PHP code to question posts or get area values and show them.

ACF Views is free to obtain and use, or prices 25 {dollars} per yr for the Professional model, if you wish to unlock further options, like superior filtering, Ajax pagination, customized Gutenberg blocks and extra. And for those who use the promo code envato you get a 20% low cost for the Professional model. 

Concerning the WordPress Publish Meta and Customized Publish Sorts

Earlier than we get to work with ACF Fields. There are two primary notions it’s essential to perceive: the WordPress Publish Meta and Customized Publish Sorts. So let’s examine what these are, and what function they’re enjoying with regards to Customized Fields.

Now for those who’ve labored with WordPress earlier than, then you understand there are particular sorts of knowledge you may enter your self or create your self, like Posts, Photos or any form of Media, Pages, Customers, and so forth. And here is the factor: WordPress really homes all of this info in a single desk, and that desk is named WP Posts. 

So even when the knowledge we’re coming into is a Publish or a Web page, or an Attachment, or perhaps a WooCommerce Product, every thing will likely be positioned contained in the WP Posts desk within the database. So let me really present you that desk. And I am utilizing a neighborhood set up of WordPress right here, however the database, the desk is precisely the identical. So if we open up WP Posts, and we go to pick knowledge right here, you’ll find all of the content material that I’ve presently entered in my WordPress set up. 

So I’ve a put up right here referred to as “Hi there World”, and we will really discover it proper right here, it is the primary one. You may see now we have a Publish Title and this has a Publish ID of 1, but in addition I’ve a few pages, or really only one web page referred to as “Pattern Web page”. And we will additionally discover that proper right here, proper with the Publish ID of two.

So it is a Publish, it is a Web page, however they’re each saved contained in the WP Posts desk within the database. And you will see that if we scroll all the best way to the tip right here, you will see that every entry on this desk has a special Publish Kind.

My unique put up has a Publish Kind of Publish. My web page has a Publish Kind of Web page. And you may see there are a few extra put up varieties right here. Now every put up on this desk has the very same construction, proper, it has an ID, it has a Publish Writer, Date, Content material, Title, Excerpt, Publish Kind, proper the one that you just noticed right here, and that is non-negotiable. 

Principally each single entry has the precise construction outlined by the construction of this desk. So we can’t add totally different traits to the posts on this desk proper, I can’t add one other column right here and title it nonetheless I need. That is merely not doable, and that is the place Publish Meta is available in, and Publish Meta is saved in a separate database referred to as WP PostMeta, and if we check out the info right here, you may see that the construction of this desk may be very easy.

Now we have a Meta ID, a Publish ID, a Meta Key and a Meta Worth, and the best way this works is tremendous easy: every entry on this desk has a Key and a Worth, and I can affiliate this pair to any Publish ID. So for instance, for my “Hi there World” put up, which has a Publish ID of 1, I’ve this put up meta, related to my pattern web page, which has a Publish ID of two. I’ve two entries right here, I’ve the Web page Subtitle, and the Web page Subtitle with an underscore.

And don’t fret about what these imply, mainly these are distinct traits of that put up, or web page, or no matter it’s. 

So each time I would like so as to add a particular attribute to a Publish, or a Web page, or an Attachment, or no matter it’s, I do not do it within the WP Posts desk, I do it within the Publish Meta desk proper. I simply want to verify to reference the proper Publish ID. So if I wish to add a Meta Key and a Meta Worth for my “Hi there world” put up, which has a Publish ID of 1, I simply create a brand new entry, I choose the Publish ID of 1 and I enter my info, however clearly you will not be doing this manually within the database, you can be doing it from the WordPress backend. I am solely displaying you these tables in the principle database simply so you may perceive what’s taking place behind the scenes.

Okay, in order that’s mainly Publish Meta. Now I additionally talked about Customized Publish Sorts. So what are these precisely? Nicely, if we’ll return to WP Posts, and we go on the info, and we scroll proper right here, the place it says Publish Kind, you will see that each entry on this desk has a Publish Kind. 

We are able to have Web page, Publish, ACF area, Revision, Smartphones, Attachments, even when you have like photographs added to your WordPress set up proper, these are all put up varieties, however the one that you just see right here, Smartphones, is definitely one which I created myself, and if we open up the theme, that I am utilizing, which is Astra, only for for this demo, and we go to features.php , you will see that I’m registering a Customized Publish Kind right here, referred to as “Smartphones”.

Customized Publish Sorts, if carried out appropriately, will really let you see these posts individually in your WordPress backend. So I’ve a separate entry right here, within the menu, referred to as “Smartphones” and I’ve a listing of posts that makes use of this Customized Publish Kind, and I even have classes for them: Price range, Excessive-end, Midfield, and I may add, take away and edit, similar to I’d some other put up in my WordPress set up. 

That is tremendous helpful, for instance for those who’re constructing a web site for somebody that desires to promote smartphones, or they wish to show like a catalog of smartphones they’ve on sale having a separate class right here within the menu makes it a lot simpler for them. But in addition this ties in rather well with ACF, proper, ACF stands for Superior Customized Fields, it is an superior plugin. So, if we go to Customized Fields, I’ve a Group right here, referred to as Smartphone choices, and you will see that this Subject Group is just proven if the Publish Kind is the same as Smartphone. 

Okay, so if I’m going to “smartphones” and I open one in all them, you will see that I’ve some Customized Fields proper right here, on the backside, “Producer” and “Value” that I can edit and use in fact to show customized info just like the “Model” and the “Value” of the telephone and naturally these are or have totally different values for every put up, and if I’m going to a daily put up, like “Hi there World”, yeah, you will see that these fields usually are not current, I can’t change them, as a result of this entry is only a common Publish, it isn’t a “Smartphone”.

Now talking of “smartphones”. Let me really present you the way the Publish Meta ties into all of this. So if we open up this one, it is the “Huawei Nova”, this has a Publish ID of 40, and if we go to the WP PostMeta desk, and we kind by Publish ID, you will see that the place it says Publish ID 40, now we have Customized Fields proper, now we have the “Producer”, because the Key and “Huawei” because the Meta Worth and in addition the “Value”. 

So on this occasion the Publish Meta desk is used to show or to retailer the Customized Fields for these posts proper, in order that’s a very fast take a look at how WordPress shops put up info, additionally Publish Meta and we additionally noticed the right way to create Customized Publish Sorts, and in addition the right way to use them together with ACF, or the Customized Fields in WordPress.

Easy methods to Show ACF Fields (2 Methods)

Alright, so now that you just hopefully perceive how Publish Meta and Customized Publish Sorts work in WordPress. Let’s examine how we will show the ACF fields or the Customized Fields we noticed earlier to the entrance finish and as I used to be saying I will present you two methods for that one with code and the second with a plugin. 

Let’s begin with code. 

So if we check out the Customized Fields, I’ve a Group right here, referred to as Web page extras, and this practice area is just seen if the Publish Kind is the same as Web page, yeah, so if I’m going to my pages, and I open my Pattern web page, you will see the Customized Subject Group right here, Web page extras, and the customized area itself, Web page subtitle.

So as an example: “it is a demo subtitle”. Okay, that is the worth of the customized area and I am gonna hit replace. Now if I will open my web page, I do not see that textual content anyplace, so how do I add it to the entrance finish, how will we show that customized area worth on the precise web site? 

Nicely with code we have to do one thing like this: we’ll go to web page.php and that is the template that WordPress makes use of to show this content material, and proper right here I can do one thing like this: I can say PHP, the_field, after which I will say Web page subtitle, which is the title of my customized area, and I will shut the PHP tag.

So I will save this, refresh, and truly little typo right here, it is like this, refresh and now I can see the “Subtitle” proper right here, and certainly sufficient, if I alter it and refresh that is going to be displayed on the entrance finish as nicely. In order that’s a very easy demo, however what about these smartphones, as a result of if I’m going to the smartphone record, let’s open this “Huawei Nova”, right here you may see that I’ve two Customized Fields, the “Producer” and the “Value”. So if we hit “replace”, and if we open this web page, we will simply see the “title” and the content material that is outlined mainly right here. How will we show these two? Nicely this one, we’ll really use the one smartphones PHP template. 

So let’s go forward and modify this. Proper earlier than the loop I am gonna say one thing like this: H3, traits after which let’s do a listing after which a listing merchandise and we’ll say “Model” after which inside we’ll say PHP and I will say the sphere “Producer” after which let’s go forward and replica this, and let’s record the “Value” and I will add a greenback sign up entrance and I will change this to “Value” then save and now once we refresh. 

You will see that the traits at the moment are proven proper right here and naturally I can cycle by means of these and WordPress will show these customized fields proper the place I set them within the template so it’s very doable to show these customized fields utilizing code however it’s essential to know precisely the right way to write the code, it’s essential to know the place to place it, and for those who’re simply getting began with WordPress this generally is a little troublesome. 

As an alternative what you are able to do is you may set up a plugin that is going to let you get entry to these ACF fields and show them wherever you need in your web page and in order that plugin is named ACF Views, it is this one proper right here and naturally it depends on you having put in ACF within the first place so that you want some customized Fields earlier than working with ACF Views and that is created by WP Lake. I will inform you extra about this in just a bit bit.

With each of those plugins put in and activated you may go to ACF Views and right here you may see that I’ve two Views created, the primary one is named “Web page extras” and “Web page extras” works within the following method, by the best way you may name this no matter you need however what’s essential is that you choose the proper customized area group, the one that you just outlined right here in my case it is “Web page extras” and from there it’s essential to choose the customized area that you just wish to show in my case it is “web page subtitle”’ which is a textual content, you can provide this an non-compulsory label if you’d like after which you may hit “create” or “replace” and this works by utilizing shortcodes so you may really copy this shortcode and you’ll then go to any web page, let’s open up our pattern web page right here and let’s go and insert a shortcode right here in Gutenberg and I will hit “replace”.

Now if we view this web page you will see that now we have the customized area displayed proper right here and naturally this being Gutenberg you may go forward and transfer this wherever you need. When you’ve got a customized template right here you may select the place to show it. To illustrate we wish to show this proper on the prime so if I hit ‘replace’ and I refresh now that is going to be displayed proper right here and we did that with out writing a single line of code. 

This web page nonetheless shows my preliminary customized area as a result of that is nonetheless hard-coded in my theme proper right here, however I can very simply remark this out and if we do a refresh, that is gone, so solely this one will likely be displayed.

So, now this View really makes use of this markup, proper, so it creates a div after which it makes use of a few variables to show the worth of that customized area and you may as well create a customized markup which I will present you in just a bit bit in order that was a easy instance for the “Web page extras”.

Let’s take a look at this subsequent View that is for the “smartphone customized Fields” for those who keep in mind once we outlined the customized Fields right here in ACF now we have a gaggle referred to as “smartphone choices” which has the “producer” and “value” so if we go to the ACF Views and we open this second View that I created, once more we’re referencing the “smartphone choices” ACF group and we’re getting the “producer” we’re additionally setting a label right here and we’re additionally setting the worth, on prime of that we’re additionally getting the put up title and you are able to do that actually simply in an ACF View by choosing “$Publish$” right here and you’ve got a bunch of choices for the precise area and this works precisely the identical method, you might have a shortcode that is being generated for you robotically and you’ll simply copy that to the clipboard after which you may go to “smartphones”. 

Let’s open up this this “Nova” and it is precisely the identical, insert a shortcode, paste that right here, “replace” and now once we refresh the web page right here you will see that we now have that customized info, these customized fields displayed proper the place we wished them and once more when you have a template you will most likely be displaying these fields some place else however we did that with no need to write down a single line of code. 

Now, for those who do not like the best way that is displayed you may really use customized markup. If we return to ACF Views you will see that beneath markup that is the default that is being generated for you robotically and I’ve really added my very own customized markup right here, so if I am gonna delete this and hit “replace” the default markup appears one thing like this. 

It is only one ingredient displayed after one other, I wished to make use of a listing ingredient so as an alternative beneath customized markup I created this, simply watch out when doing this it’s essential to show these variables like so as a result of in any other case you’ll not have entry to the precise customized area so simply add these feedback with the variable title inside after which observe it up together with your markup so now once we hit “replace” and we return to that “Nova” telephone we will see the brand new markup happening. 

Now what’s actually cool in regards to the ACF View plugin is that it additionally helps Gutenberg blocks so I can flip this “smartphone customized area” View right into a Gutenberg block all I gotta do is take a look at this field proper right here, hit ‘replace’ and now after I go to edit my web page, let’s go right here and right here and after I click on this plus signal and I seek for a “smartphone customized fields” I now have a Gutenberg block which I can edit proper right here within the sidebar so I can say ‘producer’, I can say one thing else fully the values that you just set on the precise Gutenberg block are totally different from the preliminary ones you set right here and clearly that is smart as a result of it is a Gutenberg Block it is meant to be reused, so you may bypass this performance all collectively and easily use the Gutenberg block to outline the “producer” as an example “check” and “value” is 111, okay so I wish to hit “replace” and after I view this web page.

You will see that I now have the very same markup, the very same construction for this content material however with the brand new values, so that is nice. I can now take this block, I can put it some place else, I can mainly reuse it throughout my doc. 

The Gutenberg block performance is definitely a part of ACF Views Professional there’s a professional model to this plugin, now I do have it put in and you may get the professional model by going to https://wplake.org/acf-views after which “Get PRO” and by the best way that is the official web site for the plugin additionally they have a YouTube channel and documentation for the plugin and you will find hyperlinks to that within the video description however you may get the professional model from right here, and for those who use the promo code envato you’ll get 20% off the professional model so do not forget that envato promo code 20% off. Proper and that is how you should utilize ACF Views to show customized fields with out writing a single line of code.

Easy methods to Show Posts (2 Methods)

Now let’s flip our consideration to this displaying posts and even customized put up varieties to this point we have checked out the right way to show ACF Fields by utilizing code and the ACF Views plugin however the ACF Views plugin can be efficiently used for querying and displaying posts primarily based on totally different standards like meta filters and taxonomy so let me present you just a few examples.

First, let’s begin with the code demo. I’ve an archive for the “smartphones” customized put up kind and on this archive I am mainly utilizing WP_query to get a bunch of posts from the database primarily based on these arguments and right here I am utilizing meta filters, I am filtering utilizing the “value” customized area and I am solely displaying the posts which have the “value” lower than 1700, all proper, so I am defining the arguments, I am creating my question utilizing WP_query after which I am getting the posts and for every put up I am mainly displaying the “title”, “description”, “producer” and “value”. 

Now if I’m going to my WordPress set up right here, and let me shut out a few these tabs and if I’m going to “smartphones” which takes me to the archive you may see that this shows each smartphone that matches this meta filter, proper so “value” is decrease than 1700 however I may make the worth decrease than “700”. Okay, in order that’s simply gonna show a handful of my posts which have the customized put up kind of “smartphones” it is this one, this one and this one so to get one thing like this you would need to write all of this code by hand which you understand for those who’re a WordPress developer it is no drawback by any means however for those who’re simply getting began and for those who’re not conversant in how WordPress works, the hierarchy and all of that stuff then this might be problematic for you.

All proper now as an example we wish to do all of this utilizing the plugin, nicely there are just a few methods we will do this. To begin with if we have a look in “smartphones” and beneath classes now we have a taxonomy outlined right here so we mainly have classes for smartphones, now we have price range high-end, Midfield and so forth and every one in all these have a class assigned to it, so if for instance I had been to show simply the “Midfield” smartphones I’d do it the next method. 

I’ll go to ACF Views after which ACF Playing cards and I will create a Card and I will title this “mid-range” I will choose the ACF View “smartphone customized fields” after which filters, I will filter this to solely present “smartphones put up kind” after which we go to taxonomy, we add a rule, we add a taxonomy “Classes” will likely be equal to and we choose “Midfield” or “mid-range” or no matter it’s that you just outlined so now we revealed this ACF Card we copy the shortcode after which we go to our pages, we will create a brand new web page, let’s name this “mid-range smartphones” and right here we will merely paste in that shortcode, publish the web page and once we open the web page that is going to show solely the mid vary smartphones. 

The plugin makes use of this taxonomy to filter these posts and show them on the web page and at any level I can return to the Card, I can edit the Card and I can change the taxonomy to one thing else, perhaps I wish to show the price range telephones proper so now it is it is gonna show simply the price range telephones. In order that’s how you should utilize taxonomies. 

What if you wish to show these telephones by Value or really by producer?

To illustrate we simply wish to show the “Apple” telephones nicely, I can add a brand new web page and I can say “Apple smartphones” and we’ll come again to this in just a bit bit we will return to ACF Playing cards, we will create a brand new one, we’ll choose the proper View and we’ll go to filters, once more we’ll simply show smartphones after which beneath meta filters I can add a rule and I can choose the producer to be equal to “Apple” okay, be sure that the proper group, ACF group is chosen right here, so we’ll publish that, we’ll copy the shortcode and we’ll paste that in and we’ll publish the web page and now once we open the web page it simply reveals me the “Apple smartphones” and that is how you should utilize the meta filters in ACF Views to show a listing of posts primarily based on totally different standards.

Now one thing else you are able to do with the plugin is pagination and for that permit me really open the “mid-range” Card that was utilizing the taxonomy filters. Let’s choose the “Midfield” telephones, let’s “replace” okay, so now now we have 4 telephones right here however as an example I wish to show simply two of them after which have some form of pagination utilizing code, it is a variety of work to make this occur however with the plugin you may go to pagination, you may allow it, you may resolve what number of posts you need per web page and you’ll “replace”.

So now if I refresh I am simply displaying two posts with a lot more button that reveals me the opposite two and people are two methods of displaying posts and their ACF fields in WordPress.


I confirmed you the right way to do it in code and in addition the right way to do it with the superior ACF Views plugin. Keep in mind if you wish to buy the professional model of the plugin use code envato for 20% off.

I hope you discovered this video helpful, keep in mind to additionally take a look at the envato tuts plus YouTube

channel for extra content material like this but in addition to find out about internet design, internet growth and much more and remember to subscribe and provides this video a thumbs up for those who preferred it. I am Adi, thanks very a lot for studying and I’ll see you subsequent time.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments