post

How to write dynamic css in a php file in wordpress

It’s always standard to maintain a separate css file for styling, even for dynamic css that is generated by the theme options. Most of the theme developers include this dynamic styles into the header or footer using wp_head or wp_footer hook. How’s about having a totally separate css file for the dynamic styles? :) It’s pretty simple so let’s start!

In my example, I have used redux framework, so that I have a global variable. In my case, I assume my global variable is $lts. So, in functions.php you need to add like this:

[php]
// Adding custom script
add_action( ‘wp_enqueue_scripts’, ‘theme_custom_style_script’, 11 );
function theme_custom_style_script() {
wp_enqueue_style( ‘dynamic-css’, admin_url(‘admin-ajax.php’).’?action=dynamic_css’, ”, VERSION);
}

// Ajax handler for wordpress
add_action(‘wp_ajax_dynamic_css’, ‘dynamic_css’);
add_action(‘wp_ajax_nopriv_dynamic_css’, ‘dynamic_css’);
function dynamic_css() {
// Assuming the css file is in /wp-content/themes/THEME_NAME/assets/css/ directory
require( get_template_directory().’/assets/css/custom.css.php’ );
exit;
}
[/php]

Then in custom.css.php file add this:
[php]

body{
/* You can use your theme option variable here, just declare it as global variable first */
color: ;
}
[/php]

Gist code:

Hope it helps! :)

post

How to make your wordpress secure, wp config tips and many more

You don’t want your site to be hacked, right? Security should be at the top of to-do list. It doesn’t matter which CMS or platform you use for your website or application or portal, but you need to always think about security. Well, you never can stop a hacker to hack your site, but you can make this difficult for you. Today we are going to discuss about some security issue and wp-config tips.

wp-config.php file is the key of a wordpress site, like a foundation when you build a building. Everything in wordpress stand based on this configuration file. So, it’s important, but most of the users ignore this file or afraid of even looking at this file. But you know what, once you get familiar with this your life would be easier :)

So, let’s start!

  1. Make sure the file permission wp-config.php is 600 to prevent other users on the server from reading it. The permission of other directories should be 750 or 755. And all files should be 640 or 644. Never use 755 for a file or directory, not even for upload folder!
  2. To check any error in your site, you can enable debug mode. Though, enabling debug mode in a live site is not recommended at all. You should have a staging site where you can do all the testing, and when you are done, apply the changes in production server. Anyway, to enable debug more edit a line in wp-config.php. Change

    to

    It will enable debug mode and you will see all the warnings, errors and notices (based on server configuration).

    Now, if you want to enable debug mode but don’t want to display the errors, then use:
    [php]
    define( ‘WP_DEBUG_DISPLAY’, false );
    @ini_set(‘display_errors’,0);
    [/php]
    So, how can you see the errors? Well, you can enable logging the errors :) Adding the following line will create a debug.log file inside of wp-content directory with all the errors and notices.
    [php]
    define( ‘WP_DEBUG_LOG’, true );
    [/php]

  3. So, as you saw the define function, so I hope you are familiar with it or will be :) You can take some advantage of this function. This function is used to define a constant. A constant is a variable but the value of that variable never be changed and you can use that constant anywhere in your site (something like global variable, but you don’t declare it globally before using). Example:
  4. Did you install SSL in your server for your domain? And the site admin is still being loaded over HTTP instead of HTTPS? Well, you can force SSL login.
    [php]
    define( ‘FORCE_SSL_LOGIN’, true );
    [/php]
    You can force the admin of your site to be loaded over HTTPS as well:
    [php]
    define( ‘FORCE_SSL_ADMIN’, true );
    [/php]
    If you use non secure virtual host, you can add this in httpd.conf file: (assuming your site is domain.com)
    [html]
    RewriteCond %{THE_REQUEST} ^[A-Z]{3,9} /(.*) HTTP/ [NC]
    RewriteCond %{HTTPS} !=on [NC]
    RewriteRule ^/?(wp-admin/|wp-login.php) domain.com%{REQUEST_URI}%{QUERY_STRING} [R=301,QSA,L]
    [/html]
  5. How’s about disabling theme and plugin editor? Editing via wordpress editor is really a bad habit unless you are sure what you are doing as there is no way to roll back. Adding the following line will disable the editors:
    [php]
    define( ‘DISALLOW_FILE_EDIT’, true );
    [/php]
    If you want to restrict updating themes and plugins from inside the wordpress admin use:
    [php]
    define( ‘DISALLOW_FILE_MODS’, true );
    [/php]
  6. Revision is one of the coolest features in wordpress. Besides it also increases the db size. So you can limit the revisions using the following code to 5 times:
    [php]
    define( ‘WP_POST_REVISIONS’, 5 );
    [/php]
    If you want to completely disable the revision feature use:
    [php]
    define( ‘WP_POST_REVISIONS’, false );
    [/php]
    Plus, if you want to increase the delay (in this example 1500s) of autosave, use this:
    [php]
    define( ‘AUTOSAVE_INTERVAL’, 90000 );
    [/php]
  7. In latest version of wordpress the default theme is twentyfourteen. You can change the default theme to any installed theme. You must need to know the theme slug.
    [php]
    define( ‘WP_DEFAULT_THEME’, ‘twentytwelve’ );
    [/php]
