Site icon Hip-Hop Website Design and Development

How can I make reusable post types with complex custom field structures?

It’s taking some time for me to get used to the WordPress platform and terminology so I’m hoping someone can point me in the right direction for the info I need. For lack of being able to explain what I need in "Wordpress language" I made a data structure in TypeScript to illustrate what I want to essentially achieve in WordPress some type of way.

export interface MeasurementProps{
    imperial : number;
    metric   : number;
}

export interface WeightProps{
    lb : number;
    kg : number;
}

export interface DimensionProps{
    width  : MeasurementProps;
    height : MeasurementProps;
    depth  : MeasurementProps;
    weight : WeightProps;
}

export interface RGBProps{
    r : number;
    b : number;
    g : number;
}

export interface ColorProps{
    name        : string;
    rgb_setting : RGBProps;
}

export interface PriceProps{
    usd: number;
    eur: number;
}

export interface ItemProps{
    id           : string;
    title        : string;
    description  : string;
    color        : ColorProps;
    key_features : string[];
    size         : DimensionProps;
    price        : PriceProps;
}

If you’re not familiar with TypeScript the ItemProps interface would shape data into the following object.

{
    'id'           : 'some_id',
    'title'        : 'Whatever Title You Want',
    'description'  : 'A bunch of text to describe this thing.',
    'color'        : {
                         'name'        : 'red',
                         'rgb_setting' : { 'r' : 255, 'g' : 0, 'b' : 0 }
                     },
    'key_features' : [
                         'something about 1st feature',
                         'something about 2nd feature',
                         'something about 3rd feature'
                     ],
    'size'         : {
                         'width'  : { 'imperial' : 36.5, 'metric' : 927.1 },
                         'height' : { 'imperial' : 62,   'metric' : 1574.8 },
                         'depth'  : { 'imperial' : 24,   'metric' : 609.6 },
                         'weight' : { 'lb' : 80, 'kg' : 10.886 }
                     },
    'price'        : { 'usd' : 400, 'eur' : 490 }
     
}

This example is clearly for some type of product and aside from just this data object I could want to use the PriceProps interface in another product type with slightly different options. I may need the size to be based on length, width and thickness rather than height width and depth but other than that has the same properties meaning I would just create a new interface for the size and re-use the others to shape a new ItemProps2 interface for that kind of product.

In what manner does wordpress allow us to orchestrate our custom post types so when we create a new post it will have all these fields by default? So far everything I’ve come across shows how we would need to add custom fields to each post then modify the markup to display it if it exists. I haven’t found anything at all show how we can achieve objects within objects using custom fields like how size is an object that contains the 4 height, width, depth and weight objects that each have 2 properties.

I’m ultimately wrapping my head around building an admin plugin that will allow me to batch load products from a json object without having to do them 1 by 1 which I know how to achieve functionally, I’m just having a hard time figuring out how to shape custom data structures and chain them together. Can someone shed light on how this can be achieved?