Need help restructuring WordPress Site

[psyvortex]

Hi there!

I still have a amazon affiliate site, built with WordPress back in 2016.

Most posts are in the form of best list, e.g. Best xyz for xyz 2016, similiar to thewirecutter.com.

Now the site is still earning good money and I want to take it to the next level.

The site is built with the Thrive Editor (it's called Thrive Architect now), and everything from Product Boxes to Comparison Tables were built manually, per drag and drop. Products are added manually, links are added manually etc.. it takes alot of time.

The niche im in is changing fast and so do the best products.

Currently I'm looking for better ways to manage the products / comparison tables.

Product Comparison Tables:

Currently they are static HTML tables, built with the Thrive Editor. Links/Product Images etc. are static and added per hand.

1. https://azontables.com/
2. try to integrate React with WP, and build a React Table

Product Boxes:

1. Build something with custom template & ACF (not sure how to do this)
2. try to integrate React with WP, build a custom Component

About the react part, I was thinking of adding all products in a DB, and then display them on the frontend with WP/React.

I would be very thankful if someone could guide me in the right direction.

 

[BCN]

We do a custom thing, where we keep a products table and then custom fields. Then you can run jobs to check if product is still available etc

 

[psyvortex]

We do a custom thing, where we keep a products table and then custom fields. Then you can run jobs to check if product is still available etc

Which custom fields are you talking about? Can you explain it a bit more detailed so I can understand?

 

[Ryuzaki]

In the past I've used ACF to create custom fields that populate all kinds of things, including comparison tables. If you know how to use React then you'll be able to figure out Advanced Custom Fields. It's a piece of cake, but does require you to edit the templates of the theme. It sounds like you know how to do this.

In the present I still use ACF, but I've converted all of my cool features from sets of custom fields to custom Gutenberg blocks. They look the same, perform the same, but are saved within the posts content instead of in another database table as meta data. Much cleaner in that sense and in the workflow of creating a post. Only works if you're using Gutenberg though.

Doing it the old way is simple though. You create a Field Group like "Comparison Table." You set the rules to only show in the Reviews category, or with a certain Page Template, or any number of rules to make it work for you. Then you go in and create fields within the group with labels like "Product Name 1," Product Description 1, Product Link 1, Product Image 1.

I recommend giving each field's actual name a prefix like acf_table_product_name_1, with the prefix being acf_. Because later, you may want to clear all that out of your database and if you don't have a common prefix on them all you'll never hunt it all down easily.

But now you have a Field Group that shows on the right "edit page" with fields corresponding to your comparison table's needs. Now you just go into the PHP template and build out the HTML table like normal, but this time you "templatize" it with your acf fields, like...

<?php
// Cache your fields
$product_name_1 = the_field('acf_table_product_name_1');
$product_link_1 = the_field('acf_table_product_link_1);
// ... so forth with all fields and all products...

// Check if fields actually exist so your site doesn't break if ACF plugin gets turned off
if ( $product_name_1 && product_link_1 && ... && product_link_3 ) { ?>

// Build out your HTML table
<div class="table_product-name"><a href="<?php echo $product_link_1; ?>" target="_blank" rel="nofollow"><?php echo $product_name_1; ?></a></div>

// End conditional
<?php } ?>

That should give you an idea of how to do it. It's a piece of cake. you don't have to cache the fields or do the big conditional if you don't want either, and it's even simpler.

 

[BCN]

Yes, we use advanced custom fields. And just code the template files and logic as a plugin. There's also a plugin to expose ACF to the WP api. We use the WP API with Vue JS to do some cool stuff too.

For my agency site, I'm actually testing to build a headless wordpress, and use VUE + Nuxt to make the frontend. Because I have too much time ....

 

[Poplanu]

In the past I've used ACF to create custom fields that populate all kinds of things, including comparison tables. If you know how to use React then you'll be able to figure out Advanced Custom Fields. It's a piece of cake, but does require you to edit the templates of the theme. It sounds like you know how to do this.

In the present I still use ACF, but I've converted all of my cool features from sets of custom fields to custom Gutenberg blocks. They look the same, perform the same, but are saved within the posts content instead of in another database table as meta data. Much cleaner in that sense and in the workflow of creating a post. Only works if you're using Gutenberg though.

Doing it the old way is simple though. You create a Field Group like "Comparison Table." You set the rules to only show in the Reviews category, or with a certain Page Template, or any number of rules to make it work for you. Then you go in and create fields within the group with labels like "Product Name 1," Product Description 1, Product Link 1, Product Image 1.

I recommend giving each field's actual name a prefix like acf_table_product_name_1, with the prefix being acf_. Because later, you may want to clear all that out of your database and if you don't have a common prefix on them all you'll never hunt it all down easily.

But now you have a Field Group that shows on the right "edit page" with fields corresponding to your comparison table's needs. Now you just go into the PHP template and build out the HTML table like normal, but this time you "templatize" it with your acf fields, like...

<?php
// Cache your fields
$product_name_1 = the_field('acf_table_product_name_1');
$product_link_1 = the_field('acf_table_product_link_1);
// ... so forth with all fields and all products...

// Check if fields actually exist so your site doesn't break if ACF plugin gets turned off
if ( $product_name_1 && product_link_1 && ... && product_link_3 ) { ?>

// Build out your HTML table
<div class="table_product-name"><a href="<?php echo $product_link_1; ?>" target="_blank" rel="nofollow"><?php echo $product_name_1; ?></a></div>

// End conditional
<?php } ?>

That should give you an idea of how to do it. It's a piece of cake. you don't have to cache the fields or do the big conditional if you don't want either, and it's even simpler.

Hey @Ryuzaki I'm getting into ACF, but I'm not very fluent in PHP yet. In the example above, how do you specify the location of the table on the page? Will it be done through a shortcode, or adding a php snippet to the code editor of the post? Thanks

 

[Ryuzaki]

@Poplanu, to keep things from getting confusing for you, Consider that entire chunk of PHP above, including where we break out of it and do some HTML, and then jump back in to close the conditional with <?php } ?>... think of all of that as your table. The entire code block.

Now you need to go into your actual theme templates and insert that into probably single.php or page.php, or if you have a custom template just for reviews, then whatever that's called. All of this needs to be happening in a child theme or you'll lose your work when you update the theme.

Think of it just like HTML code. It appears where you place it in the template. If you want them all at the top of the post, then, as an example, look for <?php the_title(); ?> and slap it below that. If you want it inside the content, you'll have to create another ACF field for like "The first two paragraphs" and then display those, then display the table, then jump back into the WP Post Editor. The better way, if you want it within the content not at the top, is to make it a Gutenberg block. Ignoring Gutenberg for the moment...

If all of your reviews exist in a category, you can create a template just for that category. Explore the Wordpress Developer site to learn more if you don't know about how to do all that. Otherwise, if you only have a single.php template but only want this table to appear on posts in the reviews category, then you'll have to wrap the whole thing in another PHP If statement so it only shows in that category.

I don't want to just hand it to you, because you'll learn more and remember it by figuring out how to do it yourself, but what I typed above is the "what to do" with a couple of options.

If you feel you want to make a Gutenberg block out of it, I'm happy to help you do that.

 

[Poplanu]

Thanks for the very detailed reply.

My problem is that my old articles are not standardized. The table usually comes after the first <h2> but not always. With Tablepress I just paste in the shortcode wherever I need it, and that's fine.

It seems like there are no easy answers for using ACF here. I'd have to standardize all of my articles to make it work (which is probably a good idea anyway). But until that's done, the custom Gutenberg blocks, or using a plugin such as AAWP, are my best alternatives.

I'll probably end up going with AAWP though - an experienced member of the forum suggested that I should include prices on my pages, and I'm too n00b to integrate Amazon's API myself.

If you could point me to a direction regarding the custom blocks, I'd be happy to do some reading on those.

P.S. I actually recently built (read: copied) a custom CTA widget with ACF and made it sticky with the Q2F3 plugin. A lot of echoing in PHP, but it works great haha!

 

[BCN]

ACF has the custom block feature already built-in. I can send you some examples if you need.

I think standardizing the content, and pulling out metadata is the way to go. Then there will be one single source of truth, i.e. size, price, color, rating, affiliate link per product, and you can use these however you want in aggregations, calculations, listings etc.

If your content has tables etc which would look similar between products, pay someone $50 to scrape your site and get all the metadata in CSV, then you can clean it and upload the csv to WP and parse each item with its corresponding data into custom fields.

I.e. a product can be
Heading
Name
Brand -> relation to brand category/CPT
Category -> relation
Body
Snippet
Rating
Weight
Affiliate link
Price
Available (boolean)
Images (array)

Then you make a template for a product page and you can just do

<?php
if ($fields['available'] && fields['affiliatelink']) { ?>
<a href="<?= $fields['affiliatelink']" ?>>Check availability on Amazon</a>
<?php
else { ?>
Product not available, <a href="$fields["product_type"]["link"]">click here to see our top <?= $fields["product_type"]["name"]?></a>
<?php } ?>

Just a quick example, I'm sure there's a lot of typos in it, but to show you the idea.

I have some financial sites where we pull in 50+ data points from API, and mix it with geocoding (from Google API), and store them as custom fields. These are rendered on detail pages, and some are consumed by a VueJS list/filter (via API). It also has custom Gutenberg blocks, i.e. if I want to inline a recommended product "card" within an article.

Wordpress is not the best choice for the above, but since the sites started as WP (and the goal is to sell it eventually), it's a good compromise that requires minimal setup and maintenance (as this is done by ACF, Wordpress team etc.). If I were to re-make the site, I may not have gone with WP.