Author Archive for Sridhar Katakam

How To Fix Blurriness And Sizing Of the 3 Images In Wpmudev’s Showcase Theme

Before:

Screen Shot 2013-06-13 at 7.15.23 PM

After:

Screen Shot 2013-06-13 at 7.14.54 PM

Follow these steps:

1) Copy showcase-child directory from inside showcase/themes to wp-content/themes directory and activate it. Go to Appearance -> Menus and set your desired Primary menu.

2) Create functions.php in showcase-child directory and paste this code:

<?php

add_image_size('index-thumbnail', 298, 244, true);

3) Copy showcase/loop.php to showcase-child/loop.php and edit it.

Replace

<?php the_post_thumbnail(); ?>

with

<?php the_post_thumbnail('index-thumb'); ?>

That’s it.

Refresh your site’s homepage and you should see clearer and correctly sized featured images. If not, regenerate thumbnails.

Forum topic.

How To Generate a Properly Formatted Resume In PDF Format From Your Linkedin Profile

Editing Sridhar Katakam Resume | Resume Builder 2013-05-10 15-47-12

I wanted my resume in PDF format and went to Linkedin’s Resume Builder only to realize that it strips out spaces between paragraphs.

What I have:

Screen Shot 2013-05-09 at 6.52.37 PM

What I get:

Screen Shot 2013-05-09 at 6.52.59 PM

Not only are spaces between paragraphs missing in preview, they do not appear in the generated PDF after clicking on “PDF/Print” as well.

I tried all sort of possible workarounds like wrapping text in paragraph elements, inserting HTML line breaks, inserting &nbsp; but with no luck.

I went to Resume Builder’s Feedback site and saw that this is a known issue with no solution.

With a little out of the box thinking (if I may say so myself) I was able to generate a nicely formatted PDF by essentially copy/pasting the preview content as a .html file on my local computer and making changes in it using CSS. Another benefit of this method is that we can add any other needed info (assuming you are comfortable with HTML) like References which Linkedin does not have a field for.

Below are the steps. Note that I did not test this on a PC. Should be more or less the same.

1. Create a .html file named say resume.html anywhere on your computer.

2. Edit it a good editor like Sublime Text and paste the following in:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>My Resume</title>
</head>
<body>
	
</body>
</html>

3. View the HTML source of your resume in Linkedin’s Resume Builder.

a) Copy the call to all.css file right beneath the title tag. Paste it above closing head tag.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>My Resume</title>
	<link href="http://resume.linkedinlabs.com/stylesheets/all.css?1352796666" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
	
</body>
</html>

b) Copy the call to your chosen template file in the HTML source, for example,

<link href="http://resume.linkedinlabs.com/stylesheets/templates/clean.css?1352796667" media="all" rel="stylesheet" type="text/css" class="resume-style" />

and paste it in resume.html below the earlier line.

so far we’ve got:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>My Resume</title>
	<link href="http://resume.linkedinlabs.com/stylesheets/all.css?1352796666" media="all" rel="stylesheet" type="text/css" />
	<link href="http://resume.linkedinlabs.com/stylesheets/templates/clean.css?1352796667" media="all" rel="stylesheet" type="text/css" class="resume-style" />
</head>
<body>
	
</body>
</html>

4. Using Firebug, inspect any unwanted sections like CERTIFICATIONS, LANGUAGES and delete them in Firebug.

2013-05-10_15-28-01

Inspect the main resume area and we can see that it’s a div having a id of resume.

2013-05-10_15-19-50

Right click on the div line and copy its HTML.

2013-05-10_15-20-13

Paste this between opening and closing body tags in resume.html.

2013-05-10_15-22-42

5. Add the following above closing head tag:

<style type="text/css">
	p {
		margin-bottom: 1em;
	}
</style>

2013-05-10_15-58-41

6. Now view resume.html in a browser and you should see your Linkedin profile appear in a neat format.

7. [Optional] If you would like to get rid of the drop shadow (when using Clean template) for a ultra clean look and reduce the space above and below the resume, add the following in your custom style block:

#resume {
box-shadow: none;
padding-top: 20px;
padding-bottom: 20px;
}

8. In order to now save this resume in pdf format, open the html file in Safari. I tried it in Firefox and the result was not good.

Hit Cmd + P to bring up the Print dialog. Click Show Details. Tick Print backgrounds. Deselect Print headers and footers. Click PDF -> Save as PDF.

2013-05-10_15-40-09

That’s it!

I recorded a screencast about the same and it can be watched below. Please excuse the audio quality. I hope to make it better in my upcoming videos. You might want to watch the video in HD for better clarity.

If you would like to take a look at the PDF output, click here to download it.

How To Get Started With WordPress

I get often asked as to how to get started with making a living in the field of WordPress. In this article I am going to provide links to resources (mostly videos – all free) that are prerequisites if you want to master WordPress.

Stage 1: Learn HTML and CSS

WebDesign.com 2013-05-10 10-52-27

Watch the videos by WebDesign.com here: http://webdesign.com/free/htmlcss

Stage 2: Learn basics of WordPress

WordPress 101 | iThemes 2013-05-10 10-57-54

Watch the videos by iThemes.com here: http://ithemes.com/tutorial/category/wordpress-101/

Stage 3: Learn about WordPress web design and development

Web Developer Training | iThemes 2013-05-10 10-56-42

Watch the videos by iThemes.com here: http://ithemes.com/tutorial/category/web-developer-training/

Stage 4: Learn basics of PHP

In the Woods – Diving into PHP: Video Series 2013-05-10 11-04-36

Watch Diving into PHP video series here: http://blog.themeforest.net/screencasts/diving-into-php-video-series/

Note: You do not need to memorize or take-in everything shown in the above PHP course. Just watch all the videos once to get a understanding and overall idea of how PHP works.

Stage 5: Learn how to customize WordPress themes

Wordpress Theme Development Training Wheels | Wptuts+ 2013-05-10 11-06-23

Go through WordPress Theme Development Training Wheels

The ThemeShaper WordPress Theme Tutorial: 2nd Edition | ThemeShaper 2013-05-10 11-08-27

Read The ThemeShaper WordPress Theme Tutorial: 2nd Edition

Also noteworthy: A Guide To The Options For WordPress Theme Development

Stage 6: Improve your troubleshooting skills by solving WordPress problems

WordPress › Support 2013-05-10 11-10-13

Create a account at http://wordpress.org/ and start helping others (and yourself, actually) by answering the questions asked at http://wordpress.org/support/, especially in “How-To and Troubleshooting” and “Themes and Templates” sections.

If you have followed and done all the above diligently, you should now be at a stage where you can take up theme customization jobs. So the next thing to do is

Stage 7: Take up WordPress jobs

WordPress Jobs 2013-05-10 11-11-07

Head on over to http://jobs.wordpress.net/ and start sending those emails!

Stage 8: Pick a theme or two and become a master

The Exhaustive ManageWP Guide to WordPress Theme Frameworks 2013-05-10 11-12-09

The next stage would be to able to re-create any existing website in WordPress. For this you can either do it from scratch or be smart and use a theme framework. Personally I chose iThemes Builder. Whichever framework(s) you end up choosing, become very good at it. You should be able to

  1. make any design changes in the theme (or the child theme)
  2. take a PSD and convert that to a WordPress site using the framework
  3. re-do a existing site in WordPress using the framework

Stage 9: Start your blog/portfolio site

You need to have at least 1 website of your own where you write about what you learn, share your code snippets and essentially establish yourself as a authority or someone with enough knowledge to inspire confidence in your potential clients to give you work.

If you want an example, check out my BuilderSnippets.com.

Stage 10: Create Plugins

WordPress Plugin Development from Scratch, Part 1:4: Basic Structure 2013-05-10 11-13-12

Once you are comfortable with theme aspect of WordPress, it’s time to be able to create plugins from scratch.

Read WordPress Plugin Development from Scratch

I have not yet reached this stage and am still doing reasonably good financially (at least when compared with a standard IT job in India) just with the knowledge of everything above this stage.

Stage 11: You tell me!

By this time you will be knowing what you are going to do. It could be

  • Offering WordPress web design and development services to clients
  • Your own theme and plugins shop
  • Gathering a team to outsource to and managing everything
  • Setting up a membership site where you offer some WordPress related products or services to clients
  • or something else that no one has come up with so far.

That’s it. If all the above seems like a lot of work, perhaps it is especially if you have never touched HTML or CSS. But note that it is just a matter of spending time, absorbing things and putting it to practice. Luck comes only to those who put in the hard work. So what are you waiting for? Get started today!

Using LoopBuddy To Show a Page’s Featured Image In a Widget

Output:

Screen Shot 2013-04-04 at 2.23.17 PM

1)

LoopBuddy Query Editor ‹ iThemes Builder Test Site — WordPress

2)

Edit Page ‹ iThemes Builder Test Site — WordPress

3)

In Fondation Blank’s functions.php:

add_image_size('front-page-thumbnail', 281, 179, true);

add_theme_support( 'builder-full-width-modules' );

