KiyOh layout aanpassen

—

## 🔍 Step 1: Check How the Plugin Renders Reviews

Look at:
– The plugin’s `shortcodes.php` or similar file in `/wp-content/plugins/kiyoh-klantenvertellen/`.
– Find the function that handles the `[kiyoh-widget]` or other shortcodes.

Example:

function kiyoh_widget_shortcode($atts) {
    // Generates the HTML of the review box
}

—

## 🛠 Step 2: Three Ways to Override Layout

### ✅ Option 1: Override via Hooks (Preferred if available)

Check for **filters** like:

apply_filters('kiyoh_widget_output', $html_output);

If present, you can override in your theme:

add_filter('kiyoh_widget_output', 'my_custom_kiyoh_widget_layout');
function my_custom_kiyoh_widget_layout($html) {
    // Return custom layout
    return '<div class="my-custom-reviews">' . $html . '</div>';
}

—

### ✅ Option 2: Output the raw data and render your own layout

If shortcode returns JSON or structured data, fetch it with:

[kiyoh-widget json="yes"]

If not, fetch via PHP:

$response = wp_remote_get('https://www.kiyoh.nl/json/company-reviews.json?company=YOURCOMPANY');
$reviews = json_decode(wp_remote_retrieve_body($response), true);

foreach ($reviews['reviews'] as $review) {
    echo '<div class="review">';
    echo '<strong>' . esc_html($review['reviewer']) . '</strong>';
    echo '<p>' . esc_html($review['text']) . '</p>';
    echo '</div>';
}

Then create **your own custom layout** in a theme template or shortcode.

—

### ⚠️ Option 3: Override the Plugin Template (Only if plugin uses templates)

Check if plugin uses:

include plugin_dir_path(__FILE__) . 'templates/widget-template.php';

If yes:
1. Copy the template to your theme (`/yourtheme/kiyoh/widget-template.php`)
2. Modify the HTML layout.

Then add:

add_filter('kiyoh_template_path', function($path) {
    return get_stylesheet_directory() . '/kiyoh/widget-template.php';
});

—

## 💡 Bonus: Use CSS for Minor Layout Tweaks

You can use CSS to override layout:

.kiyoh-review-widget .review {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 6px;
}

—

If you send me the **exact shortcode you're using** or **plugin file where the HTML is output**, I can give you the direct override code.

—

## ✅ Step-by-Step: How to Override Plugin Templates

### 🔍 1. **Check if Plugin Supports Template Overrides**

Go to:

/wp-content/plugins/kiyoh-klantenvertellen/

Look for any folders like:
– `/templates/`
– `/views/`
– `/partials/`

Open PHP files and check for lines like:

include plugin_dir_path(__FILE__) . 'templates/review-widget.php';

Or for filters like:

$template = apply_filters('kiyoh_template_path', $default_path);

👉 **If these exist**, then the plugin supports template overriding.

—

### 🗂 2. **Copy the Template to Your Theme**

Assuming the plugin has a template file like:

/wp-content/plugins/kiyoh-klantenvertellen/templates/review-widget.php

Then copy it to:

/wp-content/themes/your-theme/kiyoh/review-widget.php

✅ Use the same folder structure if mentioned in the plugin.

—

### 🧩 3. **Tell the Plugin to Use Your Template (if needed)**

If the plugin allows a filter like:

$template = apply_filters('kiyoh_template_path', $template);

Then add this to your theme’s `functions.php`:

add_filter('kiyoh_template_path', function($path) {
    return get_stylesheet_directory() . '/kiyoh/review-widget.php';
});

—

### 🎨 4. **Customize the Copied Template**

Now safely edit the HTML and PHP in your copied template file:

<div class="my-custom-review-box">
    <h3><?php echo esc_html($review['reviewer']); ?></h3>
    <p><?php echo esc_html($review['text']); ?></p>
</div>

—

## ❌ What if Plugin Does NOT Support Template Overrides?

If no such template inclusion or filters are used:

1. **Don’t modify plugin files directly** (they’ll be overwritten on update).
2. Instead, disable the plugin’s output via a filter or shortcode setting (if available), and:
3. **Create your own shortcode** or custom widget that fetches and displays the reviews.

—

If you send me the plugin file path where the review HTML is rendered (or the shortcode you're using), I’ll confirm whether template overriding is supported and give you the **exact override structure**.