PHP Scripts – WordPress Tutorials

I have been asked several times a simple question “How I can add a newsletter box after your post?”, then I think that I should write about that and made a subscriber newsletter box as shown in image.

Here you need to follow some simple steps and you will get a subscribe box after your post as I have done.

Step#1

You need to open your style.css file and copy and paste the following code at the end of your style.css

To open your style.css, just click, Appearance->editor->style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/* eNews and Update Widget

------------------------------------------------------------ */

.enews-widget {

background-color: #e7e7e7;

border: 10px solid #ddd;

margin: 0 50px;

}

.enews-widget .widget-wrap {

border: 1px solid #fff;

}

.enews {

background: url(images/enews-ribbon.png) no-repeat top left;

margin: -17px -18px;

overflow: hidden;

padding: 45px 50px 40px;

text-align: center;

text-shadow: 1px 1px #fff;

}

.enews #subbox {

-moz-box-shadow: 0 0 3px #bbb;

-webkit-box-shadow: 0 0 3px #bbb;

background: #fff url(images/enews-subbox.png) no-repeat center left;

box-shadow: 0 0 3px #bbb;

color: #999;

margin: 10px -7px 10px 0;

padding: 13px 0 13px 37px;

width: 250px;

}

.enews #subbutton {

background-color: #666;

color: #fff;

padding: 13px 12px;

}

.enews #subbutton:hover {

background-color: #555;

}

Step#2:

You need to Download these images, extract files and upload images to your child’s theme directory.

Wp-content/themes/Your-active-theme/images/

Step#3:

Now just do one simple thing, open appearance->editor->single-post.php

Now copy and paste the following code before wp-content();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="newsletter">

<div>

<div class="newsletter-wrap">

<h4>Sign up for my Newsletter</h4>

<p>Receive WordPress tips and learn how to customize the Genesis Framework with detailed tutorials.</p>

<form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=computersneaker', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<input value="enter your email address" id="subbox" onfocus="if ( this.value == 'enter your email address') { this.value = ''; }" onblur="if ( this.value == '' ) { this.value = 'enter your email address'; }" name="email" type="text">

<input name="uri" value="computersneaker" type="hidden">

<input name="loc" value="en_US" type="hidden">

<input value="Sign Up" id="subbutton" type="submit">

</form>

</div>

</div>

</div>

Everyone wants to get more and more subscribers in order to get more traffic to your website. So Don’t forget to subscribe to my Website.

Random Posts


Categories: Web Development, Wordpress
  • http://www.yatramantra.com/ yatramantra

    Nice info Buddy!! Keep working :)

  • Muhammad Haroon

    Yep, You really got a nice tut bro.. Keep it up…

    • engrmudasirmalik

      Thank you haroon! And thank you for returning to my blog. Stay Tuned bro.

  • http://abdul.thinkbeyondwindow.com/ WPTutTips

    very amazing and informative post.