Last active
March 8, 2018 18:57
-
-
Save robinbastien/709025422ae49adf118f5327c17b78c7 to your computer and use it in GitHub Desktop.
[Wordpress ACF Icon Selector] Modify an ACF radio field to be used as an icon picker. add the .icon-selector class when creating the field #wordpress #acf #backend #icons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Icon Selector | |
*/ | |
.acf-field.icon-selector .acf-radio-list > li { | |
padding: 0.25rem 0; | |
margin-right: 0.5rem; | |
} | |
.acf-field.icon-selector li > label { | |
display: inline-block; | |
min-width: 2rem; | |
padding: 1rem; | |
position: relative; | |
} | |
.acf-field.icon-selector li > label > input[type="radio"] { | |
opacity: 0; | |
} | |
.acf-field.icon-selector li > label > input[type="radio"] + i { | |
position: absolute; | |
font-size: 1.1rem; | |
padding: 0.75rem; | |
left: 0; | |
right: 0; | |
text-align: center; | |
top: 0; | |
bottom: 0; | |
z-index: 2; | |
line-height: 1.5; | |
background-color: white; | |
border-radius: 7px; | |
border: 1px solid #f2f2f2; | |
} | |
.acf-field.icon-selector li > label.selected > input[type="radio"] + i { | |
background-color: #309cf3; | |
border-color: #2b9af3; | |
color: white; | |
pointer-events: none; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Update the admin CSS function | |
function machine_admin_load_css() { | |
// don't load on front-end unless they're logged in | |
if( is_user_logged_in() ) { | |
wp_enqueue_style( "machine_admin", THEME_PATH . "/functions/machine-admin.css"); | |
wp_enqueue_style( "machine_icons", THEME_PATH . "/style-icons.css"); | |
} | |
} | |
/** | |
* Add backend icons | |
* @param [type] $field [description] | |
* @return [type] [description] | |
*/ | |
function machine_icon_list( $field ) { | |
if( $field['wrapper']['class'] == 'icon-selector' && isset($field['choices']) ) { | |
foreach( $field['choices'] as $key => $value ) { | |
$field['choices'][$key] = '<i class="icon cspgno-icon-' . $value . '"></i>'; | |
} | |
} | |
return $field; | |
} | |
add_action( 'acf/prepare_field/type=radio', 'machine_icon_list', 10, 1 ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment