Tutorials

0
Building a Custom Page Template for Your Blog Dexterously

Whether you are running a website that invites users to read latest news and updates across different verticals like politics, movies, sports, etc, or you own a website that advertises you as a service provider, it would give your website a reasonable push if you create a separate blog site on the same URL. You can use that blog to publish your views, or articles that are atypical of standard blogs. If you play to the gallery by writing opinionated articles around the different theme your website caters to, you are set to see a jump in the number of visitors to your site.

However, building a custom blog section on the website involves an arrangement that is easy to create using PHP. The experts would recommend you create a custom page template while the process of building a blog section is being carried out. What this does is that it lends you a capability to define a desired page location that looks like myownoyster/blog. What’s more? You can even choose the title of your choice and display a short description on the topmost part of the page. Here is how you do it:

Reproduce the contents of index.php in the tpl_blog.php file

The first step in the process is opening the index.php file of the theme you are currently working on and copying its content in the new file created by the name of tpl_blog.php. You carry out this copy-paste task in order to make sure that theme functions and HTML structure are not lost in the way. It maintains the consistency of the files and helps carry their functions forward. This will also enable you to build a page template which can be accessed from a dropdown menu.

Make Page Template Readable for WordPress

The traditional practice of adding comments to code is used everywhere for the functions to become more comprehensible. WordPress is no different.

/*
New Template: My Blog
*/

Hence, for the new file you just created (tpl_blog.php), append a comment to the file that tells WordPress that you are creating a custom template.

Use Custom Query for Posts

Now paste the below code right below the location where the get_header() template tag is mentioned:

<?php query_posts('post_type=post&post_status=publish&posts_per_page=10&paged='. get_query_var('paged')); ?>

This performs the overriding function on the existing page query by replacing it with a query that calls for 10 numbered blog posts. This process saves considerable time as the query_posts() function ensures that WP_Query doesn’t have to be called when there is a need to save the custom query.

Add Navigational Links for Pagination

In your code, between the endwhile; and endif; functions, add this code for pagination:

<div>
<span><?php previous_posts_link(__('« fresh','demo')) ?></span> <span><?php next_posts_link(__('previous »','demo')) ?></span>
</div><!-- /.navigation -->

This should be between the endwhile; and endif; sections of code in your theme.

The Reset Process

Now that you have successfully implemented the afore-mentioned steps, next in the line is using wp_reset_query() in order to retune the results that emerged by the usage of query_posts(). This takes the current query back to its original state.

Nailing it

Following is how the full page template would look like after combining additional markup with preceding procedures:

<?php get_header(); ?>
<div id="content">
<?php query_posts('post_type=post&post_status=publish&posts_per_page=10&paged='. get_query_var('paged')); ?>
<?php if( have_posts() ): ?>
<?php while( have_posts() ): the_post(); ?>
<div id="post-<?php get_the_ID(); ?>" <?php post_class(); ?>>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(200,220) ); ?></a>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<span><strong><?php the_time('F jS, Y'); ?></strong> / <strong><?php the_author_link(); ?></strong> / <span><?php comments_popup_link(__('0 comments','demo'),__('1 comment','demo'),__('% comments','demo')); ?></span></span>
<?php the_excerpt(__('Continue reading »','demo')); ?>
</div><!-- /#post-<?php get_the_ID(); ?> -->
<?php endwhile; ?>
<div>
<span><?php previous_posts_link(__('« fresh','demo')) ?></span> <span><?php next_posts_link(__('previous »','demo')) ?></span>
</div><!-- /.navigation -->
<?php else: ?>
<div id="post-404">
<p><?php _e('None found.','demo'); ?></p>
</div><!-- /#post-404 -->
<?php endif; wp_reset_query(); ?>
</div><!-- /#content -->
<?php get_footer() ?>

Now that your custom page template is ready (thanks to an elaborative yet simple method), go ahead and work your way around it.

0
Hide Category from homepage wordpress

In this tutorial I will show you the proper steps to hide certain category posts from appearing on your homepage, index page, or blog roll. If you own a blog and you want to keep posts of a certain category from showing up on your homepage blogroll, but still want them to appear on your website somewhere else, this tutorial will show you how to remove those posts from showing up in the blogroll or homepage.

