S2P Blog: 2013

Snippets: Adding Custom Post Type with Categories to Wordpress

add_action('init', 'snippet_register_post_type');

    function snippet_register_post_type() {
    register_post_type('mobile', array(
        'labels' => array(
            'name' => 'Mobile',
            'singular_name' => 'Mobile',
            'add_new' => 'Add new Mobile',
            'edit_item' => 'Edit Mobile',
            'new_item' => 'New Mobile',
            'view_item' => 'View Mobile',
        ),
    'public' => true,
    'supports' => array(
        'title',
        'thumbnail',
        'editor'
    ),
    'has_archive' => true,
    'hierarchical' => true,
    'taxonomies' => array('category') // Syntax for adding Categories
    ));
    }

http://codex.wordpress.org/Post_Types

GuideGuide Photoshop Extension for Creating Grid

No comments:

While, searching for psd template to use for my client website design mockup, I found much useful and easy to use plugin for photoshop. GuideGuide is a straight forward addons for creating grids for your website layout. I found it useful because you don't need to recreate or adjust the guides everytime you have a new client which require to have a different layout width than the usual 940px base grid.

How to use?
First, you need to download first the add on and install using adobe manager
Second, Go to the Window > Extensions > GuideGuide and you will find a GG icon on your right side of photoshop.
Lastly, Setup the desire setting i.e Number of Columns , Gutter Size etc.

Free: Malinis Tumblr Theme

No comments:

I'm still don't have the idea on How to sell a Premium Tumblr Theme directly in their Tumblr Themes Collection.

One of my greatest dream is to create a passive income in creating themes in addition to my Freelance Web Design and Development Service.

As of know, I have only options to create free themes but still this is not included in their library so I think I have to post it myself to get a review from a real Tumblr user. I hope you find it useful for those looking for a Clean Style Tumblr Theme.

Add Shadow Effect Text Effects in your Website or Blog

No comments:

After you learn on how to Add a custom fonts on your Website the next thing you might want to learn is adding effects on your text.

This Text effects CSS Styling is more light size than having an image with text effect embedded or uploaded in your site as a logo or a special heading.

You can view the official post in W3.org on How to make CSS Text Shadow Styling or you can go to this Cool Text Shadows Post.

To add it in your Blogger Site, just Go to Blogger Template Designer > Advance > Add CSS and target your desire HTML Tag.

For Example:

COOL TEXT EFFECTS TO YOUR BLOG

Add This code to target your Site Title

