Changeset 3616586

Timestamp:

07/21/2026 06:59:57 AM (3 months ago)

Author:

opengraphxyz

Message:

Update to version 1.6.0 from GitHub

Location:

opengraph-xyz

Files:

• tags/1.6.0 (copied) (copied from opengraph-xyz/trunk )
• tags/1.6.0/opengraph-xyz.php (modified) (1 diff)
• tags/1.6.0/readme.txt (modified) (2 diffs)
• tags/1.6.0/src/Admin.php (modified) (13 diffs)
• tags/1.6.0/src/Plugin.php (modified) (1 diff)
• tags/1.6.0/src/functions.php (modified) (3 diffs)
• tags/1.6.0/src/templates/admin.php (modified) (6 diffs)
• tags/1.6.0/src/templates/template_selection.php (modified) (5 diffs)
• tags/1.6.0/src/ui/api-key-modal.php (modified) (3 diffs)
• tags/1.6.0/src/views/modifications.php (modified) (5 diffs)
• tags/1.6.0/src/views/troubleshooting.php (added)
• trunk/opengraph-xyz.php (modified) (1 diff)
• trunk/readme.txt (modified) (2 diffs)
• trunk/src/Admin.php (modified) (13 diffs)
• trunk/src/Plugin.php (modified) (1 diff)
• trunk/src/functions.php (modified) (3 diffs)
• trunk/src/templates/admin.php (modified) (6 diffs)
• trunk/src/templates/template_selection.php (modified) (5 diffs)
• trunk/src/ui/api-key-modal.php (modified) (3 diffs)
• trunk/src/views/modifications.php (modified) (5 diffs)
• trunk/src/views/troubleshooting.php (added)

opengraph-xyz/tags/1.6.0/opengraph-xyz.php

@@ -4 +4 @@
 Plugin URI: https://github.com/opengraph-xyz/opengraph-wp
 Description: Dynamic Open Graph images for your website
-Version: 1.5.7
+Version: 1.6.0
 Author: OpenGraph.xyz
-Author URI: https://opengraph.xyz
+Author URI: https://www.opengraph.xyz
 License: GPLv3
 License URI: https://www.gnu.org/licenses/gpl-3.0.html

opengraph-xyz/tags/1.6.0/readme.txt

@@ -5 +5 @@
 Tested up to: 7.1
 Requires PHP: 5.6
-Version: 1.5.7
-Stable tag: 1.5.7
+Version: 1.6.0
+Stable tag: 1.6.0
 License: GPLv3
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
@@ -94 +94 @@
 == Changelog ==
 
+= 1.6.0 =
+* Add troubleshooting help and improve the plugin menu and user experience
+
 = 1.5.7 =
 * Fix plugin packaging so runtime assets are included in plugin releases

opengraph-xyz/tags/1.6.0/src/Admin.php

@@ -17 +17 @@
     add_action('admin_head', array($this, 'add_custom_button'));
     add_action('admin_head', array($this, 'hide_add_new_button'));
+    add_action('admin_head', array($this, 'hide_redundant_submenu_items'));
     add_action('admin_init', array($this, 'register_plugin_settings'));
 
@@ -57 +58 @@
       null,
       'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIxMXB4IiB2aWV3Qm94PSIwIDAgMjAgMTEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwIiBmaWxsPSIjMDAwMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNNS4wNjgwODY4NywwLjAxMzQ5NDY4NDkgQzMuNTkxODgzMjMsMC4xMTU0ODYyODcgMi4xNTQxMzkyOCwwLjg2MzYwODk3MSAxLjIyMTI4MzEyLDIuMDE0OTk5MjYgQy0wLjM2NDczOTE3OCwzLjk3Mjc0MDUxIC0wLjQxMDMzNDc3LDYuNzIzNDczMzcgMS4xMDk4ODkwMSw4LjczMzczMDYxIEMxLjk1NzQ4NTEyLDkuODU0NjI0NzcgMy4yNjQ3NDQxMiwxMC42Mjk5MjY4IDQuNjU3MzU1ODQsMTAuODM3ODcxNyBDNS4wMDQ3OTA1NSwxMC44ODk3NDI4IDYuMDMyMDgxNDksMTAuODgzMDE3MSA2LjM1MzQ3NDgxLDEwLjgyNjgxNTcgQzcuNTYzMzMzNDcsMTAuNjE1MDkzMyA4LjU2MTk4ODE1LDEwLjA5NDcyNDIgOS4zOTIzNDY5MSw5LjI0MzQxMjIzIEM5LjU1ODk3NDcsOS4wNzI1OTcwMiA5Ljc1OTcwNjUyLDguODQ2OTYyNDggOS44Mzg0NzkzOSw4Ljc0MjAyMjYxIEM5LjkxNzM0NDk0LDguNjM3MTc0ODggOS45OTM3MDgyOSw4LjU1MTMwNjYxIDEwLjAwODI1ODEsOC41NTEzMDY2MSBDMTAuMDIyODA3OSw4LjU1MTMwNjYxIDEwLjEwMTk1MTUsOC42NDQ2Mzc2OCAxMC4xODQxNTMzLDguNzU4NjA2NjEgQzEwLjQ5OTMzNzUsOS4xOTU1OTUwMiAxMS4xMjkyNDI0LDkuNzYwMDAzODQgMTEuNjkxOTU4OCwxMC4xMDk0NjU2IEMxMi4yMzQ1NjQ4LDEwLjQ0NjQ4OTMgMTMuMDQ0NzIwNywxMC43NDAyMTA0IDEzLjcwMTEzMDQsMTAuODM3OTYzOSBDMTQuMDY1NTI0NCwxMC44OTIyMzA0IDE1LjE0MTc0NzIsMTAuODgzMDE3MSAxNS40ODg5MDM5LDEwLjgyMjY2OTcgQzE3LjQ1MTM2NzksMTAuNDgxMzE1NyAxOS4wOTk2NjcxLDkuMDY4OTExNjkgMTkuNzMwMDM1NCw3LjE4ODU2MjQ1IEMxOS45MTIyMzI0LDYuNjQ0NzkxNSAxOS45OTY5MzY0LDYuMTU1ODM5ODkgMTkuOTk5NzE2Niw1LjYzMTY5MzM0IEMyMC4wMDE3NTU1LDUuMjMwOTEzMzQgMTkuOTk0MjQ4OSw1LjE2OTQ2MDQgMTkuOTI4NTQzLDUuMDQ3MTk5NDYgQzE5LjgwODkwMDksNC44MjQ4ODE3MyAxOS42OTQ1NDEzLDQuNzEyNjYzMzIgMTkuNDc4MDU0OSw0LjYwNTE0MzcyIEwxOS4yNzM4OTQxLDQuNTAzNzA0OTIgTDE2Ljg0ODk4NzEsNC41MDM3MDQ5MiBDMTQuMDc1OTAzOSw0LjUwMzcwNDkyIDE0LjIyMTY4MDEsNC40ODk3MDA2NSAxMy45MjYxNDI4LDQuNzgzNTEzODYgQzEzLjQ2NjAxNjUsNS4yNDA5NTU4NyAxMy41ODA0Njg5LDUuOTg1NzYxNzUgMTQuMTU3MzY0Myw2LjI4ODIzNTQ5IEwxNC4zMjg4MTEyLDYuMzc4MTU3NjMgTDE2LjE1NDc2NjQsNi4zODc1NTUyMyBMMTcuOTgwODE0Miw2LjM5Njk1MjgzIEwxNy44OTQzNDk0LDYuNjM2NDA3MzcgQzE3LjIzOTA1MTgsOC40NTE0MzQwNyAxNS4yMTM4NDc2LDkuNDQyMDUxNyAxMy40MTQwMjY0LDguODI3OTgzMDIgQzEyLjI2OTEzMjIsOC40Mzc0Mjk4MSAxMS40NTA5MTM4LDcuNTg2NjcwNTkgMTEuMDg2NTE5Nyw2LjQwODAwODgzIEMxMC45OTk5NjIyLDYuMTI4MTk5ODkgMTAuOTk1MTQzMiw2LjA3ODE3MTQ5IDEwLjk5NTE0MzIsNS40NDkxNzcyMSBDMTAuOTk1MTQzMiw0LjgyMzIyMzMzIDExLjAwMDMzMjksNC43Njg3NzI1MyAxMS4wODU1OTMsNC40ODcxMjA5MiBDMTEuNTk5NTYyOCwyLjc5MDM5MzQxIDEzLjE3MTY4NCwxLjczMzcxNjE5IDE0LjkxODQ5NTYsMS45MTA3MDQzMyBDMTUuMzcwODM3MywxLjk1NjU4NjczIDE1LjcwMDU3MTMsMi4wNDM4MzcgMTYuMDc0NTEwNywyLjIxNjU4NyBDMTYuNjA0MTQyNCwyLjQ2MTI5MzE0IDE2Ljk3MDAxOTMsMi43NDIxMTU1NSAxNy4zNTI1Nzc0LDMuMTk3NDM4NDkgQzE3LjY0MjY0NjksMy41NDI2NjIxIDE3LjgwODI1NTMsMy42NDQ1NjE1NyAxOC4xMTQ1NDI4LDMuNjY2Mzk3MTcgQzE4LjUyNTM2NjUsMy42OTU2MDM0MyAxOC44MzY2NTgzLDMuNTI4NDczNTYgMTkuMDM1MzUxMywzLjE3MTkxNzU2IEMxOS4xMjIwMDE1LDMuMDE2MzA0MzUgMTkuMTM0MzI3MSwyLjk2MDkzMjIyIDE5LjEzNDMyNzEsMi43Mjg2NjQwOCBDMTkuMTM0MzI3MSwyLjQ5NDI3Njg3IDE5LjEyMjY1MDIsMi40NDMwNTA3NCAxOS4wMzQyMzkyLDIuMjkwMzg1OCBDMTguNzk1Njk2NSwxLjg3ODU0OTc5IDE4LjE5ODY5MDcsMS4yOTQ2MDg3MSAxNy42MjYwNTgzLDAuOTEzMDg0NTcyIEMxNy4wMzQ3MDU3LDAuNTE5MTIyNDMgMTYuMjM1NzYzNCwwLjE5ODEyOTg4OSAxNS41MzAyMzY1LDAuMDcwOTg1ODg2MiBDMTUuMDk0NDgzNSwtMC4wMDc0MTk1ODIxNSAxNC4xMDU2NTIzLC0wLjAwODcwOTQ0ODg0IDEzLjY0NDMyMTIsMC4wNjg2ODI1NTI5IEMxMi43NjAxMTg5LDAuMjE2ODMyOTU2IDExLjkyNDAxNDQsMC41NzgwODc3NjQgMTEuMjAzODQ1LDEuMTIzMTQ4NTggQzEwLjg3NTEzMDQsMS4zNzE5MDg1OCAxMC4zOTk3MTI5LDEuODQzMzU0ODYgMTAuMTg2NTYyOCwyLjEzMjAwODYgQzEwLjA5OTE3MTMsMi4yNTAzMDc4IDEwLjAxNzM0MDEsMi4zNDcxMzk5NCAxMC4wMDQ3MzY1LDIuMzQ3MTM5OTQgQzkuOTkyMTMyODMsMi4zNDcxMzk5NCA5Ljg5OTQ1ODg2LDIuMjM4ODgzMjcgOS43OTg3MjIyNiwyLjEwNjU3OTggQzkuNTc2Mzk3NDEsMS44MTQ2MDkyNiA5LjA2Nzg5NTM0LDEuMzEyOTQzMjUgOC43NzIzNTgwNiwxLjA5NDAzNDQ0IEM3LjcwMjI1MTc0LDAuMzAxNDExMzU4IDYuMzk5OTA0NDcsLTAuMDc4NDU0MzgzOCA1LjA2ODA4Njg3LDAuMDEzNDk0Njg0OSBNNS45MDMyNjQ2NywxLjkxNzA2MTUzIEM2LjMxNzE0NjYxLDEuOTY3MzY2MzMgNi42NDMzNTg5OCwyLjA2MzU1MzUzIDcuMDI1MDgzMDYsMi4yNDc4MjAyIEM4LjI3MDQzNTg0LDIuODQ4OTkwMjIgOS4wMzkzNTE3Niw0LjA2ODQ2NzA0IDkuMDM5MzUxNzYsNS40NDI0NTE0NyBDOS4wMzkzNTE3Niw3LjI2NzI0NDMxIDcuNzI0OTU2ODcsOC43NDA1NDg0OCA1Ljg3ODQyODA1LDguOTg1NTMxMDIgQzQuODQ5MjgzNjMsOS4xMjIwNzI2MiAzLjcxMTg5NjAyLDguNzI0NDI1MTUgMi45NTQ4NDIzNyw3Ljk2MzIxOTUzIEMyLjUxNzIzNTg5LDcuNTIzMjgyODUgMi4yNzMwMzk5OCw3LjEyODIxNTExIDIuMDg0MjYzMTEsNi41NTUxNDU3NyBDMS4zMzQxNjAwMSw0LjI3NzYwOTcxIDMuMDA2MTgzNzUsMS45MzczMzA4NiA1LjQxOTQxMzg4LDEuODg2ODQxNzkgQzUuNTI5OTczOTMsMS44ODQ1Mzg0NiA1Ljc0Nzc1Nzc1LDEuODk4MTc0MTkgNS45MDMyNjQ2NywxLjkxNzA2MTUzIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=='