Before I begin, you are responsible for your own edits to your website, I am not liable for any issues that may come of you doing this. In doing this tutorial it is at your own risk and I am not responsible if you screw something up. This code has worked for me on multiple WordPress websites. If you are a beginner and/or have no coding experience I do not recommend that you do this yourself. With that said, let’s begin…

Step 1

The first step is to navigate to your theme folder, find your index.php file (or which ever file you want to hide the category from appearing), and open it in your text editor.

WordPress index.php

Step 2

Once you have it open in your text editor, locate the start of the loop. It may look different depending on what theme you have and depending on who coded the theme. Below I have 2 different examples pictured, the highlighted area is the loop.

Ex 1)

WordPress Loop

Ex 2)

The WordPress Loop

Step 3

Once you have successfully located The Loop, make a few lines of space above it so there is room for the “hide category” code snippet.

Now that you have made some space, you will need to copy the code below and paste it right above The Loop.

<?php query_posts($query_string . '&cat='); ?>

It should then look like the picture below, the code snippet right above the loop.

Hide Category Code Snippet

Step 4

You’re not done yet, now you will need to tell WordPress which categories you want it to hide from the index page. Once you decide which categories you want hidden from the index.php page, you will need to find the ID of the category(s). To do this, navigate to the categories page in the WordPress admin.

Category Menu WordPress Admin

Once you get there, click the category link you want hidden and view the link info in your browser status bar. It should look something like this: edit&taxonomy=category&tag_ID=5&post_type=post

Where it says ID=5 (or another number), that is your category ID. In this case, the category ID is 5.

Step 5

Now that we have the category ID, we need to plug that into our snippet we inserted earlier. Since we are wanting to hide it from the homepage, we need to add a minus sign in front of the ID number like so:

<?php query_posts($query_string . '&cat=-5'); ?>

Make sure the number is inside the end single quote mark. That’s it, everything should work properly and your category should no longer display on your index.php page. If you have errors or issues, be sure to look over your code carefully to ensure it is correct.

Hiding Multiple Categories

If you want to hide more than one category, just add a coma after each category ID like so:

<?php query_posts($query_string . '&cat=-5, -45, -9'); ?>

If you have any questions please comment them below and I will help you as best I can.

0
Beginners Guide to Setting up a Business Google+ Page

Google Plus is one of Google’s crowning achievements. It allows individuals, businesses, and brands to identify themselves upon a social network that is integrated directly into the Google search engine.

When used properly, it can increase the number of visits a website receives from normal search engine users and foster an elevated social status much like most businesses wish to achieve with other popular social networks. This means more fans, a more diverse audience and more brand loyalty for you.

What is Google Plus?

Google Plus has commonly been referred to as a “social layer” instead of a social network. There are two distinct ways that Google Plus works:

  • It is a social network. There is a feed for profiles where posts can be sent, commented on and “Plus’d”. The main thing that makes Google Plus different as a network is that you can create different groups of people known as “Circles”. This allows you to keep a different set of contacts when there are certain things that are only appropriate for certain groups.
  • It is a search engine component. Google has incorporated content from Google Plus users in several unique ways. The most important ways for businesses include the appearance of author and Google Plus content in search results, “Pluses” that can be applied on a search result, and the integration of Google Plus content with things such as Google Place reviews.

Why Should Businesses Use Google Plus?

The main draw of Google Plus is its ability to become tied in with the Google search engine. When personal results are enabled, the following things can happen:

  • Users can see feedback from other users in their circles. This can include “Pluses” on search results, Google Place reviews, shared posts and authored content.
  • Users can find more reliable material faster. Because Google Plus makes it a point to allow users to endorse content with their Google Plus accounts, users can quickly find results that have been supported by “social proof”.
  • Hangouts can be used for product promotion. A Google Hangout works like a live video conference where multiple people can conduct a conference at one time. Businesses can invite important leaders in the industry for interviews and regular customers to share their thoughts on a product.
  • All content can be confined to Google Plus Circles. This applies to virtually any content that can be shared on Google Plus. Calender events, videos, authored content and “Plus’d” content can all be shared with specific circles. For example, this allows businesses to send different content to business partners than customers.