h1 {font-size: 30px; text-shadow: 2px 2px 0px #eee, 3px 3px 0px #707070;}

Of Course, change the values of your desired effects.

Make your title in 3d Effects

3D Effects

CODE

h1 {color: #c1d6ff; font-size: 30px; text-shadow: 0px 1px 0px #b6ceff, 0px 2px 0px #99bbff, 0px 3px 0px #4381fc,0px 4px 0px #377aff, 0px 5px 0px #216bfe, 0px 6px 0px #0f5fff, 0px 5px 0px #014de5, 0px 6px 0px #002672, 0px 7px 2px #00133a;}

Add Custom Fonts to your Website

18 comments:

Fonts are one of the important aspects in the design elements that's why we always choose the right combination of Fonts to use.

In Web Design, We have to consider License in using Fonts. There are some font's that only allows us to use for personal and not for commercial projects.

If you looking for a FREE and large collection of fonts, Google Web Fonts is one of the best library to consider.

Just be sure to check the problem in Google font before using any of the available fonts in the Google Fonts library.

If you want to add a custom Font in your website.

These are the quick guides on how to do it.

First, Go to Google Font Library and choose the font that you like to use.
Second, Click the Quick-use , and you will be guided by Google on how to embed it in your website.

You may also want to check other Font library that is free to use.
Just always check each font license agreement before using it in your project.
Embedding is pretty much the same in Google Fonts.

These are the other Free Fonts Library but I personally recommend using Google Fonts and Edge Web Fonts in your Web Design Projects.

Add Custom Facebook, Google Plus Metadata to your Website or Blog

No comments:

Below is the small but useful snippet that can customize the Metadata of your Website or Blog.

This is good set of codes if you want your website to have a custom preview image, description and title when sharing your site to giant social network.

I always put this code in every website development projects that I made in my freelance web design service

Be sure to add this code below the <head> tag of your website.
In Blogger, Add this code after the </head> tag of template.

Facebook Metadata

Google+ Metadata

Here is the example code that I used to this blog.
You can share this blog post to see the working snippet :D.

<meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ipnbMFlh_QHfkUzD0IalU0hjwQhXS2MMPfuq7izUK8_cv0J9b6JC1rj0-4fpuzyv-zVrreIvfWw-23J5NRoA9wheAM5CQ6MvtY17prkRoNYZwve82sf8gst1R5FJTFdVjdYo4X2uEyQ/s1600/preview.jpg" />
<meta property="og:description" content="Just a simple blog of Sketch2Pixel.com" />
   <meta property="og:title" content="Sketch2pixel.com Blog" />


   <meta itemprop="name" content="Sketch2pixel.com Blog" />
   <meta itemprop="description" content="Just a simple blog of Sketch2Pixel.com" />
   <meta itemprop="image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ipnbMFlh_QHfkUzD0IalU0hjwQhXS2MMPfuq7izUK8_cv0J9b6JC1rj0-4fpuzyv-zVrreIvfWw-23J5NRoA9wheAM5CQ6MvtY17prkRoNYZwve82sf8gst1R5FJTFdVjdYo4X2uEyQ/s1600/preview.jpg" />

After you add the codes change the values (text in bold) of each line with yours.
Debug your site using FB Debugger and see if your metadata is working.

Blogger Hack: How to post PHP Code Snippet and Highligt the code post

No comments:

Today I add some snippet to highlight my code post.
As you can see in my Blog I used one of the default theme in Blogger Templates Options.
I noticed that the Blogger themes do not supports posting CODE Snippets in your blogpost so I do some blogger hacks to make it possible..

First, to post PHP snippets or codes you must use the compose preview in composing panel and avoid the HTML because the PHP codes will break your blogpost.

Second, After you post the Snippets, Go to HTML preview and you will notice that your code snippets comes with some HTML codes (SPACES) that look like this   which is fine..

Third, Add this code on top of your code post <div class="code"> and close it in the end of your code post </div>. This will enclosed your code post.

Lastly, put a CSS style in a code class that we defined on the <div>, Go to Blogger Template Designer > Advance > Add CSS and add your custom code.

For a code example you can use the code below which I currently used in my Blog.
This is also serve as a Live Example.

.code { padding: 10px; border-left: 4px solid #ccc; background-color: #f9f9f9; color: #6699ff }
.code:hover { background-color: #f7f7f7 }

Now you can use <div class="code"> at the start of your post and end it in
</div> to have a highlighted code post in all of your blogpost..

Query Category Post by Post Slug

No comments:

Add This to function.php

    function the_slug() {
    $post_data = get_post($post->ID, ARRAY_A);
    $slug = $post_data['post_name'];
    return $slug; }

This is How to dispay the text of the current post slug in your Custom Wordpress Theme

<?php echo the_slug(); ?>

This is How to Query Post by Slug
The TRICK is to create a Category that's the same name to Post Slug

<?php query_posts('posts_per_page=30' . '&category_name='.the_slug()); ?>

Wordpress Tag as Keywords

No comments:

I found this little snippet that can give more SEO friendly functionality in your Custom Wordpress Website.

/* Put this code in header.php */
/* Function that hook the Post tag as Keywords */

<?php
    $postTags = get_the_tags();
    $tagNames = array();
    foreach($postTags as $tag)
    {
        $tagNames[] = $tag->name;
    }
?>

<meta name="keywords" content="<?php echo implode($tagNames,", "); ?>" />

Here's the link to his post.

Problem in Google Fonts

No comments:

We all know that Google font is the best or maybe just one of the best Open Source Web fonts to use by Web Designer and Developer for FREE but I found some not so good about it.

Well, to be exact. I used the font named Source Sans Pro in my website design project and used the font in the whole page of the website. Now the problem is when I test the website in Chrome browser, all text will display in BOLD including those styled in NORMAL which is not exactly the same in FIREFOX.

I tested the main font URL in browser to be sure, and that proves that the font itself have a problem displaying correctly in CHROME.

This BUG give me some reason to test all the font first in all browser before using it in the design especially in Web Design Projects.

Query Post by Category

No comments:

This will query the post by its Category

<?php
   // The Query
                                query_posts('posts_per_page=4' . '&category_name='.the_slug());
                                if (have_posts()) :
// The Loop
                                while ( have_posts() ) : the_post();
                                    echo '<li><a href="';
                                    the_permalink();
                                    echo '">';
                                   the_title();
                                    echo '<br /></a></li>';
                                endwhile;

// If Nothing to show
                                else :
                                  echo '<li>No Recent Post</li>';
                               endif;
// Reset Query
                             wp_reset_query();
?>

NOTE : I used custom slug function here.

Complete Reference Link Here