4)

LoopBuddy Layout Editor ‹ iThemes Builder Test Site — WordPress

Screen Shot 2013-04-04 at 2.11.40 PM

Screen Shot 2013-04-04 at 2.11.50 PM

5)

Widgets   Default ‹ iThemes Builder Test Site — WordPress

6)

Add the following at the end of child theme’s style.css (WP dashboard -> Appearance -> Editor):

#builder-module-514372ec66190 .widget {
 background: none;
 position: relative;
 padding: 5px;
 margin-left: 3%;
}

img.attachment-front-page-thumbnail {
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 background: url("http://f.cl.ly/items/242h172S0V200R2w223i/Image%202013.04.04%202:24:49%20PM.png");
 border: 1px solid #DDD;
}

/*#builder-module-514372ec66190 h4.widget-title,*/
.widget-image-title {
 font-family: 'Open Sans', sans-serif;
 background: #65B573 url("http://f.cl.ly/items/1x3T0O1x1t2u22133d2v/Image%202013.04.04%202:25:43%20PM.png");
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.24);
 color: #FFF;
 text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
 position: absolute;
 bottom: 18%;
 font-size: 1.1em;
 line-height: 1.2em;
 left: -1px;
 max-width: 70%;
 padding: 11px 13px 11px 23px;
 margin: 0 !important;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
}

.builder-module-sidebar .widget .widget-image-title a {
 color: #FFF;
 font-weight: bold;
}

#builder-module-514372ec66190-outer-wrapper,
#builder-module-514372ec66190,
#builder-module-514372ec66190 .builder-module-block-outer-wrapper {
 overflow: visible !important;
}

How To Set Up a Custom Date Field And Order Posts By This Field’s Value

In one of the recent WordPress customization tasks I took up, the requirement was for the user to be able to enter a date in the format of yyyymmdd (Ex.: 18760310) which should appear below the post titles as: “Friday, Mar 10th, 1876” plus the posts on the /blog page to be automatically sorted by this date value.

Here’s how I did it.

1) Installed and activated Advanced Custom Fields plugin.

2) Set up the date field (Field Type: Text) in ACF.

2013-03-04 18-11-39

Here is what I entered in ‘Field Instructions’:

Enter date in this format: <strong><span style="color: red;">YYYY</span><span style="color: green;">MM</span><span style="color: blue;">DD</span></strong>

3) Edited Posts and added the custom date field’s values like this: 18760310

2013-03-04 17-49-45

4) Edited theme template files like single.php, index.php and archive.php and used this code wherever the custom date should be displayed:

<?php
	$ref_date = get_field('referendum_date'); 

	if ( !empty($ref_date) ) { echo '<div class="referendum-date"> Referendum Date: ' . date("l, M jS, Y", strtotime("$ref_date")) . '</div>' ; }
?>

to get

2013-03-04 17-54-45

5) To sort the posts by this field’s value in ascending order, added the following above the loop in index.php:

<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("order=asc&orderby=meta_value&meta_key=referendum_date&paged=$paged"); ?>

Note: Posts with nothing entered for custom date field will not appear on the Posts page.

How To Show a Custom Field’s Value At the Top Of Every Post Or Page In Genesis

A user on Genesis forum wanted to know a way to have a video whose embed code has been entered in a meta box of a Post/Page to show above that Post/Page’s content.

1) Install Advanced Custom Fields plugin.

2) Set up a Custom Field that you wish to show in Post/Page edit screen.

2013-02-21 14-16-47

Ensure that Formatting of the field is set to “HTML”.

3) Add/edit a Post/Page and enter the embed code of video that you wish to show above the content of that Post/Page.

2013-02-21 14-18-47

4) Install Genesis Simple Hooks plugin.

5) Paste the following in “genesis_before_content_sidebar_wrap” Hook:

<?php if( is_single() || is_page() ) {
if(get_field('vimeo_video')) {
	echo '<div class="video-container my-vimeo-video">' . get_field('vimeo_video') . '</div>';
}
} ?>

Tick “Execute PHP on this hook?”

6) Check the Post/Page on the front-end and add any CSS that’s required to space out the video depending on active child theme.

Ex. in Modern Portfolio theme:

.my-vimeo-video {
	margin-bottom: 2em;
}

#inner {
	padding-top: 1rem;
}

to get

2013-02-21 14-27-45

To make the video stretch fully, we can use

.my-vimeo-video iframe {
	width: 100%;
}

2013-02-21 14-29-59

Resize the browser to see if it is behaving in a responsive manner or not. If it is not, use this CSS or FitVids jQuery script.