The Goal:
Create a custom UPLOAD button that retain the file information and makes it visible after upload.
There are many blogs out there regarding how to customize the file upload button which require you to hide the original button, and consequentially the file indicator that shows which file you uploaded. This example shows how to customize the button in addition to creating a container to display the file you uploaded, which can be moved anywhere you like.
Requirements:
- HTML & CSS
- jQuery
- Contact Form 7 & File Uploading/Attachments (Reference)
Before
After
PHP
This code will be placed in your functions.php page within your child theme file (FTP access may be required).
[cc lang=”php”]
// Add Page Slug to Body
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . ‘-‘ . $post->post_name;
}
return $classes;
}
add_filter( ‘body_class’, ‘add_slug_body_class’ );
[/cc]
// Add Page Slug to Body
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . ‘-‘ . $post->post_name;
}
return $classes;
}
add_filter( ‘body_class’, ‘add_slug_body_class’ );
[/cc]