Creating a Google Plus Page for Your Business or Brand in 3 Steps

The first step to creating your very own Google Plus page is to first create a personal Google Plus account. You can then create your page by clicking on the “Pages” button on the menu located on the left side of the Google Plus homepage. (see image below)

Add Google+ Business Page

You then need to choose a category that best defines your business. If your business has a local physical store, then you should probably select the “local business or store” option to allow your Plus page to show up as a local business. You should enter your details, which includes your business’s phone number, address, external website and any other contact information your potential audience might need to know. This is also used to validate your page so make sure it is correct and you have access to it.

Google+ Page Category Selection

The last step to creating your Plus page involves customizing it. You need to inform your followers and customers about your business by filling out the “About” and “Contact” details, as well as any other pertinent information boxes. You then need to customize your Google Plus page to make it visually appealing. Add branding, photographs and a personal touch that allows your audience to really connect with your business.

Keep in mind that the most important part of successfully using Google Plus to promote your business revolves around getting in touch with your users. Appeal to them and show them content that they want to see by utilizing Google Circles in the content you create on Google Plus.

1
Give Designing a Different Dimension Using Adobe After Effects

With the advancement in technology, one has to look for the most updated software in order to compete against the global giants in the business world. There are numerous options available when it comes to designing, but you have to look for the best ones in order to create a unique design and gain a competitive edge over others. If you are able to create the best design, you will be able to attract more visitors and will be able to convert them into your clients.

However, most people don’t look to spend much on designing and end up suffering losses in their business. In order to avoid that situation you have to look for innovative ways to create a masterpiece so that your business doesn’t suffer.

Designing has become extremely important these days and if you focus on it, you can really move forward at a good pace. You will find plenty of conventional designs all over the internet, some of which don’t catch your attention at all. In order to give a new look to your webpage, you need to buy a software like the Adobe After Effects, which really comes in handy and gives your business a professional look. It is not easy to use this software though and you have to spend plenty of time in creating your desired effects.

How to Use Adobe After Effects?

Since you will need to add special effects to your design, using this software program, it will consume a lot of your time. Therefore, you will have to be patient with it and experiment with all of the cool features, which can help you in designing. Using the Adobe After Effects is not quite a difficult task, but you cannot perform it efficiently if you are a newbie. Following are the steps that need to be taken in order to make your design look better than others.

Start a New Project on the Program

Once you have successfully installed the Adobe After Effects program on your system, you will be required to create a new project in order to start your work. In order to do this, you have to click on the ‘file’ tab and then select ‘new’ followed by ‘project’.

Start a new project on Adobe After Effects

Open New Composition

The next step will be opening a new composition, for which, you will be required to right click on the project window. You will get the option of opening a new composition and will be allowed to decide the size of the project at this stage.

Open New Composition in Adobe After Effects

Import Files

Your next step would be importing new files, which have to be altered according to your requirements in order to make the design look unique. These files can be video, audio or still images. You can simply drop them onto your timeline or import them by right clicking on the project.

Import Files Adobe After Effects

Add Animations and Effects

Once you have got the files on your timeline, you can go ahead and design them in the way you like. Once you click on the ‘windows’ tab, you will find plenty of options in front of you. However, you will be required to visit the ‘special effects’ tab in order to give a new look to the design of your imported files.

Add Animations and Effects Adobe After Effects

Preview and Save

Finally, you can preview the work you have done and then save it on your system or export it directly to your webpage, giving a new dimension to it.

Similarly, you can add various effects to your work using this wonderful program and all of a sudden, your ordinary design will start looking like an exceptional one. There are plenty of cool features in the Adobe After Effects, but some of them are simply awesome and should definitely be used in order to give a new life to your designing. If you are getting your work done through a professional, he/she would be aware of what to use, but you should also take a look at some of the key features of this program.

Preview and Save on Adobe After Effects

Key Effects to Give a New Life to Your Design

