WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#12343 closed task (blessed) (fixed)

Custom Header Selector

Reported by: ryan Owned by:
Milestone: 3.0 Priority: normal
Severity: normal Version:
Component: UI Keywords: has-patch
Focuses: Cc:

Description

Allow themes to register multiple pre-made headers from which to select. Also allow selecting a solid color header.

Attachments (5)

twentyten-customheader-lq.jpg (150.8 KB) - added by ryan 5 years ago.
Comp
12343-custom-header-style.patch (2.0 KB) - added by iammattthomas 5 years ago.
Styles the header selection table to match the mockup
header-color.diff (9.6 KB) - added by jshreve 5 years ago.
custom background color picker for headers
register_default_headers.diff (485 bytes) - added by jorbin 5 years ago.
Allow child themes / plugins to add to the list of default headers and preserve the existing default headers
register_default_headers.3.diff (416 bytes) - added by jorbin 5 years ago.
eliminates is_array() from previous diff and cast both property as arrays

Download all attachments as: .zip

Change History (30)

@ryan5 years ago

Comp

comment:1 @ryan5 years ago

[13319] adds a selection of headers to twentyten. Thumnails for display in the admin UI are suffixed with -thumbnail. We can either have the theme specifically register headers or look for all images in a specific directory in the theme (twentyten uses headers/ but we can change that if needed).

comment:2 @ryan5 years ago

Maybe register_default_header_images('%s/headers/foo.png', '%s/headers/bar.png') where %s is replaced with the template directory as is done with HEADER_IMAGE. Thumbnails are assumed to be the same file names with a -thumbnail.$ext suffix.

comment:3 @ryan5 years ago

register_default_header_images( array('%s/headers/foo.png', '%s/headers/bar.png') )

comment:4 @ryan5 years ago

To register a default color, just put #21759b, etc. in the array.

comment:5 follow-up: @iammattthomas5 years ago

I've removed the old header from the theme's images directory, and moved the headers directory to %s/images/headers/.

comment:6 in reply to: ↑ 5 @iammattthomas5 years ago

Replying to iammattthomas:

I've removed the old header from the theme's images directory, and moved the headers directory to %s/images/headers/.

In [13333].

comment:7 @nacin5 years ago

I haven't really looked into the custom header code yet, but I noticed that we can probably change/consolidate/remove some of this:

define( 'HEADER_TEXTCOLOR', '');
define( 'HEADER_IMAGE', '%s/images/header-1.jpg'); // %s is theme dir uri
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width',  940 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height',	198 ) );
define( 'NO_HEADER_TEXT', true );

In particular, my testbed is using HEADER_IMAGE by default, and that image no longer exists.

comment:8 @iammattthomas5 years ago

I think the idea is that we'll use a solid color (no image) by default; although Matt mentioned the possibility of choosing an image based on blog URL or something like that. Depends on if someone wants to make it happen. :)

comment:9 @ryan5 years ago

[13403] first pass.

comment:10 @automattor5 years ago

(In [13404]) Default header selector, second pass. see #12343

comment:11 @ryan5 years ago

Color selection isn't done yet. Needs some styling.

comment:12 @sillybean5 years ago

  • Cc steph@… added

comment:13 @nacin5 years ago

  • Type changed from enhancement to task (blessed)

comment:14 @ryan5 years ago

(In [13515]) Fix class name. see #12343

@iammattthomas5 years ago

Styles the header selection table to match the mockup

comment:15 @iammattthomas5 years ago

  • Keywords has-patch added

This patch gets us part of the way there on style; once the color selector is in place I'll take another look.

comment:16 @ryan5 years ago

(In [13620]) Header selector styling fixes. Props iammattthomas. see #12343

comment:17 @ryan5 years ago

(In [13621]) Header selector styling fixes. Props iammattthomas. see #12343

comment:18 @jshreve5 years ago

  • Cc justin.shreve@… added

As far as I could tell there was nothing for picking background colors yet - just text color.

This patch adds support for a custom background color instead of an image and works the way the original comp described. It also adds some new functions and a default custom header callback to output the new header BG without using the style="" attribute.

comments?

comment:19 @jshreve5 years ago

Fixed some problems in IE. Seems to be working pretty well now.

@jshreve5 years ago

custom background color picker for headers

comment:20 @jorbin5 years ago

  • Cc aaron@… added

register_default_headers doesn't properly use %s in child themes. Since %s is substituted for get_template_directory_uri in register_defualt_headers and get_template_directory_uri returns the parent theme uri, child themes can't use %s for it's uri. Ideally we instead have %s substitute the uri for the folder that calls register_defualt_headers or have a paramater for register_default_headers that allows the child themes uri so that both parent and child themes can register default headers.

@jorbin5 years ago

Allow child themes / plugins to add to the list of default headers and preserve the existing default headers

comment:21 @jorbin5 years ago

Currently the default headers are overridden the second time register_default_headers is called. Since child themes might want to keep the list of default headers available, the we should call array_merge the subsequent times it is called. the above patch allows that.

@jorbin5 years ago

eliminates is_array() from previous diff and cast both property as arrays

comment:22 @nacin5 years ago

(In [13928]) Child theme support for theme header registrations. Second call to register_theme_headers() should add more headers, not replace existing headers. add unregister_theme_headers(). props jorbin. see #12343

comment:23 @mikeschinkel5 years ago

  • Cc mikeschinkel@… added

comment:25 @ryan5 years ago

  • Resolution set to fixed
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.