Twenty Twelve Landing Page

Isn’t WordPress overkill for a startup’s “coming soon” page? Yeah but: would need a brochureware site soon enough, and subscribing for notifications? So, no, WP it must be. (The core web app would obviously run on a “real” back-end — Node, NoSQL… the cool stuff.)

But, first things first, just a landing page.

Requirements

  1. Single, simple page: nicely styled, very little text and layout.
  2. Subscribe to be notified once we launch.
  3. Social share buttons?

Stream of consciousness

  1. Installing yet another WP on WebFaction is just a few clicks. ;o)
  2. Bought a really trivial static HTML template from ThemeForest. ($5, don’t overthink it?)
  3. I want to tweak it, and tho it provides a PHP script to collect emails in a text file, it’s a bit too simple? No input sanitization? I don’t trust PHP. And how to use it to mass mail later? Headache!
  4. WP plugin with >1M installations ought to be safer. And it handles mailing already. ;o)
  5. Subscribe2‘s setup sucks: ugly, incomprehensible. (I blame WP for this: should provide better (uniform/consistent, correct) settings facilities for extensions…)
  6. Let’s add a “page template”, like TT’s “Full-width Page Template, No Sidebar” (full-width.php), removing what we don’t need (probably stuff get_header() renders), and adding a form for subscribing — widget? Oh, shortcode! So easy. (I’m fascinated by WP’s component/extension mechanisms.)
  7. HTML: to drop the banner/masthead, don’t call get_header(), which includes theme’s header.php, but copy parts of it into our template instead.
  8. And all this should be put in a child theme, of course. Create the mandatory style.css with metadata, and put template’s CSS in it.
  9. What about assets? Those relative to child’s style.css — no problem. JS: ask WP to load them. Including CDN stuff. In coming-soon.php, since only used on that page, otherwise we’d add a functions.php.
  10. CSS: target stuff on landing page by prefixing selectors with body.page-template-coming-soon-php. Inheriting TT’s CSS is a lot of baggage to carry… Override stuff (so much!) this page doesn’t want, or start from scratch?
  11. Had to selectively use parts of content-page.php instead of <?php get_template_part( 'content', 'page' ); ?>.
  12. Webfonts! Google. Easy:
    wp_enqueue_style("webfonts", "http://fonts.googleapis.com/css?family=Roboto:400,700", array(), null);

    and

    body.page-template-coming-soon-php h1.entry-title {font-family: Roboto, sans-serif; font-size: 75px; color: white; text-align: center; text-shadow:0 2px 2px rgba(0,0,0,0.3);}
  13. Responsive? CSS background-size: cover.
  14. Large images?
  15. Subscribe2’s HTML sucks! <br>?! What year is this? Patch the code (PHP) or hack around it in CSS? Also, I don’t want the “unsubscribe” button, nor the annoying hiding of the form when I’m logged in. Hmm, shortcode has an optional attribute hide=unsubscribe, but the <br> I can’t get rid of (hide with CSS), can I? So it seems will have to mess with the code: comment lines 69-71 of classes/class-s2-frontend.php out:
    /* if ( $user_ID ) {
    	$this->s2form = $this->profile;
    } */

    and remove the $#@! non-semantic elements!

    $this->form = "<form method=\"post\"" . $action . ">...


Comments are closed.