Although none of the effects in the Adobe After Effects are useless ones, the following ones simply standout in helping people promote their work through designing.

Key Effects to Give a New Life to Your Design

Matte Settings

One important feature available in the Adobe After Effects is the ‘set matte’, which allows the user to strip out the background with ease. While using the program, you will first have to apply the matte settings and then set the ‘use for matte’ to luminance. In case there are some issues such as fringing, you can get them fixed through ‘remove color matting’ feature. Moreover, you can also choose your favorite color for the element by choosing the ‘fill’ option from the ‘generate’ feature.

Matte Settings Adobe After Effects

CC Light Sweep

Have you ever seen light moving across a logo or some other design in a webpage? This feature appears to be a cool one and catches the attention of the users immediately. Therefore, the Adobe After Effects provides you the option of CC light sweep, which allows you to change the look of your design completely. The usage of this feature is also an easy one. All you have to do is apply the CC light sweep effect first and then change the settings as per your needs. You can choose the shape, width, sweep intensity, edge intensity, edge thickness, light color and light reception and then save all of your settings to see the mesmerizing effect of the CC light sweep.

CC Light Sweep Adobe After Effects

Distressed Text

You don’t have to use Photoshop in order to create distressed text. That process was time consuming and did not satisfy the needs. However, the Adobe After Effects program performs this task within a few minutes with ease. From the ‘effects control’, pick up the option of ‘grunge’ followed by the ‘roughen edges’. You can further alter the settings as per your requirements and change the dimension of your design completely.

Distressed Text Adobe After Effects

CC Composite

In order to composite an effect on one layer and combine it with another, you should use the CC composite feature. This allows you to give a stylish look to the design and the users get a feeling that they are dealing with professionals. Just like all of the other features, you will be allowed to change different settings to make your design unique through the CC composite. Once you have applied the effect, you can alter the tones, midtones, highlights, blurriness and shadows in the layer.

CC Composite Adobe After Effects

Color Correction

After applying all the settings to your design in order to make it look classy, you have to check whether the color settings are according to your needs. In case you feel something missing, you can make a correction through the ‘color finesse’ feature in the Adobe After Effects program. Once you go to this feature, you will find numerous options available in front of you. All you have to do is experiment with different color combinations and save the best settings.

Color Correction Adobe After Effects

Just like all of the above mentioned features, the Adobe After Effects program allows the users to create some mind blowing designs, which can grab the attention of the visitors immediately. Buying this program is not a waste of your money and you will only find out its value once you use it. There is no doubt that this spectacular program gives designing an entirely new dimension and takes you to the next level.

2
How to add an app icon to your website

Having app icons for your website is a good thing to include these days with the amount of iPhone’s and iPad’s in the world. If you’re wondering what having an app icon for your website means then let me explain. Apple iPhone’s, iPad’s, and iPod touch devices give users the ability to add websites to their home screen (bookmarking) as if it were an app (see image below).

Enfuzed App Icon

This is great if your website does not have an app in the app store as it can be made to look like an app and acts as a quick access point for users to your website. The problem is, if you have not made app icons for your website then it will just take a shitty screen shot of your website and shrink it down to fit the app icon size.

This is not good for a number of reasons; one being, it looks like junk; two being, when a user is sliding through their apps, yours will be easily overlooked. I used Creative Bloq as an example of a site not having app icons since it’s one of the blogs I frequent.

Bookmark without an app icon

Assuming you don’t want that crummy screenshot as your icon if a user bookmarks your website, let’s get to the “how to” on adding an app icon to your website.

Creating an App Icon

The first thing you will need to do is create an app icon that is to be used for your website. We need to take into account the various apple touch resolutions and sizes when making an icon. Here are the icon sizes for the icon (in pixels) you will need to make:

*Note that these need to be in PNG format*

  • iPhone/iPod: 57×57
  • iPhone/iPod with Retina: 114×114
  • iPhone 5/iPod Touch 5th Gen: 114×114
  • iPad: 72×72
  • iPad with Retina: 144×144

You don’t need to worry about rounding the corners, Apple will do this for you, so just make square icons. You also don’t have to worry about adding the “glare” to your icon, as Apple will do this for you as well, but we will get to this later.

