List of Best Wordpress Bootstrap 3 Themes

Posted by & filed under Code.

A list of Bootstrap 3 WordPress Themes

I’ll admit it, I’m a bit obsessed with the new Bootstrap 3 framework – especially incorporating Bootstrap 3 with WordPress. So, I’ve compiled a list: the best, and at this point, the only Bootstrap 3 themes available for WordPress.

My favorite Bootstrap WordPress 3 Theme so far: Magfolio – WP WooCommerce Portfolio Blog Theme

The List of Bootstrap 3 Themes for WordPress

The list below will continue growing over time as I will guarantee you more developers will begin to use Bootstrap 3 with WordPress.

Do you have themes to contribute?

Please leave comments with links to Bootstrap 3 themes for WordPress below and I will add them to the list!

Top Ten Advertising Agencies in Philadelphia

Posted by & filed under Career.

What are the best Advertising Agencies in Philadelphia?

As someone who is interested in everything from graphic design to marketing, branding and advertising, I am always excited to hear what is happening at the agencies in Philadelphia. There is some great creative work coming out of Philadelphia and it was pretty difficult narrowing my top ten agencies down to only 10. I must admit, I am partial to 160over90, as I was an intern there some years ago.

Top 10 Advertising Agencies in Philadelphia

# Agency Address Why?
1 160over90 1 S Broad St # 10
Philadelphia, PA
Great clients and fun times! JOB-A-THONS
2 Red Tettemer O’Connell + Partners 1 S Broad St # 24
Philadelphia, PA
First ever Philadelphia ad agency to create a Super Bowl ad
3 Brownstein Group 215 South Broad Street
Philadelphia, PA
Local, national and international clients such as IKEA, Beneficial Bank, Comcast, Microsoft, Saint-Gobain North America, AmerisourceBergen
4 allen & gerritsen 1619 Walnut St. Philadelphia, PA When two become one: Allen & Gerritsen in Boston, which was founded in 1985, and the Neiman Group in Philadelphia, which began in Harrisburg, Pa., in 1980.
5 Razorfish 100 Penn Square East, 4th Floor South
Philadelphia, PA
Razorfish has been doing interactive work for about 15 years. When everyone else started moving to digital, they were right there to greet them.
6 Tierney 200 South Broad Street
Philadelphia, PA
At the 2013 Philadelphia ADDY awards, Tierney cleaned up with 15.
7 Levlane 100 S Penn Square
Philadelphia, PA
Clients include the prestigious likes of Rothman Institute, Kennedy Health Systems, Beneficial Bank, Philadelphia Horticultural Society, Philabundance, Philadelphia Recycling Organization, Taco Bell and KFC
8 Digitas Health 100 E Penn Square, Philadelphia, PA Because Publicis Healthcare
9 D4 Creative Group 4646 Umbria St, Philadelphia, PA Full Service Advertising Agency. All in-house work.
10 Quaker City Mercantile Sansom St, Philadelphia, PA Unlike the rest! Quaker City Mercantile is a hybrid of 19th century mercantilism and 21st century brand artistry. We create brands from the ground up and bring them to market. This includes all aspects of manufacturing, distribution and marketing.
Responsive AdSense

Posted by & filed under Code.

Using Google AdSense Responsive Design and responsive Ads with CSS @media queries

I’ll be honest, I’m not one to use Google AdSense on a personal website/blog, but since I’ve been using Bootstrap 3 for WordPress I wanted to try out Google’s responsive AdSense unit.

Using Bootstrap 3 with Google AdSense

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. Using Bootstrap 3 media queries we can render different AdSense unit sizes with css. Check out the example below for the code used to render different units in this post:

<style>
.programmers { width: 300px; height: 250px; }
/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 300px) { .programmers { width: 125px; height: 125px; } }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 600px) { .programmers { width: 200px; height: 200px; } }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 800px) { .programmers { width: 300px; height: 250px; margin:0 auto; }
}
</style>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Programmers -->
<ins class="adsbygoogle programmers"
     style="display:inline-block"
     data-ad-client="ca-pub-2640177500618682"
     data-ad-slot="1532157931"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

And the adsense ad here:

To change which size ad unit shows for each media query, you would swap out the sizes I’ve listed above with one of Google’s adsense units – and you should probably use one of their top performing ad sizes.

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 800px) { .programmers { width: 300px; height: 250px; margin:0 auto; }
}

Below you can see I changed width: 300px; height:250px; to width: 468px; height: 60px;

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 800px) { .programmers { width: 468px; height: 60px; margin:0 auto; }
}

Top Performing ad sizes for adsense
300×250
336×280
728×90
160×600
320×50
468×60
234×60
120×600
120×240
300×600
970×90
250×250
200×200
180×150
125×125

A note on inserting code into individual posts on WordPress

I was unsure how to go about adding a single ad unit to a post on WordPress and then I found WP Simple Adsense Insertion which made it easy to insert my Bootstrap responsive adsense code into any individual post.

Digital Marketing Certificate

Posted by & filed under Career.

Internet Beware

My Digital Marketing Certificate from Rutgers CMD arrived in the mail. I’m pretty excited about receiving my official certificate, it means I’m a genuine certified internet professional.

What did I learn?

The nine-module certificate program spanning 10 weeks taught by a team of top industry experts covered digital marketing topics like Website Design and SEO, Digital Marketing Strategy, Social Media Marketing, Mobile Marketing, B2B Marketing Innovation, Security and Privatization Issues with Digital Marketing, Video Marketing, Web Analytics, Conversion and ROI, Online PR Strategies and Integrating Digital Marketing.

A good way to keep up with the times

While I was no spring chicken to internet marketing before, this course definitely helped me brush up on some marketing strategies and learn a few new tricks. I’m excited about the future of digital marketing and how it could lead to a more meaningful customer engagement.

What now?

I am looking for ways to flex my digital marketing muscles…if you’re looking for a social media marketing manager, digital media expert, social media strategist or similar positions in Philadelphia please feel free to reach out!

Download the presentation

If you’re interested in viewing my capstone project you can download it here:

Coca-Cola Digital Marketing Presentation

Bootstrap 3 for Wordpress Theme

Posted by & filed under Code.

Bootstrap 3 for WordPress?

I recently redesigned my website to utilize the newly released Twitter Bootstrap 3. I’ve always been a fan of responsive design and the release of Bootstrap 3 inspired me to redesign johntransue.net. Previously, I had designed my website using Bootstrap 2, however it was a static site using HTML and I really wanted to incorporate WordPress in my new web design.

The problem:

I wanted to use Bootstrap 3 and WordPress together, however, being that Bootstrap 3 is newly released there aren’t any templates that use Bootstrap 3 for WordPress. Luckily, I found the theme by 320press that utilized Bootstrap 2 and figured I could migrate the code to Bootstrap 3.

The solution:

I created a child theme for 320press: Bootstrap 3 for WordPress. If you’re interested in downloading a copy of the child theme Bootstrap 3 for WordPress, see below to download a copy.

Download Bootstrap 3 for WordPress theme v1

Download Bootstrap 3 for WordPress theme v2

Keep in mind, I will be updating the theme regularly.

You will also need to download the Parent theme from 320press.com

Other WordPress themes using Bootstrap 3

Maximus from Themeforest

As of today there aren’t many themes using the Bootstrap 3 framework for WordPress. The only themes I can find for purchase on Themeforest are: News Grid, Room Cartoons and Dance RoeDok Responsive theme from WooCommerce which use the Bootstrap 3 framework.

I’ve created another post with more themes here: http://johntransue.net/best-bootstrap-3-wordpress-themes/