post

HTML5: The Beautiful Butterfly! Part 2

Before starting this part, you may like to take a look on part 1. We are going to discuss some more important changes in this post. As HTML5 has been taking the top place of tomorrow’s world, it has a lots of flexibility. So, it’s your turn to use the resource that you have in HTML5.

Section, Article and Aside tag

Section is used to separate two or more parts, to make a connection between a heading and it’s excerpt or content. Also, within a section you can use h1 elements without having to worry about whether a particular section is at top level, second level, third level and so on. Section can be nested. One thing you need to remember that, section should not be used for styling. So, use a parent wrapping element to style for a particular section.
[html]

This is heading

This is excerpt…

This is heading

This is excerpt…

[/html]

About article, many people thinks article is used only for blog posts. This is wrong. Article can be used for the content that are segmented. So, your main content can be wrapped with article tag. Even you can wrap your blog comments with article tag. You can use header tag within article tag.

[html]

This is heading

Long content here..

Long content here..

Long content here..

    • …
    • …
    • …

Long content here..

Long content here..

[/html]

We have a generic idea that “aside tag is only used for a sidebar”. Well, this is true, but not true if you use the term ‘only’. Aside tag represents the part of the content that is not 100% applicable but still related to the content. So you can use aside tag within a content, just remember the aside tag should represent related content, not the applicable content. You know the use as sidebar. Let’s see different one.

[html]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae nisi metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis vulputate tristique iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae nisi metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis vulputate tristique iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae nisi metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis vulputate tristique iaculis.

[/html]

Make a simple accordion with details tag

Many people thinks some things should be separated for javascript and html. We can build pretty attractive and sexy accordion with javascript. But for the same of simlicity, html5 introduces a very easy approach with details tag. Remember, all browsers don’t support all tml5 tags yet. Google chrome is the best browser to check html5 tags and attributes. So, you should really stick with chrome when you want to check your html5 outputs.

Within details tag, you need to use summary tag to show a part, e.g. question. Other elements will be hidden by default, we can consider it as answers.
[html]

  • This is a question

    This is a long answer….

  • This is a question

    This is a long answer….

[/html]
It will show only the questions with an arrow behind it. When you click on the arrow, then the rest of the corresponding content will be visible. This is very useful if you want to develop a FAQ quickly.

Now, what about changing the colors of the arrow. We can use a tricky css to change the colow of the arrow.
[html]

[/html]
If you want to keep open an item, just use open attribute in the details tag.
[html]

  • This is a question

    This is a long answer….

  • This is a question

    This is a long answer….

[/html]
The last item will be open by default. Also, remember details tag need to be used within list items. It should look like below:

Screen Shot 2013-11-30 at 8.20.37 PM

See Part 1 here

post

Unique display name and nickname in wordpress

Hiya Folks!

We know that display name and nickname are very useful option in wordpress. Some users want to show display name or nickname instead of username. But there is possibility to be the display name and username same for more than one users. It will create confusion in plugin like BuddyPress or Classifieds or so.

But, if you can protect your user and system to create duplicate display name and nickname, then it’s achievable. Let’s make the hands dirty :)

You can add these codes in your functions.php in the theme, if you think your theme won’t be changed. Otherwise mu-plugins is the best solution. To use mu-plugins, go to /wp-content/ and find the folder with name ‘mu-plugins’. If there is no folder in that name, then create a folder, name it ‘mu-plugins’, create a file inside that, give any name you like and paste the code in their. You don’t need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always.

The above code speaks a lot!
Many thanks to my colleague Vaughan Montgomery.

Suggestions are welcome :)

post

How to add login logout link in wordpress menu

We can add login and logout link using Appearance > Menus and then custom link. But then both links will be shown always, doesn’t matter if you are logged in or out. But if you want to use Login link only for visitors and logout link only for members, this little snippet will help you with that.

You can add those codes in your functions.php in the theme, if you think your theme won’t be changed. Otherwise mu-plugins is the best solution. To use mu-plugins, go to /wp-content/ and find the folder with name ‘mu-plugins’. If there is no folder in that name, then create a folder, name it ‘mu-plugins’, create a file inside that, give any name you like and paste the code in their. You don’t need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always.

[php]
function add_login_logout_link($items, $args)
{
if(is_user_logged_in())
{
$newitems = ‘

  • logout
  • ‘;
    $items .= $newitems;
    }
    else
    {
    $newitems = ‘

  • login
  • ‘;
    $items .= $newitems;
    }
    return $items;
    }
    add_filter(‘wp_nav_menu_items’, ‘add_login_logout_link’, 10, 2);
    [/php]

    Enjoy WordPressing :)

    post

    HTML5: The Beautiful Butterfly! Part 1

    HTML or Hypertext Markup Language is a formatting language that programmers and developers use to create documents on the Web. The latest edition HTML5 has enhanced features for programmers such as video, audio and canvas elements. You view a Web page written in HTML in a Web browser such as Internet Explorer, Mozilla Firefox or Google Chrome. The HTML5 language has specific rules that allow placement and format of text, graphics, video and audio on a Web page. Programmers use these programming tags or elements to produce web pages in unique and creative ways. Tags enable the creator to make a more efficient and intelligent web page. Users will not have to use a Flash plug-in for video and audio content. Visual Studio users typically write code in HTML5 when creating web site content.

    Well, we are not going to discuss here about HTML5, but some useful tips for HTML5 :)

    Change of Doctype

    Doctype declaration in older version
    [html][/html]
    This is much more easier now
    [html][/html]
    Also, you can put notes here:
    [html][/html]

    Some people may think that it will not run in Internet Explorer 6 or 7 or other older versions. Totally wrong. As long you are using
    [html][/html]
    Basically the ‘text/html’ part will handle it.

    New html tag

    We are used to keep in this way:
    [html][/html]
    Get rid of this xmlns attribute now:
    [html][/html]
    You can declare a language here:
    [html][/html]

    No self closing tag

    In xhtml, we needed to close the self closing tags. Like:
    [html]

    [/html]
    But now in HTML5, we don’t need to close the self closing tag. So,
    [html]

    [/html]

    not bound to use quotation for attribute value

    Well, we needed to use quotation for attribute value in xhtml. Like:
    [html]

    [/html]
    You can get rid of that quotation.
    [html]

    [/html]
    But it is strongly recommended to use quotation for attributes value as when you use a editor, it changes color and better to understand the segmentation of your code.

    Unique tag for header, footer and nav

    When you think a segment should be considered as a header, then change your
    [html]