wp_mail wordpress html with style not aplying

Question

I'm trying to send mail from my wordpress plugin but when I retrieve it, it has not styles or images.

I'm doing this way:

<?php
$headers = array(
    "From: XXX <[email protected]>",
    "MIME-Version: 1.0",
    "Content-type: text/html; charset=UTF-8'"
);
$message = "<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    </head>
    <body>
        <div style='background-color: #16a085;'>
            <table>
                <tr><td colspan='2'><img style=\'margin-botton: 20px;\' src='http://XXX.XXXX.com/wp-content/uploads/2015/12/XXX-white.png' /></td></tr>
                <tr><td colspan='2'>DATOS DE CLIENTE</td></tr>
                <tr><td colspan='2'>$particular</td></tr>
                <tr>
                    <td>Nombre:</td>
                    <td>$nombre<br></td>
                </tr>
                <tr>
                    <td>Apellidos:</td>
                    <td>$apellidos</td>
                </tr>
                <tr>
                    <td>Nif:</td>
                    <td>$nif</td>
                </tr>
                <tr>
                    <td>Tel&eacute;fono:</td>
                    <td>$telefono</td>
                </tr>
            </table>
        </div>
    </body>
</html>";

$result = new stdClass();
$result->mailOk = wp_mail($to, $subject, $message, $headers);

I tried a style code in my head, delete the html/head/body blocks (only send the div html code), changed the content-type to iso, and made the wp filter wp_mail_content_type 'text/html'.

The image don't work also.

If I debug the recieved email with devtools, I see:

<div style="background-color:#16a085">
<table>
<tbody>
    <tr>
        <td colspan="2"><img src="http://XXX.XXXX.com/wp-content/uploads/2015/12/XXXX-white.png" style=""></td>
    </tr>
    <tr>
        <td colspan="2">DATOS DE CLIENTE</td>
    </tr>
    <tr>
        <td colspan="2">Usuario particular</td>
    </tr>
    <tr>
        <td>Nombre:</td>
        <td>afsd<br>
    </td>
    </tr>
    <tr>
        <td>Apellidos:</td>
        <td></td>
    </tr>
    <tr>
        <td>Nif:</td>
        <td></td>
    </tr>
    <tr>
        <td>Teléfono:</td>
        <td></td>
    </tr>
</tbody>
</table>

And the email headers:

