Support » Fixing WordPress » Changing css for wp_die() pages

  • I want to achieve two goals on wp-die() error pages.

    At present I want to change the background color in the CSS and add a Back button to replace the standard ‘back_link’ text: « Back.

    The template CSS for wp_die() is located in the wp-includes/functions.phpfile near line 3400. There I could change the background color. background: #fff; => background: #faf7f2; And, it would further be possible to style the Back button.

    Without changing the WP source is there some way to insert CSS?

    I already have several customized errors for comments and a custom error function, e.g. “ERROR: your email hostname could not be resolved.” and “ERROR: your comment contains blacklisted terms.” The offending term being listed underneath.

    Ideally I could use the same function to format the error page. Can it be done?

    Thanks, if anyone knows an answer.

Viewing 7 replies - 1 through 7 (of 7 total)
  • It looks like there are no hooks into that. There are some parameters, but I don’t see where you can change them. nd those don’t affect the CSS.
    It looks like there are some things that are not written to be customizable.

    Thread Starter Tom

    (@tnbnicer)

    Thanks.

    I’m bound to agree.

    There is a button defined in the CSS. I wonder what that’s for. It could serve as a Back button, I think. The error page seems to have been designed for manual editing.

    What a temptation.

    Dion

    (@diondesigns)

    Since the wp_die() message text can include HTML, I’ll bet you can add the CSS you need with an inline <style></style> tag in the message. It’s worth a try…

    Thread Starter Tom

    (@tnbnicer)

    The minimum manual edit is changing:

    <a href="javascript:void(0)" onclick="history.back()">&laquo; Back</a>

    to:

    <form action="#" id="form"><input type="reset" name="Back" value="<" tabindex="1" onclick="history.back()" class="button"></form>

    I have been trying to determine if the button was implemented in earlier versions of WordPress and removed. A search for history.back() failed to yield buttons however, in archived versions.

    I’m struggling with the temptation. On the plus side, I usually update WordPress by downloading the next version in full before swapping it for the version I’m running, making it somewhat easier to control than an automatic update.

    On the down side, the automatic update feature is quite temperamental, sometimes updating, sometimes not. The next thing you know edited files could be overwritten.

    I’ll survive.

    Thread Starter Tom

    (@tnbnicer)

    Below is the rather long-winded function to implement the button code properly.

    /**
     * Change error handler.
     */
    function get_custom_die_handler() {
    	return 'custom_die_handler';
    }
    /**
     * My actual error handler, which is almost the same as WP - not quite.
     */
    function custom_die_handler( $message, $title="", $args = array() ) {
    	list( $message, $title, $parsed_args ) = _wp_die_process_input( $message, $title, $args );
    
    	if ( is_string( $message ) ) {
    		if ( ! empty( $parsed_args['additional_errors'] ) ) {
    			$message = array_merge(
    				array( $message ),
    				wp_list_pluck( $parsed_args['additional_errors'], 'message' )
    			);
    			$message = "<ul>\n\t\t<li>" . join( "</li>\n\t\t<li>", $message ) . "</li>\n\t</ul>";
    		}
    
    		$message = sprintf(
    			'<div class="wp-die-message">%s</div>',
    			$message
    		);
    	}
    
    	$have_gettext = function_exists( '__' );
    
    	if ( ! empty( $parsed_args['link_url'] ) && ! empty( $parsed_args['link_text'] ) ) {
    		$link_url = $parsed_args['link_url'];
    		if ( function_exists( 'esc_url' ) ) {
    			$link_url = esc_url( $link_url );
    		}
    		$link_text = $parsed_args['link_text'];
    		$message  .= "\n<p><a href='{$link_url}'>{$link_text}</a></p>";
    	}
    
    	if ( isset( $parsed_args['back_link'] ) && $parsed_args['back_link'] ) {
    		$back_text = $have_gettext ? __( '<' ) : '&laquo; Back';
    		$message = "<div><form action=\"#\" id=\"form\"><input type=\"reset\" name=\"Back\" value=\"" . $back_text . "\" tabindex=\"0\" onclick=\"history.back()\" class=\"button\"></form></div>\n" . $message;
    	}
    
    	if ( ! did_action( 'admin_head' ) ) :
    		if ( ! headers_sent() ) {
    			header( "Content-Type: text/html; charset={$parsed_args['charset']}" );
    			status_header( $parsed_args['response'] );
    			nocache_headers();
    		}
    
    		$text_direction = $parsed_args['text_direction'];
    		if ( function_exists( 'language_attributes' ) && function_exists( 'is_rtl' ) ) {
    			$dir_attr = get_language_attributes();
    		} else {
    			$dir_attr = "dir='$text_direction'";
    		}
    print('<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml"' . $dir_attr . '>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=' . $parsed_args['charset'] . '" />
    	<meta name="viewport" content="width=device-width">
    	');
    if ( function_exists( 'wp_no_robots' ) ) { wp_no_robots(); }
    print('	<title>' . $title . '</title>
    	<style type="text/css">
    		html {
    			background: #f1f1f1;
    		}
    
    		body {
    			background: #faf7f2;
    			color: #444;
    			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    			margin: 2em auto;
    			padding: 1em 2em;
    			max-width: 700px;
    			_width:expression(this.scrollWidth>700?"700px":"auto");
    			-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
    			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
    		}
    
    		h1 {
    			border-bottom: 1px solid #dadada;
    			clear: both;
    			color: #666;
    			font-size: 24px;
    			margin: 30px 0 0 0;
    			padding: 0;
    			padding-bottom: 7px;
    		}
    
    		#error-page {
    			margin-top: 50px;
    		}
    		#error-page p,
    		#error-page .wp-die-message {
    			font-size: 14px;
    			line-height: 1.5;
    			margin: 25px 0 20px;
    		}
    		#error-page code {
    			font-family: Consolas, Monaco, monospace;
    		}
    		ul li {
    			margin-bottom: 10px;
    			font-size: 14px ;
    		}
    		a {
    			color: #0073aa;
    		}
    		a:hover,
    		a:active {
    			color: #00a0d2;
    		}
    		a:focus {
    			color: #124964;
    			-webkit-box-shadow:
    				0 0 0 1px #5b9dd9,
    				0 0 2px 1px rgba(30, 140, 190, 0.8);
    			box-shadow:
    				0 0 0 1px #5b9dd9,
    				0 0 2px 1px rgba(30, 140, 190, 0.8);
    			outline: none;
    		}
    
    		.button {
    			background: #f7f7f7;
    			border: 1px solid #ccc;
    			color: #555;
    			display: inline-block;
    			text-decoration: none;
    			font-size: 13px;
    			line-height: 2;
    			height: 28px;
    			margin: 0;
    			padding: 0 10px 1px;
    			cursor: pointer;
    			-webkit-border-radius: 3px;
    			-webkit-appearance: none;
    			border-radius: 3px;
    			white-space: nowrap;
    			-webkit-box-sizing: border-box;
    			-moz-box-sizing:    border-box;
    			box-sizing:         border-box;
    
    			-webkit-box-shadow: 0 1px 0 #ccc;
    			box-shadow: 0 1px 0 #ccc;
    			vertical-align: top;
    		}
    
    		.button.button-large {
    			height: 30px;
    			line-height: 2.15384615;
    			padding: 0 12px 2px;
    		}
    
    		.button:hover,
    		.button:focus {
    			background: #fafafa;
    			border-color: #999;
    			color: #23282d;
    		}
    
    		.button:focus {
    			border-color: #4db1b9;
    			-webkit-box-shadow: 0 0 3px rgba(0, 170, 115, 0.8);
    			box-shadow: 0 0 3px rgba(0, 170, 115, 0.8);
    			outline: none;
    		}
    
    		.button:active {
    			background: #eee;
    			border-color: #999;
    			-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
    			box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
    
    		}
    ');
    if ( 'rtl' == $text_direction ) { echo '		body { font-family: Tahoma, Arial; }'; }
    print('	</style>
    </head>
    <body id="error-page">
    ');
    endif;
    echo $message;
    print('
    </body>
    </html>');
    if ( $parsed_args['exit'] ) { die(); }
    }
    add_filter('wp_die_handler', 'get_custom_die_handler');

    Is it worth it? In my opinion, WordPress could do better by having a choice to use either a button link or text built-in.

    Sorry about the too-wide spacing. I used tabs for others to copy, and am willing to delete the entire solution.

    • This reply was modified 2 years, 1 month ago by Tom.
    • This reply was modified 2 years, 1 month ago by Tom.

    a choice to use either a button link or text

    What’s the point?
    Buttons are not links. Links should not look like buttons.
    Other than that, who really cares what it looks like?

    Thread Starter Tom

    (@tnbnicer)

    Hi.
    I don’t know. I do, if it’s only two lines of code. This, on the other hand …

    I have to think about it. I was hoping to sync error pages across a site with WP and non-WP both appearing uniform. The button and the background color are the sole difference.

    And font-size slightly.

    I’d forgo the button but not the background color. Any ideas?

    • This reply was modified 2 years, 1 month ago by Tom.
    • This reply was modified 2 years, 1 month ago by Tom.
    • This reply was modified 2 years, 1 month ago by Tom.
    • This reply was modified 2 years, 1 month ago by Tom.
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Changing css for wp_die() pages’ is closed to new replies.