Get 10% Off From your First Project

Write a tweet about the Choppr to your contacts and receive 10% off from your first project with us.

Next, when you contacting us just use the 10PERCENTOFFTWEET code and send us your twitter handle.


Adding WordPress Custom Fields as ContactForm 7 Select Dropdown

Here is the problem I was faced with in one of my recent projects. I needed to add dynamically created select dropdown into the Contact Form 7 plugin. So basically I needed to take some custom fields values and somehow put them into the form.

Let me visualize things before I give you the solution.

I wanted to add Webinar dates as select dropdown into my form. Each Webinar entry (post) had two Webinar dates that are stored as custom fields:

post-custom-fields

Once I had my posts created I needed to create the contact form by using the Contact Form 7 plugin. This is how my form looked like in the back-end:

contact-form7-plugin

If you have used Contact Form 7 plugin before you will notice one “shortcode” that isn’t familiar to you and that’s the [wpcf7_add_wd]. We will add a function later that will help us to add our select dropdown with that custom shortcode.

Now lets create our custom shortcode function. If you are familiar with building WordPress themes the code would be pretty straightforward. Otherwise, you can get in touch with me and I will try to help you.


<?php

function add_webinar_to_cf7() {

	$html = '<p><label>Webinar Dates</label><select name="your-webinar-date" class="fs2">';

	$the_query = new WP_Query();
	$the_query->query('showposts=9999&category_name=webinars&orderby=date&order=DESC');

	if ($the_query->have_posts()) {

	    while ($the_query->have_posts() ) {

	        $the_query->the_post();
	        $custom_fields = get_post_custom(get_the_ID());

	        if (!empty($custom_fields['WEBINAR_DATE'][0])) {

	        	$html .= '<option>' . $custom_fields['WEBINAR_DATE'][0] . '</option>';
	        }

	        if (!empty($custom_fields['WEBINAR_DATE'][1])) {

	        	$html .= '<option>' . $custom_fields['WEBINAR_DATE'][1] . '</option>';
	        }
	    }
	}

	$html .='</select></p>';

	return $html;
}
?>

Notice that the name of your select would be the shortcode you will use in your Contact Form 7 message body. So, name=”your-webinar-date” would become [your-webinar-date].

contact-form-message-body

Okay, the next and final step would be to link the shortcode and add the Contact Form 7 into your template page.


<?php

wpcf7_add_shortcode('wpcf7_add_wd', 'add_webinar_to_cf7', true);
print do_shortcode('[contact-form-7 404 "Not Found"]');
?>

And here is how our submit form looks like with the custom field select dropdown.

contact-form


Minimal WordPress Theme

You can download the Minimal WordPress Theme for FREE here and see a demo here.


About the theme

Short Description : Minimal WordPress theme is based on the Minimal GitHub theme created by Steve Smith @orderedlist.

Tags : minimal, clean, 2 columns, fixed sidebar, shortcodes, responsive


Screenshots


Features and usage

More details about features and usage would be added soon!


Shortcodes

Here you can see all the ‘shortcodes’ defined in the Minimal WP theme.


[heading2]GitHub Flavored Markdown[/heading2]

[italic]View the [link url="http://github.github.com/github-flavored-markdown/sample_content.html"]source of this content[/link].[/italic]

Let's get the whole "linebreak" thing out of the way. The next paragraph contains two phrases separated by a single newline character:

Roses are red
Violets are blue

Oh, and one thing I cannot stand is the mangling of words with multiple underscores in them like perform_complicated_task or do_this_and_do_that_and_another_thing.

Roses are [italic]emphasized[/italic]
Violets are [bold]strong[/bold]

[heading2]A bit of the GitHub spice[/heading2]

[heading3]In addition to the changes in the previous section, certain references are auto-linked:[/heading3]

[unordered-list]
[list]SHA: be6a8cc[/list]
[list]User@SHA ref: mojombo@be6a8cc[/list]
[list]User/Project@SHA: mojombo/god@be6a8cc[/list]
[list]#Num: #1[/list]
[list]User/#Num: mojombo#1[/list]
[list]User/Project#Num: mojombo/god#1[/list]
[/unordered-list]

[heading3]These are dangerous goodies though, and we need to make sure email addresses don't get mangled:[/heading3]

My email addy is [email url="tom@github.com"]tom@github.com[/email].

[heading2]Math is hard, let's go shopping[/heading2]

In first grade I learned that 5 > 3 and 2  2 -> 3. 9 <- 8 <- 7.

Triangles man! a^2 + b^2 = c^2

[highlight]
        [pre]
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html[/pre]
[/highlight]

[heading2]We all like making lists[/heading2]

The above header should be an H2 tag. Now, for a list of fruits:

[unordered-list][list]Red Apples[/list][list]Purple Grapes[/list][list]Green Kiwifruits[/list][/unordered-list]

Let's get crazy:

[ordered-list][list]This is a list item with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.

Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. Donec sit amet nisl. Aliquam semper ipsum sit amet velit.[/list][list]Suspendisse id sem consectetuer libero luctus adipiscing.[/list][/ordered-list]

What about some code [bold]in[bold] a list? That's insane, right?