-    );
-
-    // Add the submenu item with a different name but same slug as the main menu item
-    add_submenu_page(
-      'edit.php?post_type=opengraph_template', // Parent slug
-      'OG Manager',               // Page title
-      'OG Manager',                   // Menu title
-      'manage_options',                        // Capability
-      'edit.php?post_type=opengraph_template', // Menu slug
-      null                                     // Function (not needed as it's the same as the main menu)
     );
 
@@ -150 +141 @@
 
     do_action('cloudpdf-xyz_save_metabox', $post_id);
+
+    wp_redirect(admin_url('edit.php?post_type=opengraph_template'));
+    exit;
   }
 
   public function handle_template_creation()
   {
-    $templateId = isset($_POST['template_id']) ? sanitize_text_field($_POST['template_id']) : '';
-    $templateName = isset($_POST['template_name']) ? sanitize_text_field($_POST['template_name']) : '';
-    $templateVersion = isset($_POST['template_version']) ? sanitize_text_field($_POST['template_version']) : '';
+    if (!current_user_can('manage_options')) {
+      wp_die(__('You are not allowed to add Open Graph templates.', 'opengraph-xyz'));
+    }
+
+    check_admin_referer('opengraph_xyz_select_template_action', 'opengraph_xyz_select_template_nonce');
+
+    $templateId = isset($_POST['template_id']) ? sanitize_text_field(wp_unslash($_POST['template_id'])) : '';
+    $templateName = isset($_POST['template_name']) ? sanitize_text_field(wp_unslash($_POST['template_name'])) : '';
+    $templateVersion = isset($_POST['template_version']) ? sanitize_text_field(wp_unslash($_POST['template_version'])) : '';
 
     $new_post = array(
@@ -176 +176 @@
 
     if ($postId) {
-      // Redirect to the edit post screen or a confirmation page
       wp_redirect(admin_url('post.php?post=' . $postId . '&action=edit'));
       exit;
@@ -254 +253 @@
   }
 
+  /**
+   * Display shared troubleshooting guidance.
+   */
+  public function display_troubleshooting()
+  {
+    include plugin_dir_path(__FILE__) . 'views/troubleshooting.php';
+  }
+
   public function register_plugin_settings()
   {
@@ -373 +380 @@
       'default'
     );
+
+    add_meta_box(
+      'opengraph_template-troubleshooting',
+      __('Troubleshooting', 'opengraph-xyz'),
+      array($this, 'display_troubleshooting'),
+      null,
+      'normal',
+      'low'
+    );
   }
 
@@ -419 +435 @@
     global $submenu;
 
+    $parent_slug = 'edit.php?post_type=opengraph_template';
+
     // Remove default "Add New" submenu
-    if (isset($submenu['edit.php?post_type=opengraph_template'])) {
-      foreach ($submenu['edit.php?post_type=opengraph_template'] as $key => $item) {
+    if (isset($submenu[$parent_slug])) {
+      foreach ($submenu[$parent_slug] as $key => $item) {
         if ($item[2] === 'post-new.php?post_type=opengraph_template') {
-          unset($submenu['edit.php?post_type=opengraph_template'][$key]);
+          unset($submenu[$parent_slug][$key]);
           break;
         }
@@ -430 +448 @@
 
     add_submenu_page(
-      'edit.php?post_type=opengraph_template',
-      'Select OG Template',
-      'Select OG Template',
+      $parent_slug,
+      'Add OG Template',
+      'Add OG Template',
       'manage_options', // Standard capability
       'opengraph_template_selection',
@@ -438 +456 @@
       1
     );
+
+  }
+
+  /**
+   * Hide routing-only submenu rows while preserving WordPress page metadata.
+   */
+  public function hide_redundant_submenu_items()
+  {
+    echo '<style type="text/css">
+            #adminmenu .wp-submenu a[href="edit.php?post_type=opengraph_template"],
+            #adminmenu .wp-submenu a[href*="page=opengraph_template_selection"] { display: none; }
+          </style>
+          <script type="text/javascript">
+            jQuery(document).ready(function($) {
+              $("#adminmenu .wp-submenu a[href=\"edit.php?post_type=opengraph_template\"], #adminmenu .wp-submenu a[href*=\"page=opengraph_template_selection\"]").parent().remove();
+            });
+          </script>';
   }
 
@@ -483 +518 @@
 
     $variables = $data['data']['variables'];
+
+    foreach ($variables as &$variable) {
+      if (empty($variable['modifications']) || !is_array($variable['modifications'])) {
+        continue;
+      }
+
+      foreach ($variable['modifications'] as &$modification) {
+        $property = isset($modification['property']) ? $modification['property'] : '';
+        $modification['suggestedDynamicTag'] = opengraphxyz_get_suggested_dynamic_tag($variable, $property);
+      }
+      unset($modification);
+    }
+    unset($variable);
 
     wp_send_json_success(array('variables' => $variables));
@@ -577 +625 @@
     global $pagenow, $typenow, $post;
 
+    if ($this->is_opengraph_template_selection_page()) {
+      return;
+    }
+
     if (($pagenow == 'edit.php' || $pagenow == 'post.php') && $typenow == 'opengraph_template') {
-      $customButton = '<a href="edit.php?post_type=opengraph_template&page=opengraph_template_selection" class="page-title-action title-new-template">Select OG Template</a>';
+      $customButton = $pagenow == 'edit.php'
+        ? '<a href="edit.php?post_type=opengraph_template&page=opengraph_template_selection" class="page-title-action title-new-template">Add OG Template</a>'
+        : '';
 
       // Add Edit on Open Graph button only on post edit page (post.php) and if post has a template
@@ -590 +644 @@
       }
 
-      // Combine both buttons into one string (Edit on Open Graph first, then Select OG Template)
+      // Show Edit on Open Graph on detail pages and Add OG Template on the overview.
       $allButtons = $editButton . $customButton;
 
@@ -610 +664 @@
   {
     global $pagenow, $typenow;
+
+    if ($this->is_opengraph_template_selection_page()) {
+      return;
+    }
 
     if (($pagenow == 'edit.php' || $pagenow == 'post.php') && $typenow == 'opengraph_template') {

opengraph-xyz/tags/1.6.0/src/Plugin.php

@@ -131 +131 @@
       'name_admin_bar' => _x('OG Image Template', 'add new on admin bar', 'opengraph-xyz'),
       'add_new' => _x('Add New', 'template', 'opengraph-xyz'),
-      'add_new_item' => __('Select OG Template', 'opengraph-xyz'),
+      'add_new_item' => __('Add OG Template', 'opengraph-xyz'),
       'new_item' => __('New Template', 'opengraph-xyz'),
       'edit_item' => __('Match Variables', 'opengraph-xyz'),

opengraph-xyz/tags/1.6.0/src/functions.php

@@ -16 +16 @@
 function opengraphxyz_get_base_url()
 {
-    return defined('OPENGRAPHXYZ_BASE_URL') ? OPENGRAPHXYZ_BASE_URL : 'https://dashboard.opengraph.xyz';
+    return defined('OPENGRAPHXYZ_BASE_URL') ? OPENGRAPHXYZ_BASE_URL : 'https://www.opengraph.xyz';
+}
+
+/**
+ * Get the WordPress integration documentation URL.
+ *
+ * @param string $section Optional documentation section anchor.
+ * @return string The WordPress documentation URL.
+ */
+function opengraphxyz_get_wordpress_docs_url($section = '')
+{
+    $url = opengraphxyz_get_base_url() . '/docs/wordpress';
+
+    return empty($section) ? $url : $url . '#' . sanitize_title($section);
+}
+
+/**
+ * Suggest a WordPress dynamic tag for a common template variable.
+ *
+ * @param array  $variable Template variable data.
+ * @param string $property Modification property.
+ * @return string Suggested dynamic tag, or an empty string when none applies.
+ */
+function opengraphxyz_get_suggested_dynamic_tag($variable, $property)
+{
+    $suggestions = array(
+        'title' => array(
+            'properties' => array('text'),
+            'tag' => '{post_title}',
+        ),
+        'description' => array(
+            'properties' => array('text'),
+            'tag' => '{post_excerpt}',
+        ),
+        'image' => array(
+            'properties' => array('src', 'url'),
+            'tag' => '{featured_image}',
+        ),
+        'url' => array(
+            'properties' => array('text', 'url'),
+            'tag' => '{post_url}',
+        ),
+        'link' => array(
+            'properties' => array('text', 'url'),
+            'tag' => '{post_url}',
+        ),
+    );
+
+    $variable_names = array_filter(array($variable['name'] ?? '', $variable['id'] ?? ''));
+
+    foreach ($variable_names as $variable_name) {
+        $variable_name = strtolower((string) $variable_name);
+        $variable_name = preg_replace('/[^a-z0-9]+/', '_', $variable_name);
+        $variable_name = trim($variable_name, '_');
+
+        if (preg_match('/^image_?\d+$/', $variable_name)) {
+            $variable_name = 'image';
+        }
+
+        if (!isset($suggestions[$variable_name])) {
+            continue;
+        }
+
+        $suggestion = $suggestions[$variable_name];
+
+        if (in_array(strtolower($property), $suggestion['properties'], true)) {
+            return $suggestion['tag'];
+        }
+    }
+
+    return '';
 }
 
@@ -39 +109 @@
 {
     return defined('OPENGRAPHXYZ_BASE_IMAGE_URL') ? OPENGRAPHXYZ_BASE_IMAGE_URL : 'https://ogcdn.net';
-}
-
-/**
- * Get the create template base URL without URL encoding for JavaScript concatenation
- * 
- * @return string The base URL for creating templates
- */
-function opengraphxyz_get_create_template_baseurl_raw()
-{
-    $base_url = opengraphxyz_get_base_url();
-    return $base_url . "/register?redirect=/org/[organizationId]/create-template/";
-}
-
-// /org/1/template-editor/c91f620c-b194-449e-86c6-f332e98caf2d
-
-/**
- * Get the OpenGraph.xyz settings URL with wp parameter
- * 
- * @return string The settings URL for OpenGraph.xyz
- */
-function opengraphxyz_get_settings_url()
-{
-    $base_url = opengraphxyz_get_base_url();
-    $current_domain = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https://' : 'http://') . ($_SERVER['HTTP_HOST'] ?? '');
-
-    return $base_url . "/register?redirect=/org/[organizationId]/settings/api-keys?wp=" . urlencode($current_domain);
 }
 
@@ -179 +223 @@
 {
     $base_url = opengraphxyz_get_base_url();
-    return $base_url . "/register?redirect=/org/[organizationId]/template-editor/" . $template_id;
-}
+    return $base_url . "/generate/" . $template_id;
+}

opengraph-xyz/tags/1.6.0/src/templates/admin.php

@@ -10 +10 @@
 }
 
-// Get the settings URL using the helper function
-$settings_url = opengraphxyz_get_settings_url();
+$settings_url = opengraphxyz_get_base_url() . '/settings/api-keys';
 
 // Check if user was redirected from OpenGraph.xyz
@@ -59 +58 @@
     <?php if ($redirected_from_opengraphxyz): ?>
         <!-- Message for users redirected from OpenGraph.xyz -->
-        <div class="api-key-info-banner" style="margin-top: 10px; max-width: 700px; border: 1px solid #007cba; background-color: #eef5fa; color: #007cba; padding: 15px; margin-bottom: 20px; border-radius: 5px;">
+        <div class="api-key-info-banner"
+            style="margin-top: 10px; max-width: 700px; border: 1px solid #007cba; background-color: #eef5fa; color: #007cba; padding: 15px; margin-bottom: 20px; border-radius: 5px;">
             <strong>Paste your API key from OpenGraph.xyz in the box below and click save</strong>
         </div>
     <?php else: ?>
         <!-- Banner for API Key information -->
-        <div class="api-key-info-banner" style="margin-top: 10px; max-width: 700px; border: 1px solid #007cba; background-color: #eef5fa; color: #007cba; padding: 15px; margin-bottom: 20px; border-radius: 5px;">
-            <strong>Need an API Key?</strong> Obtain your API key from your OpenGraph.xyz account by clicking the button below. In the OpenGraph.xyz dashboard, go to <em>Settings > API Keys</em> to find your existing keys or create a new one by clicking on <em>Create new API key</em>.
+        <div class="api-key-info-banner"
+            style="margin-top: 10px; max-width: 700px; border: 1px solid #007cba; background-color: #eef5fa; color: #007cba; padding: 15px; margin-bottom: 20px; border-radius: 5px;">
+            <strong>Need an API Key?</strong> Get your API key from your OpenGraph.xyz API Key Settings page.
 
             <div style="margin-top:20px;">
-                <a href="<?php echo esc_url($settings_url); ?>" target="_blank" class="button button-primary" style="background: #0073aa; border-color: #0073aa; color: white; padding: 8px 16px; font-size: 14px; line-height: 1.4; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block;">
-                    <span class="dashicons dashicons-external" style="margin-right: 5px;"></span>
-                    Go to OpenGraph.xyz Settings
+                <a href="<?php echo esc_url($settings_url); ?>" target="_blank" class="button button-primary"
+                    style="background: #0073aa; border-color: #0073aa; color: white; padding: 8px 16px; font-size: 14px; line-height: 1.4; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;">
+                    <span class="dashicons dashicons-external" style="margin: 0; line-height: 1;"></span>
+                    OpenGraph API Key Settings
                 </a>
             </div>
@@ -89 +91 @@
                     <th scope="row">API Key</th>
                     <td>
-                        <textarea 
-                            name="opengraph_xyz_api_key" 
+                        <textarea name="opengraph_xyz_api_key"
                             style="width: 100%; min-height: 100px; font-family: 'Courier New', monospace; font-size: 13px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; resize: vertical;"
-                            placeholder="Paste your OpenGraph.xyz API key here..."
-                        ><?php echo esc_textarea(get_option('opengraph_xyz_api_key')); ?></textarea>
-                        <p class="description">Your API key will be securely stored and used to connect to OpenGraph.xyz services.</p>
+                            placeholder="Paste your OpenGraph.xyz API key here..."><?php echo esc_textarea(get_option('opengraph_xyz_api_key')); ?></textarea>
+                        <p class="description">Your API key will be securely stored and used to connect to OpenGraph.xyz
+                            services.</p>
                     </td>
                 </tr>
@@ -204 +205 @@
 
     // Auto-hide toast after 5 seconds
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
         const toast = document.getElementById('opengraph-xyz-toast');
         if (toast) {
@@ -221 +222 @@
     }
 
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
         const errorToast = document.getElementById('opengraph-xyz-error-toast');
         if (errorToast) {
@@ -231 +232 @@
 
     // Show loading overlay when form is submitted
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
         const form = document.querySelector('form[action="options.php"]');
         if (form) {
-            form.addEventListener('submit', function() {
+            form.addEventListener('submit', function () {
                 showLoadingOverlay();
             });

opengraph-xyz/tags/1.6.0/src/templates/template_selection.php

@@ -2 +2 @@
 
 // Exit if accessed directly.
-defined( 'ABSPATH' ) || exit;
+defined('ABSPATH') || exit;
 
 // Check user capabilities
-if ( ! current_user_can( 'manage_options' ) ) {
+if (!current_user_can('manage_options')) {
     return;
 }
 
-// Get the create template base URL
-$create_template_base_url = opengraphxyz_get_create_template_baseurl_raw();
+$create_template_url = opengraphxyz_get_base_url() . '/generate';
 
 $apiKey = get_option('opengraph_xyz_api_key'); // Assuming the API key is stored with this name
@@ -18 +17 @@
 $hasApiKey = !empty($apiKey);
 
-// Split templates into user templates and stock templates
 $userTemplates = array();
-$stockTemplates = array();
 
-if ( isset( $templates['edges'] ) && is_array( $templates['edges'] ) ) {
-    foreach ( $templates['edges'] as $edge ) {
+if (isset($templates['edges']) && is_array($templates['edges'])) {
+    foreach ($templates['edges'] as $edge) {
         $template = $edge['node'];
-        if ( isset( $template['organizationId'] ) && !empty( $template['organizationId'] ) ) {
+        if (isset($template['organizationId']) && !empty($template['organizationId'])) {
             $userTemplates[] = $edge;
-        } else {
-            $stockTemplates[] = $edge;
         }
     }
 }
-
-// Determine default tab - if user has templates, default to "Your Templates", otherwise "Stock Templates"
-$defaultTab = !empty($userTemplates) ? 'your-templates' : 'stock-templates';
 
 // Template selection view
@@ -40 +32 @@
 
 <div class="wrap">
-    <h1 style="margin-bottom: 20px">Select OG Image Template</h1>
+    <h1 class="wp-heading-inline">Select OG Image Template</h1>
+    <a href="<?php echo esc_url($create_template_url); ?>" target="_blank" rel="noopener noreferrer"
+        class="page-title-action">Add new template</a>
+    <hr class="wp-header-end">
 
-    <?php if ( isset( $templates['authenticated'] ) && ! $templates['authenticated'] ) : ?>
+    <?php if (isset($templates['authenticated']) && !$templates['authenticated']): ?>
         <!-- Banner for unauthenticated users -->
-        <div class="unauthenticated-banner" style="border: 1px solid #eab308; color: #854d0e; background-color: #ffffcc; padding: 20px; margin-bottom: 20px; border-radius: 6px; display: flex; align-items: center; gap: 10px;">
-            <svg style="width: 1.5rem; height: 1.5rem; fill: #eab308; flex-shrink: 0;" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z"></path>
+        <div class="unauthenticated-banner"
+            style="border: 1px solid #eab308; color: #854d0e; background-color: #ffffcc; padding: 20px; margin-bottom: 20px; border-radius: 6px; display: flex; align-items: center; gap: 10px;">
+            <svg style="width: 1.5rem; height: 1.5rem; fill: #eab308; flex-shrink: 0;" width="24" height="24"
+                fill="currentColor" viewBox="0 0 24 24">
+                <path
+                    d="M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z">
+                </path>
             </svg>
-            <p style="margin: 0; font-size: 1.2em;">Create unique, custom Open Graph image templates that truly represent your brand's identity.</p>
-            <a href="https://www.opengraph.xyz/get-started" target="_blank" style="text-decoration: underline; font-weight: bold; color: #854d0e; flex-shrink: 0;">Learn More</a>
+            <p style="margin: 0; font-size: 1.2em;">Create unique, custom Open Graph image templates that truly represent
+                your brand's identity.</p>
+            <a href="https://www.opengraph.xyz/get-started" target="_blank"
+                style="text-decoration: underline; font-weight: bold; color: #854d0e; flex-shrink: 0;">Learn More</a>
         </div>
     <?php endif; ?>
 
-    <!-- Tab Navigation -->
-    <div class="tab-navigation" style="margin-bottom: 0; border-bottom: 1px solid #dcdcde;">
-        <button class="tab-button <?php echo $defaultTab === 'your-templates' ? 'active' : ''; ?>" data-tab="your-templates" style="padding: 12px 24px; margin-right: 0; border: 1px solid #dcdcde; border-bottom: none; background: <?php echo $defaultTab === 'your-templates' ? '#fff' : '#f9f9f9'; ?>; cursor: pointer; border-radius: 4px 4px 0 0; font-weight: 500; color: <?php echo $defaultTab === 'your-templates' ? '#1d2327' : '#646970'; ?>; position: relative; top: 1px;">
-            Your Templates (<?php echo count($userTemplates); ?>)
-        </button>
-        <button class="tab-button <?php echo $defaultTab === 'stock-templates' ? 'active' : ''; ?>" data-tab="stock-templates" style="padding: 12px 24px; margin-right: 0; border: 1px solid #dcdcde; border-bottom: none; background: <?php echo $defaultTab === 'stock-templates' ? '#fff' : '#f9f9f9'; ?>; cursor: pointer; border-radius: 4px 4px 0 0; font-weight: 500; color: <?php echo $defaultTab === 'stock-templates' ? '#1d2327' : '#646970'; ?>; position: relative; top: 1px;">
-            Stock Templates (<?php echo count($stockTemplates); ?>)
-        </button>
+    <div
+        style="margin-top: 20px; margin-bottom: 20px; border: 1px solid #007cba; background-color: #eef5fa; color: #007cba; padding: 15px; border-radius: 5px;">
+        <strong>Choose one of your templates to add it to WordPress.</strong>
     </div>
+    <?php if (!empty($userTemplates)): ?>
+        <div class="template-grid"
+            style="display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap: 20px;">
+            <?php foreach ($userTemplates as $edge):
+                $template = $edge['node'];
+                $name = $template['name'];
+                $id = $template['id'];
+                $version = $template['activeVersion'];
+                $versionNumber = $version['versionNumber'];
 
-    <!-- Your Templates Tab -->
-    <div id="your-templates" class="tab-content" style="display: <?php echo $defaultTab === 'your-templates' ? 'block' : 'none'; ?>;">
-        <div style="margin-top: 20px; margin-bottom: 20px; border: 1px solid #007cba; background-color: #eef5fa; color: #007cba; padding: 15px; border-radius: 5px;">
-            <strong>Click a template card to create a dynamic Open Graph image template.</strong>
-        </div>
-        <?php if ( !empty($userTemplates) ) : ?>
-            <div class="template-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap: 20px;">
-                <?php foreach ( $userTemplates as $edge ) :
-                    $template       = $edge['node'];
-                    $name           = $template['name'];
-                    $id             = $template['id'];
-                    $premium        = $template['isPremium'];
-                    $organizationId = $template['organizationId'];
-                    $version        = $template['activeVersion'];
-                    $versionNumber  = $version['versionNumber'];
-                    
-                    // Generate image URL
-                    $imageUrl = opengraphxyz_generate_image_url($id, $versionNumber, $version['data']['variables']);
-                    ?>
-                    <form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" class="template-form" id="template-form-<?php echo esc_attr( $id ); ?>">
-                        <?php wp_nonce_field( 'opengraph_xyz_select_template_action', 'opengraph_xyz_select_template_nonce' ); ?>
+                // Generate image URL
+                $imageUrl = opengraphxyz_generate_image_url($id, $versionNumber, $version['data']['variables']);
+                ?>
+                <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" class="template-form"
+                    id="template-form-<?php echo esc_attr($id); ?>">
+                    <?php wp_nonce_field('opengraph_xyz_select_template_action', 'opengraph_xyz_select_template_nonce'); ?>
 
-                        <input type="hidden" name="action" value="create_opengraph_template">
-                        <input type="hidden" name="template_id" value="<?php echo esc_attr( $id ); ?>">
-                        <input type="hidden" name="template_name" value="<?php echo esc_attr( $name ); ?>">
-                        <input type="hidden" name="template_version" value="<?php echo esc_attr( $versionNumber ); ?>">
-                        
-                        <div onclick="handleTemplateClick('<?php echo esc_attr( $id ); ?>', 'user')" style="cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 1px -1px rgba(0,0,0,.1); border: 1px solid #dcdcde;">
-                            <div class="template-card" style="position: relative; padding-top: 52.5%; background-color: #fff">
-                                <img src="<?php echo esc_url( $imageUrl ); ?>" alt="<?php echo esc_attr( $name ); ?>" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
-                            </div>
-                            <div class="template-details" style="width: 100%; background: rgba(255,255,255,.65); color: #000; text-align: center; font-size: 16px;">
-                                <div style="padding: 1rem; display: flex; align-items: center; justify-content: center; gap: .5rem; border-top: 1px solid #dcdcde;">
-                                    <?php echo esc_html( $name ); ?>
-                                </div>
+                    <input type="hidden" name="action" value="create_opengraph_template">
+                    <input type="hidden" name="template_id" value="<?php echo esc_attr($id); ?>">
+                    <input type="hidden" name="template_name" value="<?php echo esc_attr($name); ?>">
+                    <input type="hidden" name="template_version" value="<?php echo esc_attr($versionNumber); ?>">
+
+                    <div onclick="handleTemplateClick('<?php echo esc_attr($id); ?>')"
+                        style="cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 1px -1px rgba(0,0,0,.1); border: 1px solid #dcdcde;">
+                        <div class="template-card" style="position: relative; padding-top: 52.5%; background-color: #fff">
+                            <img src="<?php echo esc_url($imageUrl); ?>" alt="<?php echo esc_attr($name); ?>"
+                                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
+                        </div>
+                        <div class="template-details"
+                            style="width: 100%; background: rgba(255,255,255,.65); color: #000; text-align: center; font-size: 16px;">
+                            <div
+                                style="padding: 1rem; display: flex; align-items: center; justify-content: center; gap: .5rem; border-top: 1px solid #dcdcde;">
+                                <?php echo esc_html($name); ?>
                             </div>
                         </div>
-                    </form>
-                <?php endforeach; ?>
-            </div>
-        <?php elseif ( !$hasApiKey ) : ?>
-            <div style="text-align: center; padding: 40px; background: #f9f9f9; border-radius: 6px;">
-                <p style="font-size: 1.2em; color: #666; margin-bottom: 20px;">Connect your Open Graph account with an API Key to see your custom templates.</p>
-                <a href="<?php echo esc_url( admin_url( 'edit.php?post_type=opengraph_template&page=og-xyz-settings' ) ); ?>" style="background: #0073aa; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px;">Add an API Key</a>
-            </div>
-        <?php else : ?>
-            <div style="text-align: center; padding: 40px; background: #f9f9f9; border-radius: 6px;">
-                <p style="font-size: 1.2em; color: #666; margin-bottom: 20px;">You don't have any custom templates yet.</p>
-                <a href="https://www.opengraph.xyz/get-started" target="_blank" style="background: #0073aa; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px;">Create Your First Template</a>
-            </div>
-        <?php endif; ?>
-    </div>
-
-    <!-- Stock Templates Tab -->
-    <div id="stock-templates" class="tab-content" style="display: <?php echo $defaultTab === 'stock-templates' ? 'block' : 'none'; ?>;">
-        <div style="margin-top: 20px; margin-bottom: 20px; border: 1px solid #007cba; background-color: #eef5fa; color: #007cba; padding: 15px; border-radius: 5px;">
-            <strong>Click a card to create a template based on the example image. (Redirects to Open Graph.xyz). <br/><br/>When you're done, return here and refresh the page to start matching your variables.</strong>
+                    </div>
+                </form>
+            <?php endforeach; ?>
         </div>
-        <?php if ( !empty($stockTemplates) ) : ?>
-            <div class="template-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap: 20px;">
-                <?php foreach ( $stockTemplates as $edge ) :
-                    $template       = $edge['node'];
-                    $name           = $template['name'];
-                    $id             = $template['id'];
-                    $premium        = $template['isPremium'];
-                    $organizationId = $template['organizationId'];
-                    $version        = $template['activeVersion'];
-                    $versionNumber  = $version['versionNumber'];
-                    
-                    // Generate image URL
-                    $imageUrl = opengraphxyz_generate_image_url($id, $versionNumber, $version['data']['variables']);
-                    ?>
-                    <?php if ( $premium ) : ?>
-                        <!-- Premium template -->
-                        <a href="https://www.opengraph.xyz/get-started" target="_blank" class="template-card" style="text-decoration: none">
-                    <?php else : ?>
-                        <form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" class="template-form" id="template-form-<?php echo esc_attr( $id ); ?>">
-                            <?php wp_nonce_field( 'opengraph_xyz_select_template_action', 'opengraph_xyz_select_template_nonce' ); ?>
-
-                            <input type="hidden" name="action" value="create_opengraph_template">
-                            <input type="hidden" name="template_id" value="<?php echo esc_attr( $id ); ?>">
-                            <input type="hidden" name="template_name" value="<?php echo esc_attr( $name ); ?>">
-                            <input type="hidden" name="template_version" value="<?php echo esc_attr( $versionNumber ); ?>">
-                    <?php endif; ?>
-                        <div onclick="handleTemplateClick('<?php echo esc_attr( $id ); ?>', 'stock')" style="cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 1px -1px rgba(0,0,0,.1); border: 1px solid #dcdcde;">
-                            <div class="template-card" style="position: relative; padding-top: 52.5%; background-color: #fff">
-                                <img src="<?php echo esc_url( $imageUrl ); ?>" alt="<?php echo esc_attr( $name ); ?>" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
-                            </div>
-                            <div class="template-details" style="width: 100%; background: rgba(255,255,255,.65); color: #000; text-align: center; font-size: 16px;">
-                                <div style="padding: 1rem; display: flex; align-items: center; justify-content: center; gap: .5rem; border-top: 1px solid #dcdcde;">
-                                    <?php echo esc_html( $name ); ?>
-                                    <?php if ( isset( $premium ) ) : ?>
-                                        <span style="font-size: .75rem; line-height: 1rem; padding: .25rem .5rem; border-radius: 9999px; background-color: #ffffcc; color: #854d0e; display: inline-flex; -moz-column-gap: .375rem; column-gap: 0.375rem; align-items: center;">
-                                            <svg style="width: 1rem; height: 1rem; fill: #eab308;" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
-                                                <path d="M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z"></path>
-                                            </svg>
-                                            Premium
-                                        </span>
-                                    <?php endif; ?>
-                                </div>
-                            </div>
-                        </div>
-                    <?php if ( $premium ) : ?>
-                        </a>
-                    <?php else : ?>
-                        </form>
-                    <?php endif; ?>
-                <?php endforeach; ?>
-            </div>
-        <?php else : ?>
-            <p>No stock templates available.</p>
-        <?php endif; ?>
-    </div>
+    <?php elseif (!$hasApiKey): ?>
+        <div style="text-align: center; padding: 40px; background: #f9f9f9; border-radius: 6px;">
+            <p style="font-size: 1.2em; color: #666; margin-bottom: 20px;">Connect your Open Graph account with an API
+                Key to see your custom templates.</p>
+            <a href="<?php echo esc_url(admin_url('edit.php?post_type=opengraph_template&page=og-xyz-settings')); ?>"
+                style="background: #0073aa; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px;">Add
+                an API Key</a>
+        </div>
+    <?php else: ?>
+        <div style="text-align: center; padding: 40px; background: #f9f9f9; border-radius: 6px;">
+            <p style="font-size: 1.2em; color: #666; margin-bottom: 20px;">You don't have any custom templates yet.</p>
+            <a href="<?php echo esc_url($create_template_url); ?>" target="_blank"
+                style="background: #0073aa; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px;">Create
+                Your First Template</a>
+        </div>
+    <?php endif; ?>
 </div>
 
@@ -182 +119 @@
 
 <script>
-// Check if user has API key
-const hasApiKey = <?php echo $hasApiKey ? 'true' : 'false'; ?>;
+    // Check if user has API key
+    const hasApiKey = <?php echo $hasApiKey ? 'true' : 'false'; ?>;
 
-// Get the create template base URL from PHP
-const createTemplateBaseUrl = '<?php echo esc_js($create_template_base_url); ?>';
+    // Debug: Log template data
+    <?php if (isset($templates['edges']) && is_array($templates['edges'])): ?>
+        console.log('Template data:', <?php echo json_encode($templates['edges']); ?>);
+    <?php endif; ?>
 
-// Debug: Log template data
-<?php if ( isset( $templates['edges'] ) && is_array( $templates['edges'] ) ) : ?>
-console.log('Template data:', <?php echo json_encode($templates['edges']); ?>);
-<?php endif; ?>
+    // Handle template click - check for API key first
+    function handleTemplateClick(templateId) {
+        if (!hasApiKey) {
+            // Show API key modal if no API key
+            showApiKeyModal();
+            return;
+        }
 
-// Tab functionality
-document.addEventListener('DOMContentLoaded', function() {
-    const tabButtons = document.querySelectorAll('.tab-button');
-    const tabContents = document.querySelectorAll('.tab-content');
-
-    tabButtons.forEach(button => {
-        button.addEventListener('click', function() {
-            const targetTab = this.getAttribute('data-tab');
-            
-            // Update button styles
-            tabButtons.forEach(btn => {
-                btn.style.background = '#f9f9f9';
-                btn.style.color = '#646970';
-                btn.classList.remove('active');
-            });
-            this.style.background = '#fff';
-            this.style.color = '#1d2327';
-            this.classList.add('active');
-            
-            // Show/hide tab content
-            tabContents.forEach(content => {
-                content.style.display = 'none';
-            });
-            document.getElementById(targetTab).style.display = 'block';
-        });
-    });
-});
-
-// Handle template click - check for API key first
-function handleTemplateClick(templateId, templateType) {
-    if (!hasApiKey) {
-        // Show API key modal if no API key
-        showApiKeyModal();
-        return;
-    }
-    
-    if (templateType === 'user') {
-        // This is a user template - submit the form
         var formId = "template-form-" + templateId;
         const form = document.getElementById(formId);
@@ -238 +142 @@
             form.submit();
         }
-    } else {
-        // This is a stock template - use the existing behavior
-        submitTemplateForm(templateId);
     }
-}
-
-// Prevent multiple template creations when choosing a template
-function submitTemplateForm(templateId) {
-    const createTemplateUrl = createTemplateBaseUrl + templateId;
-    console.log(createTemplateUrl);
-    window.open(createTemplateUrl, '_blank');
-}
 </script>

opengraph-xyz/tags/1.6.0/src/ui/api-key-modal.php

@@ -1 +1 @@
 <?php
 // Exit if accessed directly.
-defined( 'ABSPATH' ) || exit;
+defined('ABSPATH') || exit;
 
-// Get the settings URL using the helper function
-$settings_url = opengraphxyz_get_settings_url();
+$settings_url = opengraphxyz_get_base_url() . '/settings/api-keys';
 ?>
 
-<div id="api-key-modal" class="api-key-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; align-items: center; justify-content: center;">
-    <div class="modal-content" style="background: white; padding: 2rem; border-radius: 8px; max-width: 500px; width: 90%; text-align: center; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);">
+<div id="api-key-modal" class="api-key-modal"
+    style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; align-items: center; justify-content: center;">
+    <div class="modal-content"
+        style="background: white; padding: 2rem; border-radius: 8px; max-width: 500px; width: 90%; text-align: center; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);">
         <div style="margin-bottom: 1rem;">
-            <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../../assets/icon-128x128.png'); ?>" alt="OpenGraph Logo" style="width: 3rem; height: 3rem; margin: 0 auto 1rem; display: block;">
+            <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../../assets/icon-128x128.png'); ?>"
+                alt="OpenGraph Logo" style="width: 3rem; height: 3rem; margin: 0 auto 1rem; display: block;">
         </div>
-        
+
         <div class="modal-header" style="margin-bottom: 1rem;">
             <h2 style="margin: 0; color: #333; font-size: 1.5rem;">API Key Required</h2>
         </div>
-        
+
         <div class="modal-body" style="margin-bottom: 2rem;">
             <p style="margin: 0; color: #666; font-size: 1.1rem; line-height: 1.5;">
@@ -22 +24 @@
             </p>
         </div>
-        
+
         <div class="modal-footer" style="display: flex; gap: 1rem; justify-content: center;">
-            <button type="button" class="button button-secondary" onclick="closeApiKeyModal()" style="padding: 0.5rem 1rem; border: 1px solid #ddd; background: #f9f9f9; border-radius: 4px; cursor: pointer;">
+            <button type="button" class="button button-secondary" onclick="closeApiKeyModal()"
+                style="padding: 0.5rem 1rem; border: 1px solid #ddd; background: #f9f9f9; border-radius: 4px; cursor: pointer;">
                 Cancel
             </button>
-            <a id="register-link" href="<?php echo esc_url($settings_url); ?>" target="_blank" class="button button-primary" style="padding: 0.5rem 1rem; background: #0073aa; color: white; text-decoration: none; border-radius: 4px; display: inline-block;">
+            <a id="register-link" href="<?php echo esc_url($settings_url); ?>" target="_blank"
+                class="button button-primary"
+                style="padding: 0.5rem 1rem; background: #0073aa; color: white; text-decoration: none; border-radius: 4px; display: inline-block;">
                 Get API Key
             </a>
@@ -35 +40 @@
 
 <script>
-function showApiKeyModal() {
-    const modal = document.getElementById('api-key-modal');
-    modal.style.display = 'flex';
-}
+    function showApiKeyModal() {
+        const modal = document.getElementById('api-key-modal');
+        modal.style.display = 'flex';
+    }
 
-function closeApiKeyModal() {
-    const modal = document.getElementById('api-key-modal');
-    modal.style.display = 'none';
-}
+    function closeApiKeyModal() {
+        const modal = document.getElementById('api-key-modal');
+        modal.style.display = 'none';
+    }
 
-// Close modal when clicking outside
-document.addEventListener('DOMContentLoaded', function() {
-    const modal = document.getElementById('api-key-modal');
-    modal.addEventListener('click', function(e) {
-        if (e.target === modal) {
-            closeApiKeyModal();
-        }
+    // Close modal when clicking outside
+    document.addEventListener('DOMContentLoaded', function () {
+        const modal = document.getElementById('api-key-modal');
+        modal.addEventListener('click', function (e) {
+            if (e.target === modal) {
+                closeApiKeyModal();
+            }
+        });
     });
-});
-</script> 
+</script>

opengraph-xyz/tags/1.6.0/src/views/modifications.php

@@ -9 +9 @@
 $custom_fields = empty($opengraphxyz['custom_fields']) ? array() : $opengraphxyz['custom_fields'];
 $dynamic_tags = wp_list_pluck(opengraphxyz_init()->get_tags(), 'description');
+$variable_mapping_docs_url = opengraphxyz_get_wordpress_docs_url('variable-mapping');
 
 wp_nonce_field('opengraph-xyz', 'opengraph-xyz-nonce');
@@ -39 +40 @@
 </style>
 
+<div class="notice notice-info inline" style="margin: 0 0 20px;">
+  <p>
+    <strong><?php esc_html_e('Choose which WordPress content should appear in your Open Graph image.', 'opengraph-xyz'); ?></strong>
+  </p>
+  <p>
+    <?php esc_html_e('First, select the template version you want to use. Then use the dropdowns below to connect the template\'s text and images to details from each WordPress post, such as its title, excerpt, or featured image. Choose Default to keep the text or image already saved in your OpenGraph.xyz template.', 'opengraph-xyz'); ?>
+    <a href="<?php echo esc_url($variable_mapping_docs_url); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e('Learn about variable mapping', 'opengraph-xyz'); ?></a>.
+  </p>
+</div>
+
 <?php if (!empty($thumbnailUrl)): ?>
 <div style="margin-bottom: 20px; padding: 15px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px;">
@@ -70 +81 @@
             <select name="opengraph[modifications][<?php echo esc_attr($variable['id']); ?>][<?php echo esc_attr($modification['property']); ?>]" id="opengraph-modification-<?php echo esc_attr($variable['id']); ?>__<?php echo esc_attr($modification['property']); ?>" class="regular-text">
               <?php
-              $current_value = isset($current_modifications[$variable['id']][$modification['property']]) ? $current_modifications[$variable['id']][$modification['property']] : '';
+              $has_saved_mapping = isset($current_modifications[$variable['id']]) && array_key_exists($modification['property'], $current_modifications[$variable['id']]);
+              $current_value = $has_saved_mapping ? $current_modifications[$variable['id']][$modification['property']] : opengraphxyz_get_suggested_dynamic_tag($variable, $modification['property']);
               $custom_field = isset($custom_fields[$variable['id']][$modification['property']]) ? $custom_fields[$variable['id']][$modification['property']] : '';
               ?>
-              <option value="_" <?php selected($current_value, ''); ?>><?php esc_html_e('Default', 'opengraph-xyz'); ?></option>
+              <option value="_" <?php selected($current_value, '_'); ?>><?php esc_html_e('Default', 'opengraph-xyz'); ?></option>
               <?php foreach ($dynamic_tags as $dynamic_tag => $description): ?>
                                 <option value="{<?php echo esc_attr($dynamic_tag); ?>}" <?php selected($current_value, '{' . $dynamic_tag . '}'); ?>>
@@ -309 +321 @@
 
                 // Add default option
-                var defaultOption = $('<option></option>').attr({value: ''}).text('Default');
+                var defaultOption = $('<option></option>').attr({value: '_'}).text('Default');
                 select.append(defaultOption);
 
@@ -353 +365 @@
                   select.val(currentSelections[selectId]);
                   toggleCustomFieldInput(select);
-                } else {
+                } else if (modification.suggestedDynamicTag) {
+                  select.val(modification.suggestedDynamicTag);
                 }
 

opengraph-xyz/trunk/opengraph-xyz.php

@@ -4 +4 @@
 Plugin URI: https://github.com/opengraph-xyz/opengraph-wp
 Description: Dynamic Open Graph images for your website
-Version: 1.5.7
+Version: 1.6.0
 Author: OpenGraph.xyz
-Author URI: https://opengraph.xyz
+Author URI: https://www.opengraph.xyz
 License: GPLv3
 License URI: https://www.gnu.org/licenses/gpl-3.0.html

opengraph-xyz/trunk/readme.txt

@@ -5 +5 @@
 Tested up to: 7.1
 Requires PHP: 5.6
-Version: 1.5.7
-Stable tag: 1.5.7
+Version: 1.6.0
+Stable tag: 1.6.0
 License: GPLv3
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
@@ -94 +94 @@
 == Changelog ==
 
+= 1.6.0 =
+* Add troubleshooting help and improve the plugin menu and user experience
+
 = 1.5.7 =
 * Fix plugin packaging so runtime assets are included in plugin releases

opengraph-xyz/trunk/src/Admin.php

@@ -17 +17 @@
     add_action('admin_head', array($this, 'add_custom_button'));
     add_action('admin_head', array($this, 'hide_add_new_button'));
+    add_action('admin_head', array($this, 'hide_redundant_submenu_items'));
     add_action('admin_init', array($this, 'register_plugin_settings'));
 
@@ -57 +58 @@
       null,
       'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIxMXB4IiB2aWV3Qm94PSIwIDAgMjAgMTEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwIiBmaWxsPSIjMDAwMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNNS4wNjgwODY4NywwLjAxMzQ5NDY4NDkgQzMuNTkxODgzMjMsMC4xMTU0ODYyODcgMi4xNTQxMzkyOCwwLjg2MzYwODk3MSAxLjIyMTI4MzEyLDIuMDE0OTk5MjYgQy0wLjM2NDczOTE3OCwzLjk3Mjc0MDUxIC0wLjQxMDMzNDc3LDYuNzIzNDczMzcgMS4xMDk4ODkwMSw4LjczMzczMDYxIEMxLjk1NzQ4NTEyLDkuODU0NjI0NzcgMy4yNjQ3NDQxMiwxMC42Mjk5MjY4IDQuNjU3MzU1ODQsMTAuODM3ODcxNyBDNS4wMDQ3OTA1NSwxMC44ODk3NDI4IDYuMDMyMDgxNDksMTAuODgzMDE3MSA2LjM1MzQ3NDgxLDEwLjgyNjgxNTcgQzcuNTYzMzMzNDcsMTAuNjE1MDkzMyA4LjU2MTk4ODE1LDEwLjA5NDcyNDIgOS4zOTIzNDY5MSw5LjI0MzQxMjIzIEM5LjU1ODk3NDcsOS4wNzI1OTcwMiA5Ljc1OTcwNjUyLDguODQ2OTYyNDggOS44Mzg0NzkzOSw4Ljc0MjAyMjYxIEM5LjkxNzM0NDk0LDguNjM3MTc0ODggOS45OTM3MDgyOSw4LjU1MTMwNjYxIDEwLjAwODI1ODEsOC41NTEzMDY2MSBDMTAuMDIyODA3OSw4LjU1MTMwNjYxIDEwLjEwMTk1MTUsOC42NDQ2Mzc2OCAxMC4xODQxNTMzLDguNzU4NjA2NjEgQzEwLjQ5OTMzNzUsOS4xOTU1OTUwMiAxMS4xMjkyNDI0LDkuNzYwMDAzODQgMTEuNjkxOTU4OCwxMC4xMDk0NjU2IEMxMi4yMzQ1NjQ4LDEwLjQ0NjQ4OTMgMTMuMDQ0NzIwNywxMC43NDAyMTA0IDEzLjcwMTEzMDQsMTAuODM3OTYzOSBDMTQuMDY1NTI0NCwxMC44OTIyMzA0IDE1LjE0MTc0NzIsMTAuODgzMDE3MSAxNS40ODg5MDM5LDEwLjgyMjY2OTcgQzE3LjQ1MTM2NzksMTAuNDgxMzE1NyAxOS4wOTk2NjcxLDkuMDY4OTExNjkgMTkuNzMwMDM1NCw3LjE4ODU2MjQ1IEMxOS45MTIyMzI0LDYuNjQ0NzkxNSAxOS45OTY5MzY0LDYuMTU1ODM5ODkgMTkuOTk5NzE2Niw1LjYzMTY5MzM0IEMyMC4wMDE3NTU1LDUuMjMwOTEzMzQgMTkuOTk0MjQ4OSw1LjE2OTQ2MDQgMTkuOTI4NTQzLDUuMDQ3MTk5NDYgQzE5LjgwODkwMDksNC44MjQ4ODE3MyAxOS42OTQ1NDEzLDQuNzEyNjYzMzIgMTkuNDc4MDU0OSw0LjYwNTE0MzcyIEwxOS4yNzM4OTQxLDQuNTAzNzA0OTIgTDE2Ljg0ODk4NzEsNC41MDM3MDQ5MiBDMTQuMDc1OTAzOSw0LjUwMzcwNDkyIDE0LjIyMTY4MDEsNC40ODk3MDA2NSAxMy45MjYxNDI4LDQuNzgzNTEzODYgQzEzLjQ2NjAxNjUsNS4yNDA5NTU4NyAxMy41ODA0Njg5LDUuOTg1NzYxNzUgMTQuMTU3MzY0Myw2LjI4ODIzNTQ5IEwxNC4zMjg4MTEyLDYuMzc4MTU3NjMgTDE2LjE1NDc2NjQsNi4zODc1NTUyMyBMMTcuOTgwODE0Miw2LjM5Njk1MjgzIEwxNy44OTQzNDk0LDYuNjM2NDA3MzcgQzE3LjIzOTA1MTgsOC40NTE0MzQwNyAxNS4yMTM4NDc2LDkuNDQyMDUxNyAxMy40MTQwMjY0LDguODI3OTgzMDIgQzEyLjI2OTEzMjIsOC40Mzc0Mjk4MSAxMS40NTA5MTM4LDcuNTg2NjcwNTkgMTEuMDg2NTE5Nyw2LjQwODAwODgzIEMxMC45OTk5NjIyLDYuMTI4MTk5ODkgMTAuOTk1MTQzMiw2LjA3ODE3MTQ5IDEwLjk5NTE0MzIsNS40NDkxNzcyMSBDMTAuOTk1MTQzMiw0LjgyMzIyMzMzIDExLjAwMDMzMjksNC43Njg3NzI1MyAxMS4wODU1OTMsNC40ODcxMjA5MiBDMTEuNTk5NTYyOCwyLjc5MDM5MzQxIDEzLjE3MTY4NCwxLjczMzcxNjE5IDE0LjkxODQ5NTYsMS45MTA3MDQzMyBDMTUuMzcwODM3MywxLjk1NjU4NjczIDE1LjcwMDU3MTMsMi4wNDM4MzcgMTYuMDc0NTEwNywyLjIxNjU4NyBDMTYuNjA0MTQyNCwyLjQ2MTI5MzE0IDE2Ljk3MDAxOTMsMi43NDIxMTU1NSAxNy4zNTI1Nzc0LDMuMTk3NDM4NDkgQzE3LjY0MjY0NjksMy41NDI2NjIxIDE3LjgwODI1NTMsMy42NDQ1NjE1NyAxOC4xMTQ1NDI4LDMuNjY2Mzk3MTcgQzE4LjUyNTM2NjUsMy42OTU2MDM0MyAxOC44MzY2NTgzLDMuNTI4NDczNTYgMTkuMDM1MzUxMywzLjE3MTkxNzU2IEMxOS4xMjIwMDE1LDMuMDE2MzA0MzUgMTkuMTM0MzI3MSwyLjk2MDkzMjIyIDE5LjEzNDMyNzEsMi43Mjg2NjQwOCBDMTkuMTM0MzI3MSwyLjQ5NDI3Njg3IDE5LjEyMjY1MDIsMi40NDMwNTA3NCAxOS4wMzQyMzkyLDIuMjkwMzg1OCBDMTguNzk1Njk2NSwxLjg3ODU0OTc5IDE4LjE5ODY5MDcsMS4yOTQ2MDg3MSAxNy42MjYwNTgzLDAuOTEzMDg0NTcyIEMxNy4wMzQ3MDU3LDAuNTE5MTIyNDMgMTYuMjM1NzYzNCwwLjE5ODEyOTg4OSAxNS41MzAyMzY1LDAuMDcwOTg1ODg2MiBDMTUuMDk0NDgzNSwtMC4wMDc0MTk1ODIxNSAxNC4xMDU2NTIzLC0wLjAwODcwOTQ0ODg0IDEzLjY0NDMyMTIsMC4wNjg2ODI1NTI5IEMxMi43NjAxMTg5LDAuMjE2ODMyOTU2IDExLjkyNDAxNDQsMC41NzgwODc3NjQgMTEuMjAzODQ1LDEuMTIzMTQ4NTggQzEwLjg3NTEzMDQsMS4zNzE5MDg1OCAxMC4zOTk3MTI5LDEuODQzMzU0ODYgMTAuMTg2NTYyOCwyLjEzMjAwODYgQzEwLjA5OTE3MTMsMi4yNTAzMDc4IDEwLjAxNzM0MDEsMi4zNDcxMzk5NCAxMC4wMDQ3MzY1LDIuMzQ3MTM5OTQgQzkuOTkyMTMyODMsMi4zNDcxMzk5NCA5Ljg5OTQ1ODg2LDIuMjM4ODgzMjcgOS43OTg3MjIyNiwyLjEwNjU3OTggQzkuNTc2Mzk3NDEsMS44MTQ2MDkyNiA5LjA2Nzg5NTM0LDEuMzEyOTQzMjUgOC43NzIzNTgwNiwxLjA5NDAzNDQ0IEM3LjcwMjI1MTc0LDAuMzAxNDExMzU4IDYuMzk5OTA0NDcsLTAuMDc4NDU0MzgzOCA1LjA2ODA4Njg3LDAuMDEzNDk0Njg0OSBNNS45MDMyNjQ2NywxLjkxNzA2MTUzIEM2LjMxNzE0NjYxLDEuOTY3MzY2MzMgNi42NDMzNTg5OCwyLjA2MzU1MzUzIDcuMDI1MDgzMDYsMi4yNDc4MjAyIEM4LjI3MDQzNTg0LDIuODQ4OTkwMjIgOS4wMzkzNTE3Niw0LjA2ODQ2NzA0IDkuMDM5MzUxNzYsNS40NDI0NTE0NyBDOS4wMzkzNTE3Niw3LjI2NzI0NDMxIDcuNzI0OTU2ODcsOC43NDA1NDg0OCA1Ljg3ODQyODA1LDguOTg1NTMxMDIgQzQuODQ5MjgzNjMsOS4xMjIwNzI2MiAzLjcxMTg5NjAyLDguNzI0NDI1MTUgMi45NTQ4NDIzNyw3Ljk2MzIxOTUzIEMyLjUxNzIzNTg5LDcuNTIzMjgyODUgMi4yNzMwMzk5OCw3LjEyODIxNTExIDIuMDg0MjYzMTEsNi41NTUxNDU3NyBDMS4zMzQxNjAwMSw0LjI3NzYwOTcxIDMuMDA2MTgzNzUsMS45MzczMzA4NiA1LjQxOTQxMzg4LDEuODg2ODQxNzkgQzUuNTI5OTczOTMsMS44ODQ1Mzg0NiA1Ljc0Nzc1Nzc1LDEuODk4MTc0MTkgNS45MDMyNjQ2NywxLjkxNzA2MTUzIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=='
-    );
-
-    // Add the submenu item with a different name but same slug as the main menu item
-    add_submenu_page(
-      'edit.php?post_type=opengraph_template', // Parent slug
-      'OG Manager',               // Page title
-      'OG Manager',                   // Menu title
-      'manage_options',                        // Capability
-      'edit.php?post_type=opengraph_template', // Menu slug
-      null                                     // Function (not needed as it's the same as the main menu)
     );
 
@@ -150 +141 @@
 
     do_action('cloudpdf-xyz_save_metabox', $post_id);
+
+    wp_redirect(admin_url('edit.php?post_type=opengraph_template'));
+    exit;
   }
 
   public function handle_template_creation()
   {
-    $templateId = isset($_POST['template_id']) ? sanitize_text_field($_POST['template_id']) : '';
-    $templateName = isset($_POST['template_name']) ? sanitize_text_field($_POST['template_name']) : '';
-    $templateVersion = isset($_POST['template_version']) ? sanitize_text_field($_POST['template_version']) : '';
+    if (!current_user_can('manage_options')) {
+      wp_die(__('You are not allowed to add Open Graph templates.', 'opengraph-xyz'));
+    }
+
+    check_admin_referer('opengraph_xyz_select_template_action', 'opengraph_xyz_select_template_nonce');
+
+    $templateId = isset($_POST['template_id']) ? sanitize_text_field(wp_unslash($_POST['template_id'])) : '';
+    $templateName = isset($_POST['template_name']) ? sanitize_text_field(wp_unslash($_POST['template_name'])) : '';
+    $templateVersion = isset($_POST['template_version']) ? sanitize_text_field(wp_unslash($_POST['template_version'])) : '';
 
     $new_post = array(
@@ -176 +176 @@
 
     if ($postId) {
-      // Redirect to the edit post screen or a confirmation page
       wp_redirect(admin_url('post.php?post=' . $postId . '&action=edit'));
       exit;
@@ -254 +253 @@
   }
 
+  /**
+   * Display shared troubleshooting guidance.
+   */
+  public function display_troubleshooting()
+  {
+    include plugin_dir_path(__FILE__) . 'views/troubleshooting.php';
+  }
+
   public function register_plugin_settings()
   {
@@ -373 +380 @@
       'default'
     );
+
+    add_meta_box(
+      'opengraph_template-troubleshooting',
+      __('Troubleshooting', 'opengraph-xyz'),
+      array($this, 'display_troubleshooting'),
+      null,
+      'normal',
+      'low'
+    );
   }
 
@@ -419 +435 @@
     global $submenu;
 
+    $parent_slug = 'edit.php?post_type=opengraph_template';
+
     // Remove default "Add New" submenu
-    if (isset($submenu['edit.php?post_type=opengraph_template'])) {
-      foreach ($submenu['edit.php?post_type=opengraph_template'] as $key => $item) {
+    if (isset($submenu[$parent_slug])) {
+      foreach ($submenu[$parent_slug] as $key => $item) {
         if ($item[2] === 'post-new.php?post_type=opengraph_template') {
-          unset($submenu['edit.php?post_type=opengraph_template'][$key]);
+          unset($submenu[$parent_slug][$key]);
           break;
         }
@@ -430 +448 @@
 
     add_submenu_page(
-      'edit.php?post_type=opengraph_template',
-      'Select OG Template',
-      'Select OG Template',
+      $parent_slug,
+      'Add OG Template',
+      'Add OG Template',
       'manage_options', // Standard capability
       'opengraph_template_selection',
@@ -438 +456 @@
       1
     );
+
+  }
+
+  /**
+   * Hide routing-only submenu rows while preserving WordPress page metadata.
+   */
+  public function hide_redundant_submenu_items()
+  {
+    echo '<style type="text/css">
+            #adminmenu .wp-submenu a[href="edit.php?post_type=opengraph_template"],
+            #adminmenu .wp-submenu a[href*="page=opengraph_template_selection"] { display: none; }
+          </style>
+          <script type="text/javascript">
+            jQuery(document).ready(function($) {
+              $("#adminmenu .wp-submenu a[href=\"edit.php?post_type=opengraph_template\"], #adminmenu .wp-submenu a[href*=\"page=opengraph_template_selection\"]").parent().remove();
+            });
+          </script>';
   }
 
@@ -483 +518 @@
 
     $variables = $data['data']['variables'];
+
+    foreach ($variables as &$variable) {
+      if (empty($variable['modifications']) || !is_array($variable['modifications'])) {
+        continue;
+      }
+
+      foreach ($variable['modifications'] as &$modification) {
+        $property = isset($modification['property']) ? $modification['property'] : '';
+        $modification['suggestedDynamicTag'] = opengraphxyz_get_suggested_dynamic_tag($variable, $property);
+      }
+      unset($modification);
+    }
+    unset($variable);
 
     wp_send_json_success(array('variables' => $variables));
@@ -577 +625 @@
     global $pagenow, $typenow, $post;
 
+    if ($this->is_opengraph_template_selection_page()) {
+      return;
+    }
+
     if (($pagenow == 'edit.php' || $pagenow == 'post.php') && $typenow == 'opengraph_template') {
-      $customButton = '<a href="edit.php?post_type=opengraph_template&page=opengraph_template_selection" class="page-title-action title-new-template">Select OG Template</a>';
+      $customButton = $pagenow == 'edit.php'
+        ? '<a href="edit.php?post_type=opengraph_template&page=opengraph_template_selection" class="page-title-action title-new-template">Add OG Template</a>'
+        : '';
 
       // Add Edit on Open Graph button only on post edit page (post.php) and if post has a template
@@ -590 +644 @@
       }
 
-      // Combine both buttons into one string (Edit on Open Graph first, then Select OG Template)
+      // Show Edit on Open Graph on detail pages and Add OG Template on the overview.
       $allButtons = $editButton . $customButton;
 
@@ -610 +664 @@
   {
     global $pagenow, $typenow;
+
+    if ($this->is_opengraph_template_selection_page()) {
+      return;
+    }
 
     if (($pagenow == 'edit.php' || $pagenow == 'post.php') && $typenow == 'opengraph_template') {

opengraph-xyz/trunk/src/Plugin.php

@@ -131 +131 @@
       'name_admin_bar' => _x('OG Image Template', 'add new on admin bar', 'opengraph-xyz'),
       'add_new' => _x('Add New', 'template', 'opengraph-xyz'),
-      'add_new_item' => __('Select OG Template', 'opengraph-xyz'),
+      'add_new_item' => __('Add OG Template', 'opengraph-xyz'),
       'new_item' => __('New Template', 'opengraph-xyz'),
       'edit_item' => __('Match Variables', 'opengraph-xyz'),

opengraph-xyz/trunk/src/functions.php

@@ -16 +16 @@
 function opengraphxyz_get_base_url()
 {
-    return defined('OPENGRAPHXYZ_BASE_URL') ? OPENGRAPHXYZ_BASE_URL : 'https://dashboard.opengraph.xyz';
+    return defined('OPENGRAPHXYZ_BASE_URL') ? OPENGRAPHXYZ_BASE_URL : 'https://www.opengraph.xyz';
+}
+
+/**
+ * Get the WordPress integration documentation URL.
+ *
+ * @param string $section Optional documentation section anchor.
+ * @return string The WordPress documentation URL.
+ */
+function opengraphxyz_get_wordpress_docs_url($section = '')
+{
+    $url = opengraphxyz_get_base_url() . '/docs/wordpress';
+
+    return empty($section) ? $url : $url . '#' . sanitize_title($section);
+}
+
+/**
+ * Suggest a WordPress dynamic tag for a common template variable.
+ *
+ * @param array  $variable Template variable data.
+ * @param string $property Modification property.
+ * @return string Suggested dynamic tag, or an empty string when none applies.
+ */
+function opengraphxyz_get_suggested_dynamic_tag($variable, $property)
+{
+    $suggestions = array(
+        'title' => array(
+            'properties' => array('text'),
+            'tag' => '{post_title}',
+        ),
+        'description' => array(
+            'properties' => array('text'),
+            'tag' => '{post_excerpt}',
+        ),
+        'image' => array(
+            'properties' => array('src', 'url'),
+            'tag' => '{featured_image}',
+        ),
+        'url' => array(
+            'properties' => array('text', 'url'),
+            'tag' => '{post_url}',
+        ),
+        'link' => array(
+            'properties' => array('text', 'url'),
+            'tag' => '{post_url}',
+        ),
+    );
+
+    $variable_names = array_filter(array($variable['name'] ?? '', $variable['id'] ?? ''));
+
+    foreach ($variable_names as $variable_name) {
+        $variable_name = strtolower((string) $variable_name);
+        $variable_name = preg_replace('/[^a-z0-9]+/', '_', $variable_name);
+        $variable_name = trim($variable_name, '_');
+
+        if (preg_match('/^image_?\d+$/', $variable_name)) {
+            $variable_name = 'image';
+        }
+
+        if (!isset($suggestions[$variable_name])) {
+            continue;
+        }
+
+        $suggestion = $suggestions[$variable_name];
+
+        if (in_array(strtolower($property), $suggestion['properties'], true)) {
+            return $suggestion['tag'];
+        }
+    }
+
+    return '';
 }
 
@@ -39 +109 @@
 {
     return defined('OPENGRAPHXYZ_BASE_IMAGE_URL') ? OPENGRAPHXYZ_BASE_IMAGE_URL : 'https://ogcdn.net';
-}
-
-/**
- * Get the create template base URL without URL encoding for JavaScript concatenation
- * 
- * @return string The base URL for creating templates
- */
-function opengraphxyz_get_create_template_baseurl_raw()
-{
-    $base_url = opengraphxyz_get_base_url();
-    return $base_url . "/register?redirect=/org/[organizationId]/create-template/";
-}
-
-// /org/1/template-editor/c91f620c-b194-449e-86c6-f332e98caf2d
-
-/**
- * Get the OpenGraph.xyz settings URL with wp parameter
- * 
- * @return string The settings URL for OpenGraph.xyz
- */
-function opengraphxyz_get_settings_url()
-{
-    $base_url = opengraphxyz_get_base_url();
-    $current_domain = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https://' : 'http://') . ($_SERVER['HTTP_HOST'] ?? '');
-
-    return $base_url . "/register?redirect=/org/[organizationId]/settings/api-keys?wp=" . urlencode($current_domain);
 }
 
@@ -179 +223 @@
 {
     $base_url = opengraphxyz_get_base_url();
-    return $base_url . "/register?redirect=/org/[organizationId]/template-editor/" . $template_id;
-}
+    return $base_url . "/generate/" . $template_id;
+}

opengraph-xyz/trunk/src/templates/admin.php

@@ -10 +10 @@
 }
 
-// Get the settings URL using the helper function
-$settings_url = opengraphxyz_get_settings_url();
+$settings_url = opengraphxyz_get_base_url() . '/settings/api-keys';
 
 // Check if user was redirected from OpenGraph.xyz
@@ -59 +58 @@
     <?php if ($redirected_from_opengraphxyz): ?>
         <!-- Message for users redirected from OpenGraph.xyz -->
-        <div class="api-key-info-banner" style="margin-top: 10px; max-width: 700px; border: 1px solid #007cba; background-color: #eef5fa; color: #007cba; padding: 15px; margin-bottom: 20px; border-radius: 5px;">
+        <div class="api-key-info-banner"
+            style="margin-top: 10px; max-width: 700px; border: 1px solid #007cba; background-color: #eef5fa; color: #007cba; padding: 15px; margin-bottom: 20px; border-radius: 5px;">
             <strong>Paste your API key from OpenGraph.xyz in the box below and click save</strong>
         </div>
     <?php else: ?>
         <!-- Banner for API Key information -->
-        <div class="api-key-info-banner" style="margin-top: 10px; max-width: 700px; border: 1px solid #007cba; background-color: #eef5fa; color: #007cba; padding: 15px; margin-bottom: 20px; border-radius: 5px;">
-            <strong>Need an API Key?</strong> Obtain your API key from your OpenGraph.xyz account by clicking the button below. In the OpenGraph.xyz dashboard, go to <em>Settings > API Keys</em> to find your existing keys or create a new one by clicking on <em>Create new API key</em>.
+        <div class="api-key-info-banner"
+            style="margin-top: 10px; max-width: 700px; border: 1px solid #007cba; background-color: #eef5fa; color: #007cba; padding: 15px; margin-bottom: 20px; border-radius: 5px;">
+            <strong>Need an API Key?</strong> Get your API key from your OpenGraph.xyz API Key Settings page.
 
             <div style="margin-top:20px;">
-                <a href="<?php echo esc_url($settings_url); ?>" target="_blank" class="button button-primary" style="background: #0073aa; border-color: #0073aa; color: white; padding: 8px 16px; font-size: 14px; line-height: 1.4; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block;">
-                    <span class="dashicons dashicons-external" style="margin-right: 5px;"></span>
-                    Go to OpenGraph.xyz Settings
+                <a href="<?php echo esc_url($settings_url); ?>" target="_blank" class="button button-primary"
+                    style="background: #0073aa; border-color: #0073aa; color: white; padding: 8px 16px; font-size: 14px; line-height: 1.4; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;">
+                    <span class="dashicons dashicons-external" style="margin: 0; line-height: 1;"></span>
+                    OpenGraph API Key Settings
                 </a>
             </div>
@@ -89 +91 @@
                     <th scope="row">API Key</th>
                     <td>
-                        <textarea 
-                            name="opengraph_xyz_api_key" 
+                        <textarea name="opengraph_xyz_api_key"
                             style="width: 100%; min-height: 100px; font-family: 'Courier New', monospace; font-size: 13px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; resize: vertical;"
-                            placeholder="Paste your OpenGraph.xyz API key here..."
-                        ><?php echo esc_textarea(get_option('opengraph_xyz_api_key')); ?></textarea>
-                        <p class="description">Your API key will be securely stored and used to connect to OpenGraph.xyz services.</p>
+                            placeholder="Paste your OpenGraph.xyz API key here..."><?php echo esc_textarea(get_option('opengraph_xyz_api_key')); ?></textarea>
+                        <p class="description">Your API key will be securely stored and used to connect to OpenGraph.xyz
+                            services.</p>
                     </td>
                 </tr>
@@ -204 +205 @@
 
     // Auto-hide toast after 5 seconds
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
         const toast = document.getElementById('opengraph-xyz-toast');
         if (toast) {
@@ -221 +222 @@
     }
 
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
         const errorToast = document.getElementById('opengraph-xyz-error-toast');
         if (errorToast) {
@@ -231 +232 @@
 
     // Show loading overlay when form is submitted
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
         const form = document.querySelector('form[action="options.php"]');
         if (form) {
-            form.addEventListener('submit', function() {
+            form.addEventListener('submit', function () {
                 showLoadingOverlay();
             });

opengraph-xyz/trunk/src/templates/template_selection.php

@@ -2 +2 @@
 
 // Exit if accessed directly.
-defined( 'ABSPATH' ) || exit;
+defined('ABSPATH') || exit;
 
 // Check user capabilities
-if ( ! current_user_can( 'manage_options' ) ) {
+if (!current_user_can('manage_options')) {
     return;
 }
 
-// Get the create template base URL
-$create_template_base_url = opengraphxyz_get_create_template_baseurl_raw();
+$create_template_url = opengraphxyz_get_base_url() . '/generate';
 
 $apiKey = get_option('opengraph_xyz_api_key'); // Assuming the API key is stored with this name
@@ -18 +17 @@
 $hasApiKey = !empty($apiKey);
 
-// Split templates into user templates and stock templates
 $userTemplates = array();
-$stockTemplates = array();
 
-if ( isset( $templates['edges'] ) && is_array( $templates['edges'] ) ) {
-    foreach ( $templates['edges'] as $edge ) {
+if (isset($templates['edges']) && is_array($templates['edges'])) {
+    foreach ($templates['edges'] as $edge) {
         $template = $edge['node'];
-        if ( isset( $template['organizationId'] ) && !empty( $template['organizationId'] ) ) {
+        if (isset($template['organizationId']) && !empty($template['organizationId'])) {
             $userTemplates[] = $edge;
-        } else {
-            $stockTemplates[] = $edge;
         }
     }
 }
-
-// Determine default tab - if user has templates, default to "Your Templates", otherwise "Stock Templates"
-$defaultTab = !empty($userTemplates) ? 'your-templates' : 'stock-templates';
 
 // Template selection view
@@ -40 +32 @@
 
 <div class="wrap">
-    <h1 style="margin-bottom: 20px">Select OG Image Template</h1>
+    <h1 class="wp-heading-inline">Select OG Image Template</h1>
+    <a href="<?php echo esc_url($create_template_url); ?>" target="_blank" rel="noopener noreferrer"
+        class="page-title-action">Add new template</a>
+    <hr class="wp-header-end">
 
-    <?php if ( isset( $templates['authenticated'] ) && ! $templates['authenticated'] ) : ?>
+    <?php if (isset($templates['authenticated']) && !$templates['authenticated']): ?>
         <!-- Banner for unauthenticated users -->
-        <div class="unauthenticated-banner" style="border: 1px solid #eab308; color: #854d0e; background-color: #ffffcc; padding: 20px; margin-bottom: 20px; border-radius: 6px; display: flex; align-items: center; gap: 10px;">
-            <svg style="width: 1.5rem; height: 1.5rem; fill: #eab308; flex-shrink: 0;" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z"></path>
+        <div class="unauthenticated-banner"
+            style="border: 1px solid #eab308; color: #854d0e; background-color: #ffffcc; padding: 20px; margin-bottom: 20px; border-radius: 6px; display: flex; align-items: center; gap: 10px;">
+            <svg style="width: 1.5rem; height: 1.5rem; fill: #eab308; flex-shrink: 0;" width="24" height="24"
+                fill="currentColor" viewBox="0 0 24 24">
+                <path
+                    d="M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z">
+                </path>
             </svg>
-            <p style="margin: 0; font-size: 1.2em;">Create unique, custom Open Graph image templates that truly represent your brand's identity.</p>
-            <a href="https://www.opengraph.xyz/get-started" target="_blank" style="text-decoration: underline; font-weight: bold; color: #854d0e; flex-shrink: 0;">Learn More</a>
+            <p style="margin: 0; font-size: 1.2em;">Create unique, custom Open Graph image templates that truly represent
+                your brand's identity.</p>
+            <a href="https://www.opengraph.xyz/get-started" target="_blank"
+                style="text-decoration: underline; font-weight: bold; color: #854d0e; flex-shrink: 0;">Learn More</a>
         </div>
     <?php endif; ?>
 
-    <!-- Tab Navigation -->
-    <div class="tab-navigation" style="margin-bottom: 0; border-bottom: 1px solid #dcdcde;">
-        <button class="tab-button <?php echo $defaultTab === 'your-templates' ? 'active' : ''; ?>" data-tab="your-templates" style="padding: 12px 24px; margin-right: 0; border: 1px solid #dcdcde; border-bottom: none; background: <?php echo $defaultTab === 'your-templates' ? '#fff' : '#f9f9f9'; ?>; cursor: pointer; border-radius: 4px 4px 0 0; font-weight: 500; color: <?php echo $defaultTab === 'your-templates' ? '#1d2327' : '#646970'; ?>; position: relative; top: 1px;">
-            Your Templates (<?php echo count($userTemplates); ?>)
-        </button>
-        <button class="tab-button <?php echo $defaultTab === 'stock-templates' ? 'active' : ''; ?>" data-tab="stock-templates" style="padding: 12px 24px; margin-right: 0; border: 1px solid #dcdcde; border-bottom: none; background: <?php echo $defaultTab === 'stock-templates' ? '#fff' : '#f9f9f9'; ?>; cursor: pointer; border-radius: 4px 4px 0 0; font-weight: 500; color: <?php echo $defaultTab === 'stock-templates' ? '#1d2327' : '#646970'; ?>; position: relative; top: 1px;">
-            Stock Templates (<?php echo count($stockTemplates); ?>)
-        </button>
+    <div
+        style="margin-top: 20px; margin-bottom: 20px; border: 1px solid #007cba; background-color: #eef5fa; color: #007cba; padding: 15px; border-radius: 5px;">
+        <strong>Choose one of your templates to add it to WordPress.</strong>
     </div>
+    <?php if (!empty($userTemplates)): ?>
+        <div class="template-grid"
+            style="display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap: 20px;">
+            <?php foreach ($userTemplates as $edge):
+                $template = $edge['node'];
+                $name = $template['name'];
+                $id = $template['id'];
+                $version = $template['activeVersion'];
+                $versionNumber = $version['versionNumber'];
 
-    <!-- Your Templates Tab -->
-    <div id="your-templates" class="tab-content" style="display: <?php echo $defaultTab === 'your-templates' ? 'block' : 'none'; ?>;">
-        <div style="margin-top: 20px; margin-bottom: 20px; border: 1px solid #007cba; background-color: #eef5fa; color: #007cba; padding: 15px; border-radius: 5px;">
-            <strong>Click a template card to create a dynamic Open Graph image template.</strong>
-        </div>
-        <?php if ( !empty($userTemplates) ) : ?>
-            <div class="template-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap: 20px;">
-                <?php foreach ( $userTemplates as $edge ) :
-                    $template       = $edge['node'];
-                    $name           = $template['name'];
-                    $id             = $template['id'];
-                    $premium        = $template['isPremium'];
-                    $organizationId = $template['organizationId'];
-                    $version        = $template['activeVersion'];
-                    $versionNumber  = $version['versionNumber'];
-                    
-                    // Generate image URL
-                    $imageUrl = opengraphxyz_generate_image_url($id, $versionNumber, $version['data']['variables']);
-                    ?>
-                    <form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" class="template-form" id="template-form-<?php echo esc_attr( $id ); ?>">
-                        <?php wp_nonce_field( 'opengraph_xyz_select_template_action', 'opengraph_xyz_select_template_nonce' ); ?>
+                // Generate image URL
+                $imageUrl = opengraphxyz_generate_image_url($id, $versionNumber, $version['data']['variables']);
+                ?>
+                <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" class="template-form"
+                    id="template-form-<?php echo esc_attr($id); ?>">
+                    <?php wp_nonce_field('opengraph_xyz_select_template_action', 'opengraph_xyz_select_template_nonce'); ?>
 
-                        <input type="hidden" name="action" value="create_opengraph_template">
-                        <input type="hidden" name="template_id" value="<?php echo esc_attr( $id ); ?>">
-                        <input type="hidden" name="template_name" value="<?php echo esc_attr( $name ); ?>">
-                        <input type="hidden" name="template_version" value="<?php echo esc_attr( $versionNumber ); ?>">
-                        
-                        <div onclick="handleTemplateClick('<?php echo esc_attr( $id ); ?>', 'user')" style="cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 1px -1px rgba(0,0,0,.1); border: 1px solid #dcdcde;">
-                            <div class="template-card" style="position: relative; padding-top: 52.5%; background-color: #fff">
-                                <img src="<?php echo esc_url( $imageUrl ); ?>" alt="<?php echo esc_attr( $name ); ?>" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
-                            </div>
-                            <div class="template-details" style="width: 100%; background: rgba(255,255,255,.65); color: #000; text-align: center; font-size: 16px;">
-                                <div style="padding: 1rem; display: flex; align-items: center; justify-content: center; gap: .5rem; border-top: 1px solid #dcdcde;">
-                                    <?php echo esc_html( $name ); ?>
-                                </div>
+                    <input type="hidden" name="action" value="create_opengraph_template">
+                    <input type="hidden" name="template_id" value="<?php echo esc_attr($id); ?>">
+                    <input type="hidden" name="template_name" value="<?php echo esc_attr($name); ?>">
+                    <input type="hidden" name="template_version" value="<?php echo esc_attr($versionNumber); ?>">
+
+                    <div onclick="handleTemplateClick('<?php echo esc_attr($id); ?>')"
+                        style="cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 1px -1px rgba(0,0,0,.1); border: 1px solid #dcdcde;">
+                        <div class="template-card" style="position: relative; padding-top: 52.5%; background-color: #fff">
+                            <img src="<?php echo esc_url($imageUrl); ?>" alt="<?php echo esc_attr($name); ?>"
+                                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
+                        </div>
+                        <div class="template-details"
+                            style="width: 100%; background: rgba(255,255,255,.65); color: #000; text-align: center; font-size: 16px;">
+                            <div
+                                style="padding: 1rem; display: flex; align-items: center; justify-content: center; gap: .5rem; border-top: 1px solid #dcdcde;">
+                                <?php echo esc_html($name); ?>
                             </div>
                         </div>
-                    </form>
-                <?php endforeach; ?>
-            </div>
-        <?php elseif ( !$hasApiKey ) : ?>
-            <div style="text-align: center; padding: 40px; background: #f9f9f9; border-radius: 6px;">
-                <p style="font-size: 1.2em; color: #666; margin-bottom: 20px;">Connect your Open Graph account with an API Key to see your custom templates.</p>
-                <a href="<?php echo esc_url( admin_url( 'edit.php?post_type=opengraph_template&page=og-xyz-settings' ) ); ?>" style="background: #0073aa; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px;">Add an API Key</a>
-            </div>
-        <?php else : ?>
-            <div style="text-align: center; padding: 40px; background: #f9f9f9; border-radius: 6px;">
-                <p style="font-size: 1.2em; color: #666; margin-bottom: 20px;">You don't have any custom templates yet.</p>
-                <a href="https://www.opengraph.xyz/get-started" target="_blank" style="background: #0073aa; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px;">Create Your First Template</a>
-            </div>
-        <?php endif; ?>
-    </div>
-
-    <!-- Stock Templates Tab -->
-    <div id="stock-templates" class="tab-content" style="display: <?php echo $defaultTab === 'stock-templates' ? 'block' : 'none'; ?>;">
-        <div style="margin-top: 20px; margin-bottom: 20px; border: 1px solid #007cba; background-color: #eef5fa; color: #007cba; padding: 15px; border-radius: 5px;">
-            <strong>Click a card to create a template based on the example image. (Redirects to Open Graph.xyz). <br/><br/>When you're done, return here and refresh the page to start matching your variables.</strong>
+                    </div>
+                </form>
+            <?php endforeach; ?>
         </div>
-        <?php if ( !empty($stockTemplates) ) : ?>
-            <div class="template-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap: 20px;">
-                <?php foreach ( $stockTemplates as $edge ) :
-                    $template       = $edge['node'];
-                    $name           = $template['name'];
-                    $id             = $template['id'];
-                    $premium        = $template['isPremium'];
-                    $organizationId = $template['organizationId'];
-                    $version        = $template['activeVersion'];
-                    $versionNumber  = $version['versionNumber'];
-                    
-                    // Generate image URL
-                    $imageUrl = opengraphxyz_generate_image_url($id, $versionNumber, $version['data']['variables']);
-                    ?>
-                    <?php if ( $premium ) : ?>
-                        <!-- Premium template -->
-                        <a href="https://www.opengraph.xyz/get-started" target="_blank" class="template-card" style="text-decoration: none">
-                    <?php else : ?>
-                        <form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" class="template-form" id="template-form-<?php echo esc_attr( $id ); ?>">
-                            <?php wp_nonce_field( 'opengraph_xyz_select_template_action', 'opengraph_xyz_select_template_nonce' ); ?>
-
-                            <input type="hidden" name="action" value="create_opengraph_template">
-                            <input type="hidden" name="template_id" value="<?php echo esc_attr( $id ); ?>">
-                            <input type="hidden" name="template_name" value="<?php echo esc_attr( $name ); ?>">
-                            <input type="hidden" name="template_version" value="<?php echo esc_attr( $versionNumber ); ?>">
-                    <?php endif; ?>
-                        <div onclick="handleTemplateClick('<?php echo esc_attr( $id ); ?>', 'stock')" style="cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 1px -1px rgba(0,0,0,.1); border: 1px solid #dcdcde;">
-                            <div class="template-card" style="position: relative; padding-top: 52.5%; background-color: #fff">
-                                <img src="<?php echo esc_url( $imageUrl ); ?>" alt="<?php echo esc_attr( $name ); ?>" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
-                            </div>
-                            <div class="template-details" style="width: 100%; background: rgba(255,255,255,.65); color: #000; text-align: center; font-size: 16px;">
-                                <div style="padding: 1rem; display: flex; align-items: center; justify-content: center; gap: .5rem; border-top: 1px solid #dcdcde;">
-                                    <?php echo esc_html( $name ); ?>
-                                    <?php if ( isset( $premium ) ) : ?>
-                                        <span style="font-size: .75rem; line-height: 1rem; padding: .25rem .5rem; border-radius: 9999px; background-color: #ffffcc; color: #854d0e; display: inline-flex; -moz-column-gap: .375rem; column-gap: 0.375rem; align-items: center;">
-                                            <svg style="width: 1rem; height: 1rem; fill: #eab308;" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
-                                                <path d="M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z"></path>
-                                            </svg>
-                                            Premium
-                                        </span>
-                                    <?php endif; ?>
-                                </div>
-                            </div>
-                        </div>
-                    <?php if ( $premium ) : ?>
-                        </a>
-                    <?php else : ?>
-                        </form>
-                    <?php endif; ?>
-                <?php endforeach; ?>
-            </div>
-        <?php else : ?>
-            <p>No stock templates available.</p>
-        <?php endif; ?>
-    </div>
+    <?php elseif (!$hasApiKey): ?>
+        <div style="text-align: center; padding: 40px; background: #f9f9f9; border-radius: 6px;">
+            <p style="font-size: 1.2em; color: #666; margin-bottom: 20px;">Connect your Open Graph account with an API
+                Key to see your custom templates.</p>
+            <a href="<?php echo esc_url(admin_url('edit.php?post_type=opengraph_template&page=og-xyz-settings')); ?>"
+                style="background: #0073aa; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px;">Add
+                an API Key</a>
+        </div>
+    <?php else: ?>
+        <div style="text-align: center; padding: 40px; background: #f9f9f9; border-radius: 6px;">
+            <p style="font-size: 1.2em; color: #666; margin-bottom: 20px;">You don't have any custom templates yet.</p>
+            <a href="<?php echo esc_url($create_template_url); ?>" target="_blank"
+                style="background: #0073aa; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px;">Create
+                Your First Template</a>
+        </div>
+    <?php endif; ?>
 </div>
 
@@ -182 +119 @@
 
 <script>
-// Check if user has API key
-const hasApiKey = <?php echo $hasApiKey ? 'true' : 'false'; ?>;
+    // Check if user has API key
+    const hasApiKey = <?php echo $hasApiKey ? 'true' : 'false'; ?>;
 
-// Get the create template base URL from PHP
-const createTemplateBaseUrl = '<?php echo esc_js($create_template_base_url); ?>';
+    // Debug: Log template data
+    <?php if (isset($templates['edges']) && is_array($templates['edges'])): ?>
+        console.log('Template data:', <?php echo json_encode($templates['edges']); ?>);
+    <?php endif; ?>
 
-// Debug: Log template data
-<?php if ( isset( $templates['edges'] ) && is_array( $templates['edges'] ) ) : ?>
-console.log('Template data:', <?php echo json_encode($templates['edges']); ?>);
-<?php endif; ?>
+    // Handle template click - check for API key first
+    function handleTemplateClick(templateId) {
+        if (!hasApiKey) {
+            // Show API key modal if no API key
+            showApiKeyModal();
+            return;
+        }
 
-// Tab functionality
-document.addEventListener('DOMContentLoaded', function() {
-    const tabButtons = document.querySelectorAll('.tab-button');
-    const tabContents = document.querySelectorAll('.tab-content');
-
-    tabButtons.forEach(button => {
-        button.addEventListener('click', function() {
-            const targetTab = this.getAttribute('data-tab');
-            
-            // Update button styles
-            tabButtons.forEach(btn => {
-                btn.style.background = '#f9f9f9';
-                btn.style.color = '#646970';
-                btn.classList.remove('active');
-            });
-            this.style.background = '#fff';
-            this.style.color = '#1d2327';
-            this.classList.add('active');
-            
-            // Show/hide tab content
-            tabContents.forEach(content => {
-                content.style.display = 'none';
-            });
-            document.getElementById(targetTab).style.display = 'block';
-        });
-    });
-});
-
-// Handle template click - check for API key first
-function handleTemplateClick(templateId, templateType) {
-    if (!hasApiKey) {
-        // Show API key modal if no API key
-        showApiKeyModal();
-        return;
-    }
-    
-    if (templateType === 'user') {
-        // This is a user template - submit the form
         var formId = "template-form-" + templateId;
         const form = document.getElementById(formId);
@@ -238 +142 @@
             form.submit();
         }
-    } else {
-        // This is a stock template - use the existing behavior
-        submitTemplateForm(templateId);
     }
-}
-
-// Prevent multiple template creations when choosing a template
-function submitTemplateForm(templateId) {
-    const createTemplateUrl = createTemplateBaseUrl + templateId;
-    console.log(createTemplateUrl);
-    window.open(createTemplateUrl, '_blank');
-}
 </script>

opengraph-xyz/trunk/src/ui/api-key-modal.php

@@ -1 +1 @@
 <?php
 // Exit if accessed directly.
-defined( 'ABSPATH' ) || exit;
+defined('ABSPATH') || exit;
 
-// Get the settings URL using the helper function
-$settings_url = opengraphxyz_get_settings_url();
+$settings_url = opengraphxyz_get_base_url() . '/settings/api-keys';
 ?>
 
-<div id="api-key-modal" class="api-key-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; align-items: center; justify-content: center;">
-    <div class="modal-content" style="background: white; padding: 2rem; border-radius: 8px; max-width: 500px; width: 90%; text-align: center; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);">
+<div id="api-key-modal" class="api-key-modal"
+    style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; align-items: center; justify-content: center;">
+    <div class="modal-content"
+        style="background: white; padding: 2rem; border-radius: 8px; max-width: 500px; width: 90%; text-align: center; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);">
         <div style="margin-bottom: 1rem;">
-            <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../../assets/icon-128x128.png'); ?>" alt="OpenGraph Logo" style="width: 3rem; height: 3rem; margin: 0 auto 1rem; display: block;">
+            <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../../assets/icon-128x128.png'); ?>"
+                alt="OpenGraph Logo" style="width: 3rem; height: 3rem; margin: 0 auto 1rem; display: block;">
         </div>
-        
+
         <div class="modal-header" style="margin-bottom: 1rem;">
             <h2 style="margin: 0; color: #333; font-size: 1.5rem;">API Key Required</h2>
         </div>
-        
+
         <div class="modal-body" style="margin-bottom: 2rem;">
             <p style="margin: 0; color: #666; font-size: 1.1rem; line-height: 1.5;">
@@ -22 +24 @@
             </p>
         </div>
-        
+
         <div class="modal-footer" style="display: flex; gap: 1rem; justify-content: center;">
-            <button type="button" class="button button-secondary" onclick="closeApiKeyModal()" style="padding: 0.5rem 1rem; border: 1px solid #ddd; background: #f9f9f9; border-radius: 4px; cursor: pointer;">
+            <button type="button" class="button button-secondary" onclick="closeApiKeyModal()"
+                style="padding: 0.5rem 1rem; border: 1px solid #ddd; background: #f9f9f9; border-radius: 4px; cursor: pointer;">
                 Cancel
             </button>
-            <a id="register-link" href="<?php echo esc_url($settings_url); ?>" target="_blank" class="button button-primary" style="padding: 0.5rem 1rem; background: #0073aa; color: white; text-decoration: none; border-radius: 4px; display: inline-block;">
+            <a id="register-link" href="<?php echo esc_url($settings_url); ?>" target="_blank"
+                class="button button-primary"
+                style="padding: 0.5rem 1rem; background: #0073aa; color: white; text-decoration: none; border-radius: 4px; display: inline-block;">
                 Get API Key
             </a>
@@ -35 +40 @@
 
 <script>
-function showApiKeyModal() {
-    const modal = document.getElementById('api-key-modal');
-    modal.style.display = 'flex';
-}
+    function showApiKeyModal() {
+        const modal = document.getElementById('api-key-modal');
+        modal.style.display = 'flex';
+    }
 
-function closeApiKeyModal() {
-    const modal = document.getElementById('api-key-modal');
-    modal.style.display = 'none';
-}
+    function closeApiKeyModal() {
+        const modal = document.getElementById('api-key-modal');
+        modal.style.display = 'none';
+    }
 
-// Close modal when clicking outside
-document.addEventListener('DOMContentLoaded', function() {
-    const modal = document.getElementById('api-key-modal');
-    modal.addEventListener('click', function(e) {
-        if (e.target === modal) {
-            closeApiKeyModal();
-        }
+    // Close modal when clicking outside
+    document.addEventListener('DOMContentLoaded', function () {
+        const modal = document.getElementById('api-key-modal');
+        modal.addEventListener('click', function (e) {
+            if (e.target === modal) {
+                closeApiKeyModal();
+            }
+        });
     });
-});
-</script> 
+</script>

opengraph-xyz/trunk/src/views/modifications.php

@@ -9 +9 @@
 $custom_fields = empty($opengraphxyz['custom_fields']) ? array() : $opengraphxyz['custom_fields'];
 $dynamic_tags = wp_list_pluck(opengraphxyz_init()->get_tags(), 'description');
+$variable_mapping_docs_url = opengraphxyz_get_wordpress_docs_url('variable-mapping');
 
 wp_nonce_field('opengraph-xyz', 'opengraph-xyz-nonce');
@@ -39 +40 @@
 </style>
 
+<div class="notice notice-info inline" style="margin: 0 0 20px;">
+  <p>
+    <strong><?php esc_html_e('Choose which WordPress content should appear in your Open Graph image.', 'opengraph-xyz'); ?></strong>
+  </p>
+  <p>
+    <?php esc_html_e('First, select the template version you want to use. Then use the dropdowns below to connect the template\'s text and images to details from each WordPress post, such as its title, excerpt, or featured image. Choose Default to keep the text or image already saved in your OpenGraph.xyz template.', 'opengraph-xyz'); ?>
+    <a href="<?php echo esc_url($variable_mapping_docs_url); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e('Learn about variable mapping', 'opengraph-xyz'); ?></a>.
+  </p>
+</div>
+
 <?php if (!empty($thumbnailUrl)): ?>
 <div style="margin-bottom: 20px; padding: 15px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px;">
@@ -70 +81 @@
             <select name="opengraph[modifications][<?php echo esc_attr($variable['id']); ?>][<?php echo esc_attr($modification['property']); ?>]" id="opengraph-modification-<?php echo esc_attr($variable['id']); ?>__<?php echo esc_attr($modification['property']); ?>" class="regular-text">
               <?php
-              $current_value = isset($current_modifications[$variable['id']][$modification['property']]) ? $current_modifications[$variable['id']][$modification['property']] : '';
+              $has_saved_mapping = isset($current_modifications[$variable['id']]) && array_key_exists($modification['property'], $current_modifications[$variable['id']]);
+              $current_value = $has_saved_mapping ? $current_modifications[$variable['id']][$modification['property']] : opengraphxyz_get_suggested_dynamic_tag($variable, $modification['property']);
               $custom_field = isset($custom_fields[$variable['id']][$modification['property']]) ? $custom_fields[$variable['id']][$modification['property']] : '';
               ?>
-              <option value="_" <?php selected($current_value, ''); ?>><?php esc_html_e('Default', 'opengraph-xyz'); ?></option>
+              <option value="_" <?php selected($current_value, '_'); ?>><?php esc_html_e('Default', 'opengraph-xyz'); ?></option>
               <?php foreach ($dynamic_tags as $dynamic_tag => $description): ?>
                                 <option value="{<?php echo esc_attr($dynamic_tag); ?>}" <?php selected($current_value, '{' . $dynamic_tag . '}'); ?>>
@@ -309 +321 @@
 
                 // Add default option
-                var defaultOption = $('<option></option>').attr({value: ''}).text('Default');
+                var defaultOption = $('<option></option>').attr({value: '_'}).text('Default');
                 select.append(defaultOption);
 
@@ -353 +365 @@
                   select.val(currentSelections[selectId]);
                   toggleCustomFieldInput(select);
-                } else {
+                } else if (modification.suggestedDynamicTag) {
+                  select.val(modification.suggestedDynamicTag);
                 }