Now that you have all of your icons created, you’ll need to add them to your website’s directory naming them as follows so apple will recognize them:

  • iPhone/iPod: touch-icon-iphone.png
  • iPhone/iPod with Retina/iPhone 5: touch-icon-iphone-retina.png
  • iPad: touch-icon-ipad.png
  • iPad with Retina: touch-icon-ipad-retina.png

The Code

We have our app icons made in all device sizes, we’ve named them accordingly so Apple will recognize them, and we’ve added them into our website’s directory. Now we have to add the code to the head of our website. There are two ways to present your app icon to viewers:

  • The regular way – which includes the “glare” over top of the icon
  • The precomposed way – which shows the app icon as is

If you wish to show the icon “as is” (meaning just as you made it) then just add the words -precomposed after “apple-touch-icon” in your code. If you want the famous apple “glare” over your icon, then just leave the rel=”apple-touch-icon”.

Now to the easy part, just copy and paste the following code making sure the file paths are correct. We have chosen to leave our app icon “as is” which is a flat look, so we added “-precomposed” to the end of our rel:

<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="touch-icon-ipad-retina.png" />

That’s it! Now you can navigate to your website on your Apple touch device, click the add bookmark button and see your new app icon on your home screen. Please make sure all of your files are named properly, your images are in the right format, and your file paths are correct.

Test It

Here is how you can add a bookmark to see if it worked. Navigate to your website and click the middle button (pictured below) to bring up a menu.

Apple Safari Bookmark Icon

In the middle of the menu you will see your icon and under it it says “Add to Home Screen”. Click this.

Add to Homecreen Bookmark button

Next it gives you the option to name your bookmark, this will be the name that appears under your icon on your home screen.

Adding name to bookmark icon

Useful Resources:

Safari Web Content Guide – Configuring Web Apps

iOS Human Interface Guidelines – Custom Icon and Image Creation Guidelines

2
Enfuzed Twitter Card Featured

Twitter Cards are somewhat of a new thing Twitter rolled out last year which are, in a way, similar to Facebook’s Open Graph. You may have seen them before when browsing Twitter, expanding a tweet will reveal a little excerpt from an article link along with the title and a image thumbnail to go with it. Twitter Cards, though, pack a bigger punch than that of Facebook’s Open Graph. Twitter made it so that, when setting up a Twitter Card, users are able to choose the style that they want their card to appear like when posted on Twitter.

Enfuzed Design Blog Twitter Card Example

Here I will show you how to easily add a Twitter Card to a WordPress website that will have the option for each individual author on your site to use their own Twitter Handle for articles they write. The Twitter Card will display the author’s Twitter Handle on the websites Twitter Card when an article link from the website is posted on Twitter.

There are 7 different types of display modes Twitter offers that decide how content from a link posted on Twitter will be presented within the card, here is a list with descriptions below:

  • Summary Card – This is the default card, it includes title, description, thumbnail, and Twitter handle attribution.
  • Large Image Summary Card – This is the same as the regular summary card but with a larger, more predominant image above the title and description.
  • Photo Card – Somewhat similar to the large image summary card, the photo card puts a large image up front and center. Photo cards are the only cards that support a blank title.
  • Gallery Card – A gallery card is like a photo card with the difference being a gallery card allows you to display a collection of photos (it supports up to 4 different images) within a tweet. It allows you to provide credit to the photographer as well by specifying a creator tag.
  • App Card – Just like it sounds, this card allows you to showcase a mobile app which includes title, description, app icon, rating, and price of the app. This card is not widely available yet and requires special approval.
  • Player Card – This card is for steaming media such as audio and video and allows you to present your content within an iframe inside the tweet. Unlike other cards, with the player card you control what content displays inside the Twitter Card.
  • Product Card – Allows you to present products and retail items to better drive sales. This card displays an image, description, and two other fields of your choosing which could be price, list availability, list sizes, or anything else you could think of.

Now that we have the basics down of what a Twitter Card is and the different types of Twitter Cards you can implement, let’s get to the fun stuff, giving your WordPress website a Twitter Card.

