Tags Posts tagged with "PHP"


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:

<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; ?>
<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.

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:


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

<!-- Twitter Card -->
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;

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.*