Received: from server
Received: from 
Subject: Formulario Alta Usuario Web
X-PHP-Script: 
Date: Tue, 23 Feb 2016 11:07:52 +0000
From: 
Message-ID: <53692f88fe04a71fd41ca2475611fa99@
X-Mailer: PHPMailer 5.2.14 (https://github.com/PHPMailer/PHPMailer)
MIME-Version: 1.0
Content-Type: text/html; charset="UTF-8'"
Content-Transfer-Encoding: 8bit
X-AntiAbuse: This header was added to track abuse, please include it with any abuse report
X-AntiAbuse: Primary Hostname - 
X-AntiAbuse: Original Domain - 
X-AntiAbuse: Originator/Caller UID/GID - [500 495] / [47 12]
X-AntiAbuse: Sender Address Domain - 
X-Get-Message-Sender-Via: 
X-Authenticated-Sender: 
X-Source: /usr/bin/php
X-Source-Args: /usr/bin/php /home/public_html/
X-Source-Dir: XXXX.com:/public_html/
Return-Path: 
X-MS-Exchange-Organization-Antispam-Report: IPOnAllowList
X-MS-Exchange-Organization-SCL: -1

why do you need to add the backslash in this? style=\'margin-botton: 20px;\' should be style='margin-botton: 20px;' — Aziz
– Aziz, Commented Feb 23, 2016 at 10:49
Logically, if you use " for the echo string, you'd have to escape double quotes with a backslash, however, a single quote ' wouldn't need escaping... — Aziz
– Aziz, Commented Feb 23, 2016 at 10:58
I know... in fact, on the style tang in div you don't see \. This is a test, by desesperation :) — msolla
– msolla, Commented Feb 23, 2016 at 11:03

Faruk Omar · Accepted Answer · 2016-03-10 09:08:00Z

9

It could be better if you put the code how did you use wp_mail_content_type

You should filter content type before call wp_mail() For example:

add_filter('wp_mail_content_type', function( $content_type ) {
            return 'text/html';
});

wp_mail( '[email protected]', 'The subject', '<div>The message</div>' );

answered Mar 10, 2016 at 9:08

Faruk Omar

1,1932 gold badges14 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gtamborero Over a year ago

Wow! Need this filter only on production machine, on local was working ok my html... strange, but, thank you!!

Aziz · Accepted Answer · 2016-02-26 19:37:06Z

0

Try adding

add_filter('wp_mail_content_type',create_function('', 'return "text/html"; '));

Seems by default wp_mail() returns text/plain content.

You can use WordPress’s wp_mail() function to send emails from your WordPress site. However, the default content type is ‘text/plain’ which does not allow using HTML. If you want to send HTML emails then you will need to set the content type of the email to “text/html” by using the ‘wp_mail_content_type’ filter.

Source: How to Send HTML Emails From WordPress

Edit

Issue seems to be related to mail client rendering of HTML content.

edited Feb 26, 2016 at 19:37

answered Feb 23, 2016 at 10:55

Aziz

7,8233 gold badges33 silver badges54 bronze badges

9 Comments

msolla Over a year ago

Sorry if my question is not clear. I had tested this filter, but I get same result.

Aziz Over a year ago

Hmm, that is strange. Can you inspect the mail with devtools to check the output? Also check the headers in the received e-mail

msolla Over a year ago

Output in devtools: <div style="background-color:#16a085"> <table> <tbody> <tr> <td colspan="2"><img src="enara.litrodeenergia.com/wp-content/uploads/2015/12/…" style=""></td> </tr> <tr> <td colspan="2">DATOS DE CLIENTE</td> </tr> <tr> <td colspan="2">Usuario particular</td> </tr> <tr> <td>Nombre:</td> <td>afsd<br> </td> </tr> <tr> <td>Apellidos:</td> <td></td> </tr> <tr> <td>Nif:</td> <td></td> </tr> <tr> <td>Teléfono:</td> <td></td> </tr> </tbody> </table> </div>

msolla Over a year ago

Received: from server.enara-energia.es (107.6.177.82) by correo.extrasoft.es (10.150.5.7) with Microsoft SMTP Server (TLS) id 8.3.213.0; Tue, 23 Feb 2016 12:07:53 +0100 Received: from enara by server.enara-energia.es with local (Exim 4.86) (envelope-from <[email protected]>) id 1aYAoq-0005OM-Sq for From: Enara <[email protected]> Message-ID: <[email protected]> X-Mailer: PHPMailer 5.2.14 (github.com/PHPMailer/PHPMailer) MIME-Version: 1.0 Content-Type: text/html; charset="UTF-8'" Content-Transfer-Encoding: 8bit

Aziz Over a year ago

you could add this to the original question or post as images, also please edit out any personal/identifying info.... Anyway, the e-mail is getting the HTML content type so that's fine, problem could be with the CSS rules, can you play around with the values using the inspector and check whether or not the CSS is applied

|

Atif Tariq · Accepted Answer · 2024-09-16 10:39:37Z

0

Use headers like this:

$to = '[email protected]';
$subject = 'The subject';
$body = 'The email body content';
$headers = array('Content-Type: text/html; charset=UTF-8');

wp_mail( $to, $subject, $body, $headers );

edited Sep 16, 2024 at 10:39

answered Sep 16, 2024 at 10:21

Atif Tariq

2,7701 gold badge31 silver badges35 bronze badges

Collectives™ on Stack Overflow

wp_mail wordpress html with style not aplying

3 Answers 3

1 Comment

9 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

9 Comments

Comments

Linked

Related