First thing we will need to do is locate your WordPress website’s header.php file within your theme and open it up in a text editor. Once you have that open, locate the closing head tag:

</head>

Make proper spacing, and above the closing head tag, copy and paste the following code:

<!-- Twitter Card -->
<?php
if(is_single() || is_page()) {
$twitter_url = get_permalink();
$twitter_title = get_the_title();
$twitter_desc = get_the_excerpt();
$twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
$twitter_thumb = $twitter_thumbs[0];
if(!$twitter_thumb) {
$twitter_thumb = '<!-- Image Link Here -->';}
$twitter_name = get_the_author_meta('twitter',$post->post_author);?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>"/>
<meta name="twitter:title" value="<?php echo $twitter_title; ?>"/>
<meta name="twitter:description" value="<?php echo $twitter_desc; ?>"/>
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>"/>
<meta name="twitter:site" value="@<?php echo $twitter_name; ?>"/>
<?php if($twitter_name) { ?>
<meta name="twitter:creator" value="@<?php echo $twitter_name; ?>"/>
<?php } } ?>
<!-- End Twitter Card -->

Be sure to read the comments in the above code. You will have to insert an image link on line 10 where the comment tag is as well as specify the type of twitter card you want on line 12 where it says value=””.

Now we move on to the next step of this process, adding a Twitter handle field to the user profile in the WordPress backend area. This process is optional but if you decide not to do it you will have to replace the PHP call on line 19 with your actual twitter handle. Setting it up like I have it above lets authors on your website have their own Twitter Card using their personal Twitter Handle.

First thing you have to do is locate your WordPress websites’ functions.php file within your theme and open that in a text editor. Once you have it open scroll to the bottom and find the closing PHP tag:

?>

and paste the follwing code right above that:

/* === Twitter Card Field Add === */
function my_new_contactmethods( $contactmethods ) {
 // Add Twitter
 $contactmethods['twitter'] = 'Twitter';

return $contactmethods;
}
add_filter('user_contactmethods','my_new_contactmethods',10,1);

The above code will add a Twitter Handle input field under your WordPress users profile section and will look something like the picture below.
Twitter Handle Input Field
Now you can add your Twitter Handle in the Twitter input field which is located in the users profile in the WordPress backend under the contact info section. You Do not add the @ symbol before your Twitter handle in this input field as it is already added in the head code from earlier.

Now before you get all excited and go apply for a Twitter Card you should test to see if it works first. To do this you’ll need to visit the Twitter Card Validator. It will ask you to sign in, so sign in using the Twitter account you want the Twitter Card to be displayed on. After you sign in a modal window will pop up asking you to select which type of Twitter Card you want. Make sure you select the same card type that you specified in line 12 of the code we inserted into our header.php file. The next page that comes up should look like the one in the screenshot below:
Twitter Card Validator

You may have to click the “Validate & Apply” tab to show an input where you will need to paste a url to an article from your website. Posting your homepage url will not work, it must be a link to an article on your website. If you followed the instructions correctly you should have all green dots and it will render a preview of your card to the right as seen in the above screenshot.

Once your Twitter Card is displaying how you want it to, just apply and wait. It usually takes a couple weeks to get approved and once you are approved Twitter will send you an email informing you that your Twitter Card was approved.

*Although the above code has been tested and approved on multiple websites, Enfuzed is not responsible for anything that may go wrong when editing your website, performing the above edits are at your own risk.*

Free eBook: How to Create a Million Dollar Website

Many people dream of becoming an internet millionaire. Don't be a dreamer download this eBook, join my newsletter and start taking action today.

  • How to Find a Profitable Niche
  • How to Market Products Online
  • How to Build a Profitable Email List
  • How to Beat the Competition
  • Free Weekly Internet Money Making Methods

Free eBook: How to Create a Million Dollar Website

Many people dream of becoming an internet millionaire. Don't be a dreamer download this eBook, join my newsletter and start taking action today.

  • How to Find a Profitable Niche
  • How to Market Products Online
  • How to Build a Profitable Email List
  • How to Beat the Competition
  • Free Weekly Internet Money Making Methods