Adaptive Blog Theme: Page Templates
videos

Adaptive Blog Theme: Page Templates

on Jan 11th 2013 with 46 comments
Tutorial Details
  • Screencast duration: 53 mins
  • Difficulty: Beginner
  • Topic: WordPress
This entry is part 6 of 12 in the Adaptive Blog Theme: From Photoshop to WordPress Session
« PreviousNext »

Not all content on a blog is in posts. We need page templates for archives, a page template that’s full width, and we’re even going to go over a more sophisticated template that deals with a contact form and validation.

Default Page Template (page.php) and Custom Page Templates: Archives and Full Width


Alternatively, Download the video, or subscribe to Wptuts+ screencasts via YouTube

Contact Page Template (General Structure and PHP Data Validation)


Alternatively, Download the video, or subscribe to Wptuts+ screencasts via YouTube

Completed the Contact Page With All the PHP Code


Alternatively, Download the video, or subscribe to Wptuts+ screencasts via YouTube
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

This author has yet to write their bio.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • SaintClause

    Great post as usual! The best tuts on wptuts!

  • krim belkacem

    thank you adi purdila for this series
    great tutorial!

  • Sharjeel Hassan

    Best Of the TutsPlus Really The Best

  • http://www.facebook.com/al.mcrorie Al McRorie

    coding along just fine until you throw that verify email code at me in the second video, where can I find a copy of that so that I get it coded in my work correctly?? really a showstopper in coding up the theme as you go along, not at all like coding up php lines

    Al

    • http://www.facebook.com/al.mcrorie Al McRorie

      anybody else know where to get that verify code?? so I can continue to code along with the videos

    • Adi Purdila
      Author

      Hi Al,

      So sorry about this, I didn’t think about providing that code :(

      Here’s a pen I created with that function: http://codepen.io/adipurdila/pen/xDEgz

      • http://www.facebook.com/al.mcrorie Al McRorie

        thanks Adi

  • Richard

    Nice one! Will the files be availbable for download so we dont have to manually type the code? :)

    • Adi Purdila
      Author

      Hi Richard,

      To my knowledge, the files will be available at the end of the series.

      • Richard

        Hello Adi,

        Thanks. Great job btw!

  • http://twitter.com/bshahwani Bilal Shahwani

    Very nice tutorial adi, a few things I wanted to point out.

    #1 – WP provides function is_email that should be used instead of writing your own.

    #2 – You don’t need to add another hidden field instead you can just put name=’contact-submit’ to the submit button or use associative value of contact on each field (refer: point#3).

    #3 – If I were you I would use contact[name], contact[email], contact[url], contact[message] – Doing that gives me way to avoid using any extra field or name (point#2 above), secondly I can use foreach loop instead of testing every field separately.

    & on side note you forgot to add ‘contact-’ in the url label :p

    • Adi Purdila
      Author

      Hi Bilal,

      That’s awesome advice, thank you :) I still have lots to learn in WP so this comes in really handy.

  • Abdelmomen Bauomy

    Thanks for the great tutorials , it comes on its time , just you didn’t add this post to the whole series page :) , good job adi thank you

  • Nattasak

    I follow all this “Adaptive Blog” series, it’s awesome tutorial.

    Thanks Adi Purdila.

  • http://www.facebook.com/al.mcrorie Al McRorie

    new problem after coding up third video: I am getting Error! and this php error message: Warning: mail() [function.mail]: “sendmail_from” not set in php.ini or custom “From:” header missing in C:xampphtdocswordpresswp-contentthemesadaptivepage-contact.php on line 68

    line 68 is the if (mail($receiver_email,$subject, $body, $headers)) line in page-contact.php.

    any suggestions on correcting this?

    Al

    • Adi Purdila
      Author

      It looks to me like you don’t have an email server installed on your testing machine. XAMPP doesn’t come with an email server by default, so you can’t really do mail testing on your local site.

      So, you can either install one (see this for some ideas: http://stackoverflow.com/questions/4652566/php-mail-setup-in-xampp) or you can just upload the site on a remote server which has the email configured and test it there. Personally, I prefer option no. 2 because it’s much easier :)

      • http://twitter.com/bshahwani Bilal Shahwani

        His problem is that server cannot determine what to insert in From field since there is no default email set in php.ini nor one is provided in headers, easiest way out is to define ‘From: email@address.com‘ in $headers variable.

        • http://www.facebook.com/al.mcrorie Al McRorie

          moved the code to an online server and contact page works ok now.

  • tasy

    thanks man u are great!!!

  • http://twitter.com/joey89924 joey

    Doing that gives me way to avoid using any extra field or name..
    BTA16-600B

  • noah52336

    great tips for doing good work,,,,,,,,,,,

  • http://www.facebook.com/blizzu Raine Luntta

    Tutorial seems great so far. Will there be any transcript or text-version available for this tutorial? I find them easier to follow :)

    • Adi Purdila
      Author

      @facebook-1431361979:disqus Unfortunately there is no text version, only video.

  • http://twitter.com/TusharNayak4 Tushar Nayak

    The things mentioned about this blog theme with the respective template details was a awaring factor to my concern about this in details.
    website templates

  • Christoph

    at 7:10 (last video) when i try to submit contact form i get this error
    “Warning: preg_match() [function.preg-match]: Compilation failed: unmatched parentheses at offset 66 in /home/fayadlj27/domains/imvudevcenter.com/public_html/wp-content/themes/Devcenter/page-contact.php on line 18″

    (i typed over the whole thing including the weird email verify code)
    Whats wrong? (i can send you my code if you want to check)

    • Adi Purdila
      Author

      Hmm, you should check line 18, you probably forgot to close a parentheses somewhere. You can send me the code if you want, I’ll have a look :)

      • Christoph

        i dont know how i can message you herebut here’s my code (: http://tinytext.org/TRvk

        • Adi Purdila
          Author

          Hmm. Try replacing your function with the original one found here: http://codepen.io/adipurdila/pen/xDEgz That should take care of any typo :) Let me know if that works for you.

          • Christoph

            Great! it worked. I had to over type it (becuase i couldnt find that code anywhere) and a far as i know there wasnt any typo but the problem is fixed :D

          • Christoph

            Sorry but one more question if you dont mind.

            Is it possible to have a drop down that will affect the form? for example

            [Dropdown]
            item1: contact
            item2: sales
            item3: bugs

            - When item 1 is selected it will send the form with a name [Contact] to contact@mysite.com
            - When item 2 is selected it will send the form with a name [Sales] to sales@mysite.com
            - When item 3 is selected it will send the form with a name [Bug report] to bug@mysite.com

            Do you know what i mean? Maybe it could be done with “if” coding something like
            http://tny.cz/index.php?act=submit

            Or something like that (i dont know these codes out of my head)

          • Adi Purdila
            Author

            Yep, it’s possible. You’d have to do something like this: http://codepen.io/adipurdila/pen/BFAzC

          • Christoph

            Thanks! Is there a link where i could donate you via paypal?
            i apreciate your help and want to do something in return.

            I’m facing one more problem (i think a css one) I have added a class=”green” to the “succes!” and class=”red” to the error one. but none of these are changing colors (also the name, email and message text’s (it’s like the css will ignore !important; i dont know why though.
            .green {color:#1ed300!important;}
            .red, .p-error{color:#d30000!important;}

            And when i send a test message to my self the “sender” (in this case myself) email is “noreply@imvudevcenter.com” (even though i filled in my very own personal email adres, the same one that receives all the messages form this form”

          • Adi Purdila
            Author

            You must leave a space before !important, try that. About the contact form… did you follow my exact instructions?

            PS: No donation needed :)

          • Christoph

            Nope, no luck still black for all. And yes i’ve coded everything like you but then acording to my website name and theme. I also changed
            _e('Email', 'adaptive-framework');
            to
            _e('Email', 'Devcenter');
            even though i dont know why the second word is for (it didnt gave me errors so i did it like you to get the same result)

            Heres my page-contact.php + it’s css: http://codepen.io/Chrisbeats/pen/LHjqi (just made a account its so effective, thanks for sharing!)

          • Adi Purdila
            Author

            Ok, about the form. The way you have it setup, your messages will be sent to: c.vanliere@live.nl . What email address did you specify in the email input field when you sent that test message?

            _e('Email', 'whereisthisfor?');

            The second word represents the domain for the translation. Think of it as the grouping of all the items that need translation under one domain/name. The series also has a video on localization, you can learn more on the subject very soon :)

            About the CSS bit… if you’re trying to change the color of the actual labels, you should try and target those specifically: .p-error label {}

          • Christoph

            Still nothing (changed to .p-error label ) http://imvudevcenter.com/contact/
            I filled this in
            Name: Chris
            Email: c.vanliere@live.nl (showing up noreply@imvudevcenter.com in my email folder)
            website: blank
            message: this is a test message.

            & thanks, could i leave it blank like
            _e('email');
            untill i get to know about this better? (i’ve nowhere used this right now)
            i’ve only seen something like it using shortcodes.

      • Christoph

        I dont know anything about those parentheses i just over-typed it & those php errors aren’t very clear either to me especially this one. Line 18 is at [0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i",$verify_email));

  • http://www.baguje.com Saša Stefanović

    Thanks for great post, i’m watching every one in the series. Also, you should update youtube playlist for this series with new clips (this ones) :)

  • Christoph

    Sorry to bother you again but, could you maybe make a tutorial and extend this form sending method with like: checkboxes, radio buttons, select inputs and file attachments (also how to make it only a specefic file type like png or zip and like only send if the file isn’t larger than 200kb)? i’ve tried to search but with no succes

    • Adi Purdila
      Author

      That’s a good idea, it’s in the pipeline :) Thanks for your suggestion.

      • Christoph

        Thanks, im glad you like it :)

        Keep up the good work.

      • Oscar

        Would also be very interested in this :)

  • aditya

    i cant get the menu item on the page even though i added it from back end…its just shows sample page …

    • Αποστόλης Ταξινταρίδης

      hello, did you manage to fix it? because i have the same error..

  • Pingback: Best of Tuts+ in January 2013 | PJExploration

  • Pingback: Best of Tuts+ in January 2013 | DigitalMofo

  • Pingback: Best of Tuts+ in January 2013 | IBN8 – Ableton Live Tutorials – Free VST's

  • Pingback: Best of Tuts+ in January 2013

  • Pingback: Best of Tuts+ in January 2013 - heromind - High quality design resources for graphics and web designer in 2013

  • http://twitter.com/QwertyDesignUK Richard Dale

    I know many have said this but thanks so much for this series the videos have been excellent this far. The time you take to fix people’s code is also quite amazing. Huge thanks for taking the time. I’ve learnt loads from this series.

    • Adi Purdila
      Author

      You’re welcome Richard :)