[ordered-list]
[list]In Ruby you can map like this:
[pre]['a', 'b'].map { |x| x.uppercase }[/pre]
[/list]
[list]In Rails, you can do a shortcut:
[pre]['a', 'b'].map(&:uppercase)[/pre]
[/list]
[/ordered-list]

Some people seem to like definition lists

[definition-list]
[dt]Lower cost[/dt]
[dd]The new version of this product costs significantly less than the previous one![/dd]
[dt]Easier to use[/dt]
[dd]We've changed the product so that it's much easier to use![/dd]
[/definition-list]

Maybe you want to print [code]robot[/code] to the console 1000 times. Why not?

[pre]
[code]def robot_invasion
  puts("robot " * 1000)
end
[/code][/pre]

You see, that was formatted as code because it's been indented by four spaces.

How about we throw some angle braces and ampersands in there?

[pre]
[code]<div class="footer">
    © 2004 Foo Corporation
</div>
[/code][/pre]

[heading2]Set in stone[/heading2]

Preformatted blocks are useful for ASCII art:

[pre]
             ,-. 
    ,     ,-.   ,-. 
   /    (   )-(   ) 
    |  ,.>-(   )-< 
    |,' (   )-(   ) 
     Y ___`-'   `-' 
     |/__/   `-' 
     | 
     | 
     |    -hrr- 
  ___|_____________ 
[/pre]

[heading2]Playing the blame game[/heading2]

[heading3]If you need to blame someone, the best way to do so is by quoting them:[/heading3]

[quote]I, at any rate, am convinced that He does not throw dice.[/quote]

Or perhaps someone a little less eloquent:

[blockquote]I wish you'd have given me this written question ahead of time so I could plan for it... I'm sure something will pop into my head here in the midst of this press conference, with all the pressure of trying to come up with answer, but it hadn't yet...

I don't want to sound like I have made no mistakes. I'm confident I have. I just haven't - you just put me under the spot here, and maybe I'm not as quick on my feet as I should be in coming up with one.[/blockquote]

[heading2]Table for two[/heading2]

<table>
  <tr>
    <th>ID</th><th>Name</th><th>Rank</th>
  </tr>
  <tr>
    <td>1</td><td>Tom Preston-Werner</td><td>Awesome</td>
  </tr>
  <tr>
    <td>2</td><td>Albert Einstein</td><td>Nearly as awesome</td>
  </tr>
</table>

[heading2]Play by the rules[/heading2]

Let's not forget the horizontal rule

[horizontal-line]

[heading2]Crazy linking action[/heading2]

I get 10 times more traffic from [link url="http://google.com"]Google[/link] than from
[link url="http://yahoo.com"]Yahoo[/link] or [link url="http://msn.com"]MSN[/link].

[heading2]Headlines[/heading2]

[heading1]Headline 1[/heading1]

Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus.

[heading2]Headline 2[/heading2]

Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus.

[heading3]Headline 3[/heading3]

Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus.

[heading4]Headline 4[/heading4]

Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus.

[heading5]Headline 5[/heading5]

Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus.

[heading6]Headline 6[/heading6]

Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus.

Launched Our New Fluid & Responsive Design

We have launched our new web design and we are very proud of the final result (still working on some IE issues but we will get there). We tried to keep it simple, easy to navigate and with a lot of useful content. We put a lot of time and efforts to make this site a pleasant and somehow informative experience, about who we are and how we work.

We used HTML5 and CSS3 to code the front-end of the site with little touches of jQuery framework. The layout is fluid and responsive and it looks well on mobile devices and tablets (we have IE version that has fixed width). The two main fonts, PT Sans Narrow and PT Serif, are from the Google font repository and fit very well with the layout. Also we have used some “awesome” FontAwesome icons. The back-end of the site is using WordPress (of course) with some useful plugins that increase our site performance and SEO.

We have a new logo with the letter “C” and a great mascot called the “Choppr Professor”.

We have transferred our blog from the blog.thechoppr.com to the main domain. This way our visitors have everything in one place. Also, we have put together an extensive FAQ page where new as well as existing clients can find some answers to the most popular questions we were asked over the time.

All pages are validated using the W3C validator (HTML5), e.g. Choppr Home.

What’s next?

Currently, we are working on our state-of-the-art project management system and plan to launch it for use in the first week of August. Looking for few beta testers so if you are interested please get in touch with us.

Next steps will be to update the blog portfolio category with some of our most recent projects and add some more posts and freebies about HTML5/CSS3 and wed development in general.

So if you want to stay in touch – use our contact form or follow us on twitter.

Thanks for visiting and come back soon!

Regards,
Choppr Team


Add Box Inset Shadow to Top, Left and Right Side

Here is the code on how to add box inset shadow to the top, left and right side of your container.


#block {
    background: #fff;
    -webkit-box-shadow: inset 6px 6px 6px -6px  #888888, inset 0 3px 6px  #888888;
    -moz-box-shadow: inset 6px 6px 6px -6px  #888888, inset 0 3px 6px  #888888;
    box-shadow: inset 6px 6px 6px -6px  #888888, inset 0 3px 6px  #888888; 
    padding: 25px;
}