post

Enable css for HTML5 tags in Older Internet Explorer: HTML5 – The Beautiful Butterfly! Part 3

First you may take a look in:
Part 1
Part 2


This is a very interesting topic. Most of the html5 tags are not supported in older versions Internet Explorer(IE) or other older browsers. When we develop a website in html5, we consider it. You can ignore older versions of FF, Chrome or Safari, but you can’t just ignore IE7 or IE8. Well, some tags are still not supported in any browsers, but what about simple tags like section, article, header, nav etc?

When we apply styling on these tags using css, the tags are not recognized in IE at all. So, no style is shown. For example:
[html]

bla bla bla
bla bla bla

[/html]
And you style this
[html]

header{padding: 10px; background: red;}
nav{margin: 10px 5px 10px;}

[/html]

This will look good any modern browser but not in older versions of IE. And it was not discovered until a unknown person make a comment. It was in 2008. The commenter Sjoerd Visscher posted a comment in intertwingly.net/blog/2008/01/22/Best-standards-support:

Btw, if you want CSS rules to apply to unknown elements in IE, you just have to do document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist.

And this comment changed everything! Before this comment nobody knew that you can do it, pretty interesting, isn’t it?

So, the way is if we create a simple script line in the head tag, all html5 tags should be introduced in IE.
[html]

document.createElement(‘header’);
document.createElement(‘nav’);
document.createElement(‘article’);

[/html]
So, if we need to create a number of elements for IE, we can use an array:
[html]

var e = [‘header’, ‘section’, ‘nav’, ‘article’]; // add more elements here
for(var i = 0; i < e.length; i++){
document.createElement(e[i]);
}

[/html]
But we don’t want to execute this script in every browsers, only in IE. So, use conditional html tag :)
[html]

var e = [‘header’, ‘section’, ‘nav’, ‘article’]; // add more elements here
for(var i = 0; i < e.length; i++){
document.createElement(e[i]);
}

[/html]

You can see a nice documentation here by John Resig. Another well known and popular web developer Remy Sharp created a script that enable html5 tags in IE and is available in google code. An advanced script is here. So, if you use this you just need to include the source, rest of things will be done by that script :)

There are many ways out there for IE to recognize the html5 tags. We will discuss about those in some other day :)

Part 1
Part 2

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

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]

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
      document.createElement("header");
     
      document.createElement("nav");
     
      document.createElement("section");
     
      document.createElement("article");
     
      document.createElement("aside");
     
      document.createElement("footer");
     
      ...............