{"id":22444,"date":"2018-06-23T23:33:56","date_gmt":"2018-06-23T16:33:56","guid":{"rendered":"http:\/\/tom.ji42.com\/?p=22444"},"modified":"2018-08-27T17:31:05","modified_gmt":"2018-08-27T10:31:05","slug":"custom-headers-wordpress-theme","status":"publish","type":"post","link":"https:\/\/tom.tomwork.net\/?p=22444","title":{"rendered":"Custom Headers WordPress Theme"},"content":{"rendered":"<div id=\"mw-content-text\" class=\"mw-content-ltr\" dir=\"ltr\" lang=\"en\">\n<p><b>Custom Header<\/b>\u00a0is a\u00a0<a title=\"Theme Features\" href=\"https:\/\/codex.wordpress.org\/Theme_Features\">theme feature<\/a>\u00a0introduced with\u00a0<a title=\"Version 2.1\" href=\"https:\/\/codex.wordpress.org\/Version_2.1\">Version 2.1<\/a>. Custom header is an image that is chosen as the representative image in the theme top header section.<\/p>\n<p>See also\u00a0<a title=\"Appearance Header Screen\" href=\"https:\/\/codex.wordpress.org\/Appearance_Header_Screen\">Appearance Header Screen<\/a>.<\/p>\n<div id=\"toc\" class=\"toc\">\n<div id=\"toctitle\">\n<h2>Contents<\/h2>\n<\/div>\n<ul>\n<li class=\"toclevel-1 tocsection-1\"><a href=\"https:\/\/codex.wordpress.org\/Custom_Headers#Adding_Theme_Support\"><span class=\"tocnumber\">1<\/span>\u00a0<span class=\"toctext\">Adding Theme Support<\/span><\/a><\/li>\n<li class=\"toclevel-1 tocsection-2\"><a href=\"https:\/\/codex.wordpress.org\/Custom_Headers#Example\"><span class=\"tocnumber\">2<\/span>\u00a0<span class=\"toctext\">Example<\/span><\/a>\n<ul>\n<li class=\"toclevel-2 tocsection-3\"><a href=\"https:\/\/codex.wordpress.org\/Custom_Headers#Set_a_custom_header_image\"><span class=\"tocnumber\">2.1<\/span>\u00a0<span class=\"toctext\">Set a custom header image<\/span><\/a><\/li>\n<li class=\"toclevel-2 tocsection-4\"><a href=\"https:\/\/codex.wordpress.org\/Custom_Headers#Upload_other_custom_header_images\"><span class=\"tocnumber\">2.2<\/span>\u00a0<span class=\"toctext\">Upload other custom header images<\/span><\/a><\/li>\n<li class=\"toclevel-2 tocsection-5\"><a href=\"https:\/\/codex.wordpress.org\/Custom_Headers#Use_flexible_headers\"><span class=\"tocnumber\">2.3<\/span>\u00a0<span class=\"toctext\">Use flexible headers<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"toclevel-1 tocsection-6\"><a href=\"https:\/\/codex.wordpress.org\/Custom_Headers#Backwards_Compatibility\"><span class=\"tocnumber\">3<\/span>\u00a0<span class=\"toctext\">Backwards Compatibility<\/span><\/a><\/li>\n<li class=\"toclevel-1 tocsection-7\"><a href=\"https:\/\/codex.wordpress.org\/Custom_Headers#Resources\"><span class=\"tocnumber\">4<\/span>\u00a0<span class=\"toctext\">Resources<\/span><\/a><\/li>\n<li class=\"toclevel-1 tocsection-8\"><a href=\"https:\/\/codex.wordpress.org\/Custom_Headers#Related\"><span class=\"tocnumber\">5<\/span>\u00a0<span class=\"toctext\">Related<\/span><\/a><\/li>\n<\/ul>\n<\/div>\n<h2><!--more--><\/h2>\n<h2><span id=\"Adding_Theme_Support\" class=\"mw-headline\">Adding Theme Support<\/span><\/h2>\n<p>Since\u00a0<a title=\"Version 3.4\" href=\"https:\/\/codex.wordpress.org\/Version_3.4\">Version 3.4<\/a>, themes need to use\u00a0<a title=\"Function Reference\/add theme support\" href=\"https:\/\/codex.wordpress.org\/Function_Reference\/add_theme_support\">add_theme_support()<\/a>\u00a0in the\u00a0<a title=\"Theme Development\" href=\"https:\/\/codex.wordpress.org\/Theme_Development#Functions_File\">functions.php<\/a>\u00a0file to support custom headers, like so:<\/p>\n<pre>add_theme_support( 'custom-header' );<\/pre>\n<p>Note that you can add default arguments using:<\/p>\n<pre>$defaults = array(\r\n\t'default-image'          =&gt; '',\r\n\t'width'                  =&gt; 0,\r\n\t'height'                 =&gt; 0,\r\n\t'flex-height'            =&gt; false,\r\n\t'flex-width'             =&gt; false,\r\n\t'uploads'                =&gt; true,\r\n\t'random-default'         =&gt; false,\r\n\t'header-text'            =&gt; true,\r\n\t'default-text-color'     =&gt; '',\r\n\t'wp-head-callback'       =&gt; '',\r\n\t'admin-head-callback'    =&gt; '',\r\n\t'admin-preview-callback' =&gt; '',\r\n);\r\nadd_theme_support( 'custom-header', $defaults );\r\n<\/pre>\n<p>You must also\u00a0<a title=\"Function Reference\/register default headers\" href=\"https:\/\/codex.wordpress.org\/Function_Reference\/register_default_headers\">register the header image<\/a>\u00a0before it can be used as a default in your theme.<\/p>\n<h2><span id=\"Example\" class=\"mw-headline\">Example<\/span><\/h2>\n<h3><span id=\"Set_a_custom_header_image\" class=\"mw-headline\">Set a custom header image<\/span><\/h3>\n<p>Set a default header image 980px width and 60px height:<\/p>\n<pre>$args = array(\r\n\t'width'         =&gt; 980,\r\n\t'height'        =&gt; 60,\r\n\t'default-image' =&gt; get_template_directory_uri() . '\/images\/header.jpg',\r\n);\r\nadd_theme_support( 'custom-header', $args );\r\n<\/pre>\n<h3><span id=\"Upload_other_custom_header_images\" class=\"mw-headline\">Upload other custom header images<\/span><\/h3>\n<p>Set a default header image and allow the site owner to upload other images:<\/p>\n<pre>$args = array(\r\n\t'width'         =&gt; 980,\r\n\t'height'        =&gt; 60,\r\n\t'default-image' =&gt; get_template_directory_uri() . '\/images\/header.jpg',\r\n\t'uploads'       =&gt; true,\r\n);\r\nadd_theme_support( 'custom-header', $args );\r\n<\/pre>\n<h3><span id=\"Use_flexible_headers\" class=\"mw-headline\">Use flexible headers<\/span><\/h3>\n<p>Set flexible headers:<\/p>\n<pre>$args = array(\r\n\t'flex-width'    =&gt; true,\r\n\t'width'         =&gt; 980,\r\n\t'flex-height'    =&gt; true,\r\n\t'height'        =&gt; 200,\r\n\t'default-image' =&gt; get_template_directory_uri() . '\/images\/header.jpg',\r\n);\r\nadd_theme_support( 'custom-header', $args );\r\n<\/pre>\n<p>update your header.php file to:<\/p>\n<pre>&lt;img src=\"&lt;?php header_image();\u00a0?&gt;\" height=\"&lt;?php echo get_custom_header()-&gt;height;\u00a0?&gt;\" width=\"&lt;?php echo get_custom_header()-&gt;width;\u00a0?&gt;\" alt=\"\" \/&gt;\r\n<\/pre>\n<h2><span id=\"Backwards_Compatibility\" class=\"mw-headline\">Backwards Compatibility<\/span><\/h2>\n<p>To add backwards compatibility for older versions, use the following code:<\/p>\n<pre>global $wp_version;\r\nif ( version_compare( $wp_version, '3.4', '&gt;=' ) )\u00a0:\r\n\tadd_theme_support( 'custom-header' );\r\nelse\u00a0:\r\n\tadd_custom_image_header( $wp_head_callback, $admin_head_callback );\r\nendif;\r\n<\/pre>\n<h2><span id=\"Resources\" class=\"mw-headline\">Resources<\/span><\/h2>\n<ul>\n<li><a class=\"external text\" href=\"http:\/\/generatewp.com\/theme-support\/\" rel=\"nofollow\">WordPress Theme Support Generator<\/a><\/li>\n<\/ul>\n<h2><span id=\"Related\" class=\"mw-headline\">Related<\/span><\/h2>\n<p><a title=\"Theme Features\" href=\"https:\/\/codex.wordpress.org\/Theme_Features\"><b>Theme Support<\/b><\/a>:\u00a0<a title=\"Function Reference\/add theme support\" href=\"https:\/\/codex.wordpress.org\/Function_Reference\/add_theme_support\">add_theme_support()<\/a>,\u00a0<a title=\"Function Reference\/remove theme support\" href=\"https:\/\/codex.wordpress.org\/Function_Reference\/remove_theme_support\">remove_theme_support()<\/a>,\u00a0<a title=\"Function Reference\/current theme supports\" href=\"https:\/\/codex.wordpress.org\/Function_Reference\/current_theme_supports\">current_theme_supports()<\/a><br \/>\n<a title=\"Theme Features\" href=\"https:\/\/codex.wordpress.org\/Theme_Features\"><b>Theme Features<\/b><\/a>:\u00a0<a title=\"Sidebars\" href=\"https:\/\/codex.wordpress.org\/Sidebars\">sidebar<\/a>,\u00a0<a title=\"Navigation Menus\" href=\"https:\/\/codex.wordpress.org\/Navigation_Menus\">menus<\/a>,\u00a0<a title=\"Post Formats\" href=\"https:\/\/codex.wordpress.org\/Post_Formats\">post-formats<\/a>,\u00a0<a title=\"Title Tag\" href=\"https:\/\/codex.wordpress.org\/Title_Tag\">title-tag<\/a>,\u00a0<a title=\"Custom Backgrounds\" href=\"https:\/\/codex.wordpress.org\/Custom_Backgrounds\">custom-background<\/a>,\u00a0<strong class=\"selflink\">custom-header<\/strong>,\u00a0<a title=\"Theme Logo\" href=\"https:\/\/codex.wordpress.org\/Theme_Logo\">custom-logo<\/a>,\u00a0<a title=\"Post Thumbnails\" href=\"https:\/\/codex.wordpress.org\/Post_Thumbnails\">post-thumbnails<\/a>,<a title=\"Automatic Feed Links\" href=\"https:\/\/codex.wordpress.org\/Automatic_Feed_Links\">automatic-feed-links<\/a>,\u00a0<a title=\"Theme Markup\" href=\"https:\/\/codex.wordpress.org\/Theme_Markup\">html5<\/a>,\u00a0<a title=\"Editor Style\" href=\"https:\/\/codex.wordpress.org\/Editor_Style\">editor-style<\/a>,\u00a0<a title=\"Content Width\" href=\"https:\/\/codex.wordpress.org\/Content_Width\">content_width<\/a><\/p>\n<ul>\n<li>Function:\u00a0<a class=\"mw-redirect\" title=\"header image\" href=\"https:\/\/codex.wordpress.org\/header_image\">header_image<\/a><\/li>\n<li>Function:\u00a0<a class=\"mw-redirect\" title=\"get header image\" href=\"https:\/\/codex.wordpress.org\/get_header_image\">get_header_image<\/a><\/li>\n<li>Function:\u00a0<a class=\"new\" title=\"get custom header (page does not exist)\" href=\"https:\/\/codex.wordpress.org\/index.php?title=get_custom_header&amp;action=edit&amp;redlink=1\">get_custom_header<\/a><\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<div id=\"catlinks\">\n<div id=\"catlinks\" class=\"catlinks\" data-mw=\"interface\">\n<div id=\"mw-normal-catlinks\" class=\"mw-normal-catlinks\">\n<p><a title=\"Special:Categories\" href=\"https:\/\/codex.wordpress.org\/Special:Categories\">Categories<\/a>:<\/p>\n<ul>\n<li><a title=\"Category:Functions\" href=\"https:\/\/codex.wordpress.org\/Category:Functions\">Functions<\/a><\/li>\n<li><a title=\"Category:Advanced Topics\" href=\"https:\/\/codex.wordpress.org\/Category:Advanced_Topics\">Advanced Topics<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Custom Header\u00a0is a\u00a0theme feature\u00a0introduced with\u00a0Version 2.1. Custom header is an image that is chosen as the representative image in the theme top header section. See also\u00a0Appearance Header Screen. Contents 1\u00a0Adding Theme Support 2\u00a0Example 2.1\u00a0Set a custom header image 2.2\u00a0Upload other custom header images 2.3\u00a0Use flexible headers 3\u00a0Backwards Compatibility 4\u00a0Resources 5\u00a0Related<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[13],"tags":[245,244],"class_list":["post-22444","post","type-post","status-publish","format-standard","hentry","category-13","tag-theme","tag-wordpress"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6cOVM-5Q0","_links":{"self":[{"href":"https:\/\/tom.tomwork.net\/index.php?rest_route=\/wp\/v2\/posts\/22444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tom.tomwork.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tom.tomwork.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tom.tomwork.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tom.tomwork.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22444"}],"version-history":[{"count":2,"href":"https:\/\/tom.tomwork.net\/index.php?rest_route=\/wp\/v2\/posts\/22444\/revisions"}],"predecessor-version":[{"id":22592,"href":"https:\/\/tom.tomwork.net\/index.php?rest_route=\/wp\/v2\/posts\/22444\/revisions\/22592"}],"wp:attachment":[{"href":"https:\/\/tom.tomwork.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tom.tomwork.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=22444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tom.tomwork.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=22444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}