{"id":5187,"date":"2022-06-29T08:45:42","date_gmt":"2022-06-29T12:45:42","guid":{"rendered":"https:\/\/www.cloudsurph.com\/?p=5187"},"modified":"2022-06-29T08:57:06","modified_gmt":"2022-06-29T12:57:06","slug":"how-to-create-a-custom-theme-options-for-wordpress","status":"publish","type":"post","link":"https:\/\/www.cloudsurph.com\/how-to-create-a-custom-theme-options-for-wordpress\/","title":{"rendered":"WordPress Settings API: Creating Custom Theme Options"},"content":{"rendered":"

How to Create a Custom Theme Options Page for WordPress? Using the WordPress Settings API to Create Custom Theme Options.<\/h4>\n

You can purchase your\u00a0hosting from Cloudsurph.com<\/a>,\u00a0Cloudsurph hosting<\/a>\u00a0is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs<\/strong>.<\/em><\/h5>\n

As a WordPress Theme Developer or Designer, do you always think of what extra could be provided to your customers or any clients? <\/strong><\/p>\n

WordPress Custom Theme Options! Yes, you can Customize your theme with WordPress Settings API and empower users with options to quickly modify its appearance and theme settings. <\/strong><\/p>\n

This is what you need right now stay ahead in the play and, <\/strong>a Theme settings page to alter its appearance and style.<\/p>\n

IF you want then buy a good, reliable, secure web\u00a0hosting<\/a>\u00a0service \u00a0from here:\u00a0click here<\/a><\/strong><\/em><\/p>\n

So, now if you have a custom WordPress theme then you will follow this article to create custom theme options.<\/p>\n

In this article we, will show you how to create a Custom Theme Options Page for WordPress Theme.<\/p>\n

\"how-to-create-a-logo-upload-option-to-custom-theme-option\"<\/p>\n

WordPress Settings API: Creating Custom Theme Options<\/h2>\n

Firstly, go to your custom theme folder and create a new folder called \u201cadminoptions\u201d.<\/p>\n

After then you need to create some files to adminoptions<\/strong> folder as likes are: admin-options.php, admin.css, and custom.css<\/p>\n

You need to now just copy and paste the below code:<\/p>\n

admin-options.php<\/h3>\n
\r\n<?php\r\n\r\n\/\/ Exit if accessed directly\r\nif ( ! defined( 'ABSPATH' ) ) {\r\nexit;\r\n}\r\n\r\nclass BR_Theme_Options {\r\nprivate $sections;\r\nprivate $checkboxes;\r\nprivate $settings;\r\n\r\n\/\/ Construct\r\npublic function __construct() {\r\n\r\n\/\/ This will keep track of the checkbox options for the validate_settings function.\r\n$this->checkboxes = array();\r\n$this->settings = array();\r\n$this->get_settings();\r\n\r\n$this->sections['logo-options'] = __( 'Logo Options' );\r\n\/\/$this->sections['footer-about'] = __( 'Footer About' );\r\n$this->sections['social'] = __( 'Social Media' );\r\n$this->sections['general'] = __( 'General Setting' );\r\n$this->sections['appearance'] = __( 'Appearance Setting' );\r\n$this->sections['reset'] = __( 'Reset to Defaults' );\r\n\r\nadd_action( 'admin_menu', array( &$this, 'add_pages' ) );\r\nadd_action( 'admin_init', array( &$this, 'register_settings' ) );\r\n\r\nif ( ! get_option( 'theme_settings' ) )\r\n$this->initialize_settings();\r\n}\r\n\r\n\/\/ Add options page\r\npublic function add_pages() {\r\n\r\n$admin_page = add_theme_page( __( 'Theme Options' ), __( 'Theme Options' ), 'manage_options', 'theme-settings', array( &$this, 'display_option' ) );\r\n\r\n\/\/ Load Script and Stylesheet\r\nadd_action( 'admin_print_scripts-' . $admin_page, array( &$this, 'scripts' ) );\r\nadd_action( 'admin_print_styles-' . $admin_page, array( &$this, 'styles' ) );\r\n\r\n}\r\n\r\n\/\/ Create settings field\r\npublic function create_setting( $args = array() ) {\r\n\r\n$defaults = array(\r\n'id' => 'default_field',\r\n'title' => __( 'Default Field' ),\r\n'desc' => __( 'This is a default description.' ),\r\n'std' => '',\r\n'type' => 'text',\r\n'section' => 'general',\r\n'choices' => array(),\r\n'class' => ''\r\n);\r\n\r\nextract( wp_parse_args( $args, $defaults ) );\r\n\r\n$field_args = array(\r\n'type' => $type,\r\n'id' => $id,\r\n'desc' => $desc,\r\n'std' => $std,\r\n'choices' => $choices,\r\n'label_for' => $id,\r\n'class' => $class\r\n);\r\n\r\nif ( $type == 'checkbox' )\r\n$this->checkboxes[] = $id;\r\n\r\nadd_settings_field( $id, $title, array( $this, 'display_setting' ), 'theme-settings', $section, $field_args );\r\n}\r\n\r\n\/\/ Display options page\r\npublic function display_option() {\r\n\r\necho '<div class=\"wrap\">\r\n<div class=\"icon32\" id=\"icon-options-general\"><\/div>\r\n<h1>' . __( 'Theme Options' ) . '<\/h1>';\r\n\r\nif ( isset( $_GET['settings-updated'] ) && $_GET['settings-updated'] == true )\r\necho '<div class=\"updated fade\"><p>' . __( 'BR Theme Options updated.' ) . '<\/p><\/div>';\r\n\r\necho '<form action=\"options.php\" method=\"post\">';\r\n\r\nsettings_fields( 'theme_settings' );\r\necho '<div class=\"ui-tabs\">\r\n<ul class=\"ui-tabs-nav\">';\r\n\r\nforeach ( $this->sections as $section_slug => $section )\r\necho '<li><a href=\"#' . $section_slug . '\">' . $section . '<\/a><\/li>';\r\n\r\necho '<\/ul>';\r\ndo_settings_sections( $_GET['page'] );\r\n\r\necho '<\/div>\r\n<p class=\"submit\"><input name=\"Submit\" type=\"submit\" class=\"button-primary\" value=\"' . __( 'Save Changes' ) . '\" \/><\/p><\/form>';\r\n\r\necho '<script type=\"text\/javascript\">\r\njQuery(document).ready(function($) {\r\nvar sections = [];';\r\n\r\nforeach ( $this->sections as $section_slug => $section )\r\necho \"sections['$section'] = '$section_slug';\";\r\n\r\necho 'var wrapped = $(\".wrap h2\").wrap(\"<div class=\\\"ui-tabs-panel\\\">\");\r\nwrapped.each(function() {\r\n$(this).parent().append($(this).parent().nextUntil(\"div.ui-tabs-panel\"));\r\n});\r\n$(\".ui-tabs-panel\").each(function(index) {\r\n$(this).attr(\"id\", sections[$(this).children(\"h2\").text()]);\r\nif (index > 0)\r\n$(this).addClass(\"ui-tabs-hide\");\r\n});\r\n$(\".ui-tabs\").tabs({\r\nfx: { opacity: \"toggle\", duration: \"fast\" }\r\n});\r\n\r\n$(\"input[type=text], textarea\").each(function() {\r\nif ($(this).val() == $(this).attr(\"placeholder\") || $(this).val() == \"\")\r\n$(this).css(\"color\", \"#666\");\r\n});\r\n\r\n$(\"input[type=text], textarea\").focus(function() {\r\nif ($(this).val() == $(this).attr(\"placeholder\") || $(this).val() == \"\") {\r\n$(this).val(\"\");\r\n$(this).css(\"color\", \"#000\");\r\n}\r\n}).blur(function() {\r\nif ($(this).val() == \"\" || $(this).val() == $(this).attr(\"placeholder\")) {\r\n$(this).val($(this).attr(\"placeholder\"));\r\n$(this).css(\"color\", \"#666\");\r\n}\r\n});\r\n\r\n$(\".wrap h2, .wrap table\").show();\r\n\r\n\/\/ This will make the \"warning\" checkbox class really stand out when checked.\r\n\/\/ I use it here for the Reset checkbox.\r\n$(\".warning\").change(function() {\r\nif ($(this).is(\":checked\"))\r\n$(this).parent().css(\"background\", \"#c00\").css(\"color\", \"#fff\").css(\"fontWeight\", \"bold\");\r\nelse\r\n$(this).parent().css(\"background\", \"none\").css(\"color\", \"inherit\").css(\"fontWeight\", \"normal\");\r\n});\r\n\r\n\/\/ Browser compatibility\r\nif ($.browser.mozilla)\r\n$(\"form\").attr(\"autocomplete\", \"off\");\r\n});\r\n<\/script>\r\n<\/div>';\r\n\r\n}\r\n\r\n\/\/ Description for section\r\npublic function display_section() {\r\n\/\/ code\r\n}\r\n\r\n\/\/ HTML output for text field\r\npublic function display_setting( $args = array() ) {\r\n\r\nextract( $args );\r\n\r\n$options = get_option( 'theme_settings' );\r\n\r\nif ( ! isset( $options[$id] ) && $type != 'checkbox' )\r\n$options[$id] = $std;\r\nelseif ( ! isset( $options[$id] ) )\r\n$options[$id] = 0;\r\n\r\n$field_class = '';\r\nif ( $class != '' )\r\n$field_class = ' ' . $class;\r\n\r\nswitch ( $type ) {\r\n\r\ncase 'heading':\r\necho '<\/td><\/tr><tr valign=\"top\"><td colspan=\"2\"><h4>' . $desc . '<\/h4>';\r\nbreak;\r\n\r\ncase 'checkbox':\r\n\r\necho '<input class=\"checkbox' . $field_class . '\" type=\"checkbox\" id=\"' . $id . '\" name=\"theme_settings[' . $id . ']\" value=\"1\" ' . checked( $options[$id], 1, false ) . ' \/> <label for=\"' . $id . '\">' . $desc . '<\/label>';\r\n\r\nbreak;\r\n\r\ncase 'select':\r\necho '<select class=\"select' . $field_class . '\" name=\"theme_settings[' . $id . ']\">';\r\n\r\nforeach ( $choices as $value => $label )\r\necho '<option value=\"' . esc_attr( $value ) . '\"' . selected( $options[$id], $value, false ) . '>' . $label . '<\/option>';\r\n\r\necho '<\/select>';\r\n\r\nif ( $desc != '' )\r\necho '<br \/><span class=\"description\">' . $desc . '<\/span>';\r\n\r\nbreak;\r\n\r\ncase 'radio':\r\n$i = 0;\r\nforeach ( $choices as $value => $label ) {\r\necho '<input class=\"radio' . $field_class . '\" type=\"radio\" name=\"theme_settings[' . $id . ']\" id=\"' . $id . $i . '\" value=\"' . esc_attr( $value ) . '\" ' . checked( $options[$id], $value, false ) . '> <label for=\"' . $id . $i . '\">' . $label . '<\/label>';\r\nif ( $i < count( $options ) - 1 )\r\necho '<br \/>';\r\n$i++;\r\n}\r\nif ( $desc != '' )\r\necho '<br \/><span class=\"description\">' . $desc . '<\/span>';\r\n\r\nbreak;\r\n\r\ncase 'textarea':\r\necho '<textarea class=\"' . $field_class . '\" id=\"' . $id . '\" name=\"theme_settings[' . $id . ']\" rows=\"3\" cols=\"39\">' . format_for_editor( $options[$id] ) . '<\/textarea>';\r\n\r\nif ( $desc != '' )\r\necho '<br \/><span class=\"description\">' . $desc . '<\/span>';\r\n\r\nbreak;\r\n\r\ncase 'password':\r\necho '<input class=\"regular-text' . $field_class . '\" type=\"password\" id=\"' . $id . '\" name=\"theme_settings[' . $id . ']\" value=\"' . esc_attr( $options[$id] ) . '\" \/>';\r\n\r\nif ( $desc != '' )\r\necho '<br \/><span class=\"description\">' . $desc . '<\/span>';\r\n\r\nbreak;\r\n\r\ncase 'text':\r\ndefault:\r\necho '<input class=\"regular-text' . $field_class . '\" type=\"text\" id=\"' . $id . '\" name=\"theme_settings[' . $id . ']\" value=\"' . esc_attr( $options[$id] ) . '\" \/>';\r\n\r\nif ( $desc != '' )\r\necho '<br \/><span class=\"description\">' . $desc . '<\/span>';\r\n\r\nbreak;\r\n\r\ncase 'file':\r\n\r\necho '<label for=\"upload_image\">\r\n<input id=\"'.$id.'\" type=\"text\" size=\"36\" value=\"' . ( $options[$id] ) . '\" name=\"theme_settings[' . $id . ']\" \/>\r\n<input id=\"upload_logo_button\" type=\"button\" value=\"Upload Image\" \/>\r\n<br \/>Enter an URL or upload an image for the logo.<\/label>\r\n<script type=\"text\/javascript\">\r\njQuery(document).ready(function() {\r\njQuery(\\'#upload_logo_button\\').click(function() {\r\nformfield = jQuery(\\'#'.$id.'\\').attr(\\'name\\');\r\ntb_show(\\'\\', \\'media-upload.php?type=image&TB_iframe=true\\');\r\nreturn false;});\r\nwindow.send_to_editor = function(response) {\r\njQuery(\"#view-'.$id.'\").html(response);\r\nvar imgurl=jQuery(\"#view-'.$id.'\").find(\"img\").attr(\"src\");\r\njQuery(\"#'.$id.'\").val(imgurl);\r\ntb_remove(); }\r\n\r\n});\r\n<\/script>\r\n<div id=\"view-'.$id.'\">'.(!empty($options[$id])?'<img style=\"max-width:100%;height:auto;\" src=\"'.$options[$id].'\"\/>':'').'<\/div>';\r\n}\r\n}\r\n\r\n\/\/ Settings and defaults\r\npublic function get_settings() {\r\n\r\n\/* Logo Options\r\n===========================================*\/\r\n$this->settings['logo_options'] = array(\r\n'title' => __( 'Upload Your Logo' ),\r\n\"desc\" => \"Select an image file for set your logo.\",\r\n\"std\" => \"\",\r\n\"mod\" => \"\",\r\n\"type\" => \"file\",\r\n'section' => 'logo-options'\r\n);\r\n\r\n\/* Social Media\r\n===========================================*\/\r\n$this->settings['social_title'] = array(\r\n'title' => __( 'Social Title' ),\r\n'desc' => __( 'Enter the Social Title.' ),\r\n'std' => '',\r\n'type' => 'text',\r\n'section' => 'social'\r\n);\r\n\r\n$this->settings['fb_link'] = array(\r\n'title' => __( 'Facebook Page Url' ),\r\n'desc' => __( 'Enter the facebook page url.' ),\r\n'std' => '#',\r\n'type' => 'text',\r\n'section' => 'social'\r\n);\r\n$this->settings['yt_link'] = array(\r\n'title' => __( 'YouTube Link Url' ),\r\n'desc' => __( 'Enter the YouTube link url.' ),\r\n'std' => '#',\r\n'type' => 'text',\r\n'section' => 'social'\r\n);\r\n$this->settings['lin_link'] = array(\r\n'title' => __( 'LinkedIn Link Url' ),\r\n'desc' => __( 'Enter the LinkedIn link url.' ),\r\n'std' => '#',\r\n'type' => 'text',\r\n'section' => 'social'\r\n);\r\n$this->settings['ins_link'] = array(\r\n'title' => __( 'Instagram Link Url' ),\r\n'desc' => __( 'Enter the Instagram link url.' ),\r\n'std' => '#',\r\n'type' => 'text',\r\n'section' => 'social'\r\n);\r\n$this->settings['tw_link'] = array(\r\n'title' => __( 'Twitter Link Url' ),\r\n'desc' => __( 'Enter the Twitter link url.' ),\r\n'std' => '#',\r\n'type' => 'text',\r\n'section' => 'social'\r\n);\r\n$this->settings['vi_link'] = array(\r\n'title' => __( 'Vimeo Link Url' ),\r\n'desc' => __( 'Enter the Vimeo link url.' ),\r\n'std' => '#',\r\n'type' => 'text',\r\n'section' => 'social'\r\n);\r\n\r\n\r\n\/* General Settings\r\n===========================================*\/\r\n$this->settings['contact_title'] = array(\r\n'title' => __( 'Contact Title' ),\r\n'desc' => __( 'Enter your Contact Title.' ),\r\n'std' => '',\r\n'type' => 'text',\r\n'section' => 'general'\r\n);\r\n\r\n$this->settings['contact_addres'] = array(\r\n'title' => __( 'Contact Address' ),\r\n'desc' => __( 'Enter the Contact Address.' ),\r\n'std' => '',\r\n'type' => 'text',\r\n'section' => 'general'\r\n);\r\n$this->settings['contact_hours'] = array(\r\n'title' => __( 'Contact Hours' ),\r\n'desc' => __( 'Enter the Contact Hours.' ),\r\n'std' => '',\r\n'type' => 'text',\r\n'section' => 'general'\r\n);\r\n\r\n$this->settings['phone_num'] = array(\r\n'title' => __( 'Phone Number' ),\r\n'desc' => __( 'Enter your phone number.' ),\r\n'std' => '',\r\n'type' => 'text',\r\n'section' => 'general'\r\n);\r\n$this->settings['mobile_num'] = array(\r\n'title' => __( 'Mobile Number' ),\r\n'desc' => __( 'Enter your Mobile number.' ),\r\n'std' => '',\r\n'type' => 'text',\r\n'section' => 'general'\r\n);\r\n$this->settings['contact_email'] = array(\r\n'title' => __( 'Contact Email' ),\r\n'desc' => __( 'Enter the Contact Email ID.' ),\r\n'std' => '',\r\n'type' => 'text',\r\n'section' => 'general'\r\n);\r\n\r\n\r\n\r\n\/* Appearance\r\n===========================================\r\n*\/\r\n$this->settings['cufon_enable'] = array(\r\n'section' => 'appearance',\r\n'title' => __( 'Enable Cufon font' ),\r\n'desc' => __( 'If checked cufon is working on site.' ),\r\n'type' => 'checkbox',\r\n'std' => 0 \/\/ Set to 1 to be checked by default, 0 to be unchecked by default.\r\n);\r\n$this->settings['favicon'] = array(\r\n'section' => 'appearance',\r\n'title' => __( 'Favicon' ),\r\n'desc' => __( 'Enter the URL (with http:\/\/) to your custom favicon. It should be 16x16 pixels in size.' ),\r\n'type' => 'text',\r\n'std' => ''\r\n);\r\n$this->settings['google_code'] = array(\r\n'section' => 'appearance',\r\n'title' => __( 'Google Analytics' ),\r\n'desc' => __( 'Enter your analytics code. Note: Add code include \"script\"' ),\r\n'std' => '',\r\n'type' => 'textarea',\r\n'class' => 'code'\r\n);\r\n\r\n$this->settings['custom_css'] = array(\r\n'section' => 'appearance',\r\n'title' => __( 'Custom Styles' ),\r\n'desc' => __( 'Enter any custom CSS here to apply it to your theme.' ),\r\n'std' => '',\r\n'type' => 'textarea',\r\n'class' => 'code'\r\n);\r\n\r\n\/* Reset\r\n===========================================*\/\r\n\r\n$this->settings['reset_theme'] = array(\r\n'section' => 'reset',\r\n'title' => __( 'Reset theme' ),\r\n'type' => 'checkbox',\r\n'std' => 0,\r\n'class' => 'warning', \/\/ Custom class for CSS\r\n'desc' => __( 'Check this box and click \"Save Changes\" below to reset theme options to their defaults.' )\r\n);\r\n\r\n}\r\n\r\n\/\/ Initialize Settings\r\npublic function initialize_settings() {\r\n\r\n$default_settings = array();\r\nforeach ( $this->settings as $id => $setting ) {\r\nif ( $setting['type'] != 'heading' )\r\n$default_settings[$id] = $setting['std'];\r\n}\r\nupdate_option( 'theme_settings', $default_settings );\r\n}\r\n\r\n\/\/ Register Settings\r\npublic function register_settings() {\r\n\r\nregister_setting( 'theme_settings', 'theme_settings', array ( &$this, 'validate_settings' ) );\r\n\r\nforeach ( $this->sections as $slug => $title ) {\r\nadd_settings_section( $slug, $title, array( &$this, 'display_section' ), 'theme-settings' );\r\n}\r\n\r\n$this->get_settings();\r\n\r\nforeach ( $this->settings as $id => $setting ) {\r\n$setting['id'] = $id;\r\n$this->create_setting( $setting );\r\n}\r\n}\r\n\r\n\/\/ jQuery Tabs\r\npublic function scripts() {\r\nwp_print_scripts( 'jquery-ui-tabs' );\r\n}\r\n\/\/ Styling for the theme options page\r\npublic function styles() {\r\n\r\nwp_register_style( 'admin', get_stylesheet_directory_uri() . '\/adminoptions\/admin.css' );\r\nwp_enqueue_style( 'admin' );\r\n\r\n}\r\n\r\n\/\/ Validate settings\r\npublic function validate_settings( $input ) {\r\n\r\nif ( ! isset( $input['reset_theme'] ) ) {\r\n$options = get_option( 'theme_settings' );\r\n\r\nforeach ( $this->checkboxes as $id ) {\r\nif ( isset( $options[$id] ) && ! isset( $input[$id] ) )\r\nunset( $options[$id] );\r\n}\r\nreturn $input;\r\n}\r\nreturn false;\r\n\r\n}\r\n\r\n}\r\n$theme_options = new BR_Theme_Options();\r\nfunction mytheme_option( $option ) {\r\n$options = get_option( 'theme_settings' );\r\nif ( isset( $options[$option] ) )\r\nreturn $options[$option];\r\nelse\r\nreturn false;\r\n};\r\n<\/pre>\n
admin.css<\/h3>\n
.ui-tabs-nav {\r\n\r\n\tborder-bottom: 1px solid #ccc;\r\n\r\n\theight:29px;\r\n\r\n\tmargin: 20px 0;\r\n\r\n\tpadding: 0;\r\n\r\n}\r\n\r\n.ui-tabs-nav li {\r\n\r\n\tdisplay: block;\r\n\r\n\tfloat: left;\r\n\r\n\tmargin: 0;\r\n\r\n}\r\n\r\n.ui-tabs-nav li a {\r\n\r\n\tpadding: 4px 20px 6px;\r\n\r\n\tfont-weight: bold;\r\n\r\n}\r\n\r\n.ui-tabs-nav li a {\r\n\r\n\tborder-style: solid;\r\n\r\n\tborder-color: #CCC #CCC #f1f1f1;\r\n\r\n\tborder-width: 1px 1px 0;\r\n\r\n\tcolor: #676767;\r\n\r\n\ttext-shadow: rgba(255, 255, 255, 1) 0 1px 0;\r\n\r\n\tdisplay: inline-block;\r\n\r\n\tpadding: 4px 14px 6px;\r\n\r\n\ttext-decoration: none;\r\n\r\n\tmargin: 0 6px -1px 0;\r\n\r\n\t-moz-border-radius: 5px 5px 0 0;\r\n\r\n\t-webkit-border-top-left-radius: 5px;\r\n\r\n\t-webkit-border-top-right-radius: 5px;\r\n\r\n\t-khtml-border-top-left-radius: 5px;\r\n\r\n\t-khtml-border-top-right-radius: 5px;\r\n\r\n\tborder-top-left-radius: 5px;\r\n\r\n\tborder-top-right-radius: 5px;\r\n\r\n}\r\n\r\n.ui-tabs-nav li a:hover {color:#454545;}\r\n\r\n.ui-tabs-nav li a:focus {box-shadow:none;}\r\n\r\n.ui-tabs-nav li.ui-tabs-selected a,\r\n\r\n.ui-tabs-nav li.ui-state-active a {\r\n\r\n\tborder-width: 1px;\r\n\r\n\tcolor: #2e2e2e;\r\n\r\n}\r\n\r\n.ui-tabs-panel {\r\n\r\n\tclear: both;\r\n\r\n}\r\n\r\n.ui-tabs-panel h3 {\r\n\r\n\tfont: italic normal normal 24px\/29px \"Times New Roman\", Times, serif;\r\n\r\n\tmargin: 0;\r\n\r\n\tpadding: 0 0 5px;\r\n\r\n\tline-height: 35px;\r\n\r\n\ttext-shadow: 0 1px 0 #fff; \r\n\r\n}\r\n\r\n.ui-tabs-panel h4 {\r\n\r\n\tfont-size: 15px;\r\n\r\n\tfont-weight: bold;\r\n\r\n\tmargin: 1em 0;\r\n\r\n}\r\n\r\n.wrap h3, .wrap table {\r\n\r\n\tdisplay: none;\r\n\r\n}\r\n<\/pre>\n
custom.css<\/h3>\n
.tl {margin:.4em 0; font-weight:bold; text-indent:2px;}\r\n\r\n.fld {margin:0;}\r\n\r\n.inp {height:25px; width:95%;}\r\n\r\n.slc {width:95%;}\r\n\r\n.slmm {width:90px;}\r\n\r\n.sldd {width:65px;}\r\n\r\n.slyy {width:80px;}\r\n\r\n.col_13, .col_23, .col_14 {float:left; position:relative;}\r\n\r\n.col_23 {width:60%;}\r\n\r\n.col_13 {width:40%;}\r\n\r\n.col_14 {width:25%;}\r\n<\/pre>\n
Now you go to your theme main function.php file and paste the below code for enqueue function:<\/p>\n
require get_template_directory() . ‘\/adminoptions\/admin-options.php’;<\/h4>\n
After that, you need to copy and paste the below code for the Option active function into your function.php file<\/strong><\/p>\n
\/\/  Options Active\r\nfunction options( $option ) {\r\n\t$options = get_option( 'theme_settings' );\r\n\tif ( isset( $options[$option] ) )\r\n\t\treturn $options[$option];\r\n\telse\r\n\t\treturn false;\r\n}\r\n<\/pre>\n
Then you need to active logo upload option, so place the below code into your function file:<\/strong><\/p>\n
\/\/=============LOGO Function====================\r\nfunction my_admin_scripts() {\r\nwp_enqueue_script('media-upload');\r\nwp_enqueue_script('thickbox');}\r\nfunction my_admin_styles() {\r\nwp_enqueue_style('thickbox');}\r\nif (isset($_GET['page']) && $_GET['page'] == 'theme-settings') {\r\nadd_action('admin_print_scripts', 'my_admin_scripts');\r\nadd_action('admin_print_styles', 'my_admin_styles');\r\n}\r\n<\/pre>\n
Finally, we show how to show your theme options value on your website, so go to your header.php file and open it after then place below code for theme options value<\/strong><\/p>\n
\u00a0<?php \r\nif (options('logo_options') !== '') { ; ?><img src=\"<?php echo options('logo_options') ; ?>\"><?php } else{ ; ?>\r\n<img src=\"<?php bloginfo('template_url'); ?>\/images\/logo.png\" alt=\"\" class=\"img-responsive\" \/>\r\n<?php };?>\r\n<\/pre>\n
All are done!!!<\/p>\n
\"How-To-Create-A-Simple-WordPress-Theme-Options-Page\"<\/p>\n
If you enjoyed reading this article and have more questions please reach out to our\u00a0support team<\/a>\u00a0via live chat or\u00a0email<\/a>\u00a0and we would be glad to help you. we provide server\u00a0hosting<\/a>\u00a0for all types of need and we can even get your\u00a0server<\/a>\u00a0up and running with the service of your choice.<\/p>\n","protected":false},"excerpt":{"rendered":"
How to Create a Custom Theme Options Page for WordPress? Using the WordPress Settings API to Create Custom Theme Options. You can purchase your\u00a0hosting from Cloudsurph.com,\u00a0Cloudsurph hosting\u00a0is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs. As a WordPress Theme Developer […]<\/p>\n","protected":false},"author":8,"featured_media":5188,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[153,146,155,154,156],"tags":[54,47,105,103,48,113],"class_list":["post-5187","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-theme-customization","category-wordpress","category-wordpress-theme","category-wp-custom-theme","category-wp-theme-options","tag-best-vps-hosting-server-maryland","tag-cheap-cloud-servers","tag-cheap-storage-server-hosting","tag-cheapest-vps","tag-dedicated-server-hosting-in-washington-d-c","tag-speed-test-vps"],"yoast_head":"\nWordPress Settings API: Creating Custom Theme Options -<\/title>\n<meta name=\"description\" content=\"How to Create a Custom Theme Options Page for WordPress? Using the WordPress Settings API to Create Custom Theme Options.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cloudsurph.com\/how-to-create-a-custom-theme-options-for-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress Settings API: Creating Custom Theme Options -\" \/>\n<meta property=\"og:description\" content=\"How to Create a Custom Theme Options Page for WordPress? Using the WordPress Settings API to Create Custom Theme Options.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cloudsurph.com\/how-to-create-a-custom-theme-options-for-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudsurph Web Hosting Washington D.C.\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/CloudSurph\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-29T12:45:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-29T12:57:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/06\/How-To-Create-A-Custom-Theme-Options-Page-For-WordPress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rony\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cloudsurph\" \/>\n<meta name=\"twitter:site\" content=\"@Cloud_Surph\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rony\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-create-a-custom-theme-options-for-wordpress\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-create-a-custom-theme-options-for-wordpress\\\/\"},\"author\":{\"name\":\"Rony\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/person\\\/ac9b4dd136d96e50d5f29c560191e7ed\"},\"headline\":\"WordPress Settings API: Creating Custom Theme Options\",\"datePublished\":\"2022-06-29T12:45:42+00:00\",\"dateModified\":\"2022-06-29T12:57:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-create-a-custom-theme-options-for-wordpress\\\/\"},\"wordCount\":400,\"publisher\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-create-a-custom-theme-options-for-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/How-To-Create-A-Custom-Theme-Options-Page-For-WordPress.jpg\",\"keywords\":[\"Best VPS hosting server Maryland\",\"Cheap Cloud Servers\",\"Cheap Storage Server Hosting\",\"Cheapest VPS\",\"Dedicated Server Hosting in Washington D.C\",\"Speed test VPS\"],\"articleSection\":[\"Theme Customization\",\"WordPress\",\"WordPress Theme\",\"WP Custom Theme\",\"WP Theme Options\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-create-a-custom-theme-options-for-wordpress\\\/\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-create-a-custom-theme-options-for-wordpress\\\/\",\"name\":\"WordPress Settings API: Creating Custom Theme Options -\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-create-a-custom-theme-options-for-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-create-a-custom-theme-options-for-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/How-To-Create-A-Custom-Theme-Options-Page-For-WordPress.jpg\",\"datePublished\":\"2022-06-29T12:45:42+00:00\",\"dateModified\":\"2022-06-29T12:57:06+00:00\",\"description\":\"How to Create a Custom Theme Options Page for WordPress? Using the WordPress Settings API to Create Custom Theme Options.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-create-a-custom-theme-options-for-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-create-a-custom-theme-options-for-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-create-a-custom-theme-options-for-wordpress\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/How-To-Create-A-Custom-Theme-Options-Page-For-WordPress.jpg\",\"contentUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/How-To-Create-A-Custom-Theme-Options-Page-For-WordPress.jpg\",\"width\":1600,\"height\":900},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/how-to-create-a-custom-theme-options-for-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.cloudsurph.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Settings API: Creating Custom Theme Options\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#website\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/\",\"name\":\"Cloudsurph Web Hosting Washington D.C.\",\"description\":\"Dedicated Server Hosting\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.cloudsurph.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#organization\",\"name\":\"CloudSurph Technology Solutions\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/cloudsurph-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/cloudsurph-logo.png\",\"width\":2348,\"height\":1692,\"caption\":\"CloudSurph Technology Solutions\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/CloudSurph\\\/\",\"https:\\\/\\\/x.com\\\/Cloud_Surph\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/person\\\/ac9b4dd136d96e50d5f29c560191e7ed\",\"name\":\"Rony\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g\",\"caption\":\"Rony\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/cloudsurph\"],\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/author\\\/ron\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress Settings API: Creating Custom Theme Options -","description":"How to Create a Custom Theme Options Page for WordPress? Using the WordPress Settings API to Create Custom Theme Options.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.cloudsurph.com\/how-to-create-a-custom-theme-options-for-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"WordPress Settings API: Creating Custom Theme Options -","og_description":"How to Create a Custom Theme Options Page for WordPress? Using the WordPress Settings API to Create Custom Theme Options.","og_url":"https:\/\/www.cloudsurph.com\/how-to-create-a-custom-theme-options-for-wordpress\/","og_site_name":"Cloudsurph Web Hosting Washington D.C.","article_publisher":"https:\/\/www.facebook.com\/CloudSurph\/","article_published_time":"2022-06-29T12:45:42+00:00","article_modified_time":"2022-06-29T12:57:06+00:00","og_image":[{"width":1600,"height":900,"url":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/06\/How-To-Create-A-Custom-Theme-Options-Page-For-WordPress.jpg","type":"image\/jpeg"}],"author":"Rony","twitter_card":"summary_large_image","twitter_creator":"@cloudsurph","twitter_site":"@Cloud_Surph","twitter_misc":{"Written by":"Rony","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cloudsurph.com\/how-to-create-a-custom-theme-options-for-wordpress\/#article","isPartOf":{"@id":"https:\/\/www.cloudsurph.com\/how-to-create-a-custom-theme-options-for-wordpress\/"},"author":{"name":"Rony","@id":"https:\/\/www.cloudsurph.com\/#\/schema\/person\/ac9b4dd136d96e50d5f29c560191e7ed"},"headline":"WordPress Settings API: Creating Custom Theme Options","datePublished":"2022-06-29T12:45:42+00:00","dateModified":"2022-06-29T12:57:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cloudsurph.com\/how-to-create-a-custom-theme-options-for-wordpress\/"},"wordCount":400,"publisher":{"@id":"https:\/\/www.cloudsurph.com\/#organization"},"image":{"@id":"https:\/\/www.cloudsurph.com\/how-to-create-a-custom-theme-options-for-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/06\/How-To-Create-A-Custom-Theme-Options-Page-For-WordPress.jpg","keywords":["Best VPS hosting server Maryland","Cheap Cloud Servers","Cheap Storage Server Hosting","Cheapest VPS","Dedicated Server Hosting in Washington D.C","Speed test VPS"],"articleSection":["Theme Customization","WordPress","WordPress Theme","WP Custom Theme","WP Theme Options"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.cloudsurph.com\/how-to-create-a-custom-theme-options-for-wordpress\/","url":"https:\/\/www.cloudsurph.com\/how-to-create-a-custom-theme-options-for-wordpress\/","name":"WordPress Settings API: Creating Custom Theme Options -","isPartOf":{"@id":"https:\/\/www.cloudsurph.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cloudsurph.com\/how-to-create-a-custom-theme-options-for-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www.cloudsurph.com\/how-to-create-a-custom-theme-options-for-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/06\/How-To-Create-A-Custom-Theme-Options-Page-For-WordPress.jpg","datePublished":"2022-06-29T12:45:42+00:00","dateModified":"2022-06-29T12:57:06+00:00","description":"How to Create a Custom Theme Options Page for WordPress? Using the WordPress Settings API to Create Custom Theme Options.","breadcrumb":{"@id":"https:\/\/www.cloudsurph.com\/how-to-create-a-custom-theme-options-for-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cloudsurph.com\/how-to-create-a-custom-theme-options-for-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cloudsurph.com\/how-to-create-a-custom-theme-options-for-wordpress\/#primaryimage","url":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/06\/How-To-Create-A-Custom-Theme-Options-Page-For-WordPress.jpg","contentUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/06\/How-To-Create-A-Custom-Theme-Options-Page-For-WordPress.jpg","width":1600,"height":900},{"@type":"BreadcrumbList","@id":"https:\/\/www.cloudsurph.com\/how-to-create-a-custom-theme-options-for-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cloudsurph.com\/"},{"@type":"ListItem","position":2,"name":"WordPress Settings API: Creating Custom Theme Options"}]},{"@type":"WebSite","@id":"https:\/\/www.cloudsurph.com\/#website","url":"https:\/\/www.cloudsurph.com\/","name":"Cloudsurph Web Hosting Washington D.C.","description":"Dedicated Server Hosting","publisher":{"@id":"https:\/\/www.cloudsurph.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cloudsurph.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.cloudsurph.com\/#organization","name":"CloudSurph Technology Solutions","url":"https:\/\/www.cloudsurph.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cloudsurph.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2016\/04\/cloudsurph-logo.png","contentUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2016\/04\/cloudsurph-logo.png","width":2348,"height":1692,"caption":"CloudSurph Technology Solutions"},"image":{"@id":"https:\/\/www.cloudsurph.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/CloudSurph\/","https:\/\/x.com\/Cloud_Surph"]},{"@type":"Person","@id":"https:\/\/www.cloudsurph.com\/#\/schema\/person\/ac9b4dd136d96e50d5f29c560191e7ed","name":"Rony","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g","caption":"Rony"},"sameAs":["https:\/\/x.com\/cloudsurph"],"url":"https:\/\/www.cloudsurph.com\/author\/ron\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts\/5187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/comments?post=5187"}],"version-history":[{"count":4,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts\/5187\/revisions"}],"predecessor-version":[{"id":5194,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts\/5187\/revisions\/5194"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/media\/5188"}],"wp:attachment":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/media?parent=5187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/categories?post=5187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/tags?post=5187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}