Categories
WordPress How To

Add SSL / HTTPS for WordPress Network sub-site as cPanel Alias Domain

Site Address (URL)

We first change the Site Address (URL) of the sub-site.

Go to WordPress Multi-site: “My Sites” => “Network Admin” => “Sites” => Click “Edit” of the sub-site, and change the Site Address (URL) to the top level domain URL like this:

https://www.example.com/

Click “Save Changes“.

Domain Mapping (plugin)

A top-level domain is added to WordPress Network / Multi-sites via the Domain Mapping plugin. Add these top-level domains:

  • https://example.com
  • https://www.example.com (Primary)
  • https://www.example.com

However since the domain is not in the cPanel as an addon domain, AutoSSL will not issue SSL certificate for it.

cPanel Alias Domain + AutoSSL

The solution is, after adding the top-level domain in the Domain Mapping plugin, add it in cPanel as an Alias Domain for the WordPress Multi-site main domain (independent cPanel account).

Therefore AutoSSL will issue and install an SSL certificate for the alias domain. Go to “Manage AutoSSL” in WHM and “Run AutoSSL For All Users” to manually request SSL certificate for the alias domain.

It may take some minutes for the new certificate to be installed.

Really Simple SSL (plugin)

Now install the Really Simple SSL plugin, network activate it, and choose per site mode.

Go to the sub-site dashboard: “Settings” => “SSL” => Activate SSL

Done!

Optional .htaccess config

If you haven’t done the above step, below is optional and NOT required at all, otherwise below is required.

You can force HTTPS on the top-level domain in .htaccess of your WordPress network installation:

RewriteEngine On
RewriteBase /

RewriteCond %{HTTP_HOST} yourtopleveldomain\.com
RewriteCond %{HTTPS} !=on
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# BEGIN WordPress
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule . index.php [L]

Categories
Web Design Tips and Insights WordPress How To

Theme Van Premium Portofolio WordPress Theme by My Friend Johnny

My friend Johnny is a very talented web designer. He’s recently released a portfolio WordPress theme at ThemeForest which is very classy and cutting-edge in styles.

SimpleKey

Be sure to also check out some of his other work at the ThemeForest page and his design studio ThemeVan.

Categories
WordPress How To

Customize WordPress Admin Styles from Your Theme Directory

It’s better to style the /wp-admin of WordPress from your theme because it’s portable and upgrade-proof. Keeping all customizations  in ONE place is always a good idea in web development.

How to style WordPress admin backend /wp-admin from your theme?

  1. Add this hook to the functions.php of your theme:
    function customAdmin() {
        ?><link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/wp-admin.css" /><?php
    }
    add_action('admin_head', 'customAdmin');

    Which effectively adds a stylesheet to the header of every /wp-admin page.

  2. Create a text file named wp-admin.css in your theme directory.
  3. Write the customization styles in wp-admin.css.

That’s it. Now you can freely customize the look and appearance of the WordPress admin backend from within wp-admin.css in your theme directory.

Categories
WordPress How To

Make WordPress Hooked Function to Run Only Once

Consider this hook to add something before your WordPress blog’s sidebar:

function before_siderbar() {
?>
<!-- Something goes here, such as an AdSense links unit -->
<?php
}
add_action( 'get_sidebar', 'before_siderbar' );

It’s usual to add an AdSense links unit there but the problem with some themes is that they run get_sidebar more than once, such as on the sidebar AND in the footer. Consequently, you would end up with multiple AdSense links unit here and there, whereas you only wanted it on the sidebar once.

This could create a TOS problem towards AdSense because unconsciously, you would very probably end up adding more than 3 links unit per page.

To prevent this and only make the hooked WordPress function to run once (even it is called multiple times), use the PHP static variable in functions.

function before_siderbar() {
	static $called = false;
	if (isset($called) && $called) {
		return false;
	}
?>
<!-- Something goes here, such as an AdSense links unit -->
<?php
	$called = true;
}
add_action( 'get_sidebar', 'before_siderbar' );

In the above snippet, the variable $called is kept alive across multiple calls to the before_siderbar() function. After the first successful run of the function, $called would have a value of true and it’s kept so inside the function every time it’s called afterwards. In the 2nd and every call afterwards, $called will always be true and the function returns before outputting the AdSense code.

There you go. Now no matter how many times the before_sidebar() is called, only the first run would output the stuff you put in it.

Categories
Content / SEO Tips & Tutorials Make Money Online WordPress How To

How to Create WordPress Widget Areas (Before and After Single Post)

Most WordPress themes such as those released by WooThemes come with ready to use widget areas only in sidebar and footer. They are missing out the most important areas of a blog for readership attention and actionable conversions. They are the areas immediately before single post content and immediately after it.

For example, a paragraph naturally flowing at the end of the post as if it’s part of the content would definitely grab the attention of your readers:

immediately after single post content

So How do We Create These 2 New Widget Areas?

Open functions.php and put in the follow snippet:

// This registers the widget area immediately before single post content
register_sidebar(array(
    'id' => 'before-single-post',
    'name' => 'Before Single Post',
    'description' => 'Widget area immediately before single post content',
    'before_widget' => '<div id="%1$s">',
    'after_widget' => '</div>',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
));

// This registers the widget area immediately after single post content
register_sidebar(array(
    'id' => 'after-single-post',
    'name' => 'After Single Post',
    'description' => 'Widget area immediately after single post content',
    'before_widget' => '<div id="%1$s">',
    'after_widget' => '</div>',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
));

And then open single.php or content-single.php or whatever it is that is the single post template file of your theme. Find the_content() and put before and after it the dynamic_sidebar() function so the widget content is displayed. You will very probably have something like this in the end:

<div id="before-single-post">
	<?php dynamic_sidebar('before-single-post'); ?>
</div>

<?php the_content(); ?>

<div id="after-single-post">
	<?php dynamic_sidebar('after-single-post'); ?>
</div>

Done.

Only 2 files (functions.php to register the widget area and one other file where you intend the widget content to be displayed) that need to be edited and updated to add new widget areas.

Adding Stuff to the Widget Areas

Now if you go to Appearance –> Widgets in the WordPress backend console, you would see 2 extra widgetized areas:

widget areas created

Try adding a widget there (probably the text widget) and see how it looks so you can style it for better attention attraction.

Categories
WordPress How To

Create a WordPress Child Theme

WordPress amazes by making things possible in the simplest and most intuitive way. Child themes are the intended and correct way for customizing a third-party theme and you should always create a child theme to do the customizations so that the original theme stays intact thus ready for upgrade. And this is how you can do it with a file that’s just a few lines.

Follow the steps. Create the child theme folder and its style.css.

How to create a WordPress child theme?

  1. Create a folder in /wp-content/themes and name it however you like as this would be your child theme directory. For instance, you are creating a child theme from Twenty Eleven, and you may name it twentyeleven_one, twentyeleven_two, or something.
  2. Create a style.css file in the new directory and put in the following lines in it:
    /*
    Theme Name:     Twenty Eleven Child One
    Template:       twentyeleven
    */
    
    @import url("../twentyeleven/style.css");
    
  3. That’s it. Now head to Appearances -> Themes and refresh the page to see the new theme that you can activate.

The bold part of the above code is the folder name of the parent theme, so this child theme knows which parent theme it is inheriting from.

Activating Child Theme & Customizations

After you have activated the child theme, everything will be the same as if you have activated the parent theme. And you can overrule the same file in the parent theme by creating an identically named file in the child theme, including .php, .css, .js, .jpg, etc. Note however, you can’t overrule files in a sub-folder of the parent theme.

For example, you can now write some CSS styles in the style.css you just created and it will be overwriting existing styles in style.css in the parent theme directory.

Any customizations to the theme files will be only in the child theme so the parent theme will be free and ready to be upgraded thus preserving your changes.

Categories
PHP Tips & Tutorials Regular Expression Tips & Tutorials WordPress How To

PHP preg_match() First Letter of a WordPress Post for Drop Cap Styling

Drop Cap ExampleWhile CSS3 can target the first letter of text inside an element, it’s still not universally supported across major browsers AND it doesn’t work well for elements that have child elements inside. The bullet proof way to target the first letter of a WordPress post would be to capture the content of the post in WordPress theme and match it by regular expression functions in PHP, such as preg_match().

And here’s the code I’ve come up for this job:

ob_start();
the_content();
$content = ob_get_clean();
$content = preg_replace('@<p>\s*((?:<[^<>]+>\s*)*)([^<>\s])@'
, '<p>$1<span class="drop_cap">$2</span>'
, $content
, 1);

echo $content;

Obviously, this code should reside in single.php of your WordPress theme where the content of the posts is being output. Just replace any “the_content()” function in the post area with this snippet.

The key is the regular expressions:

@<p>\s*((?:<[^<>]+>\s*)*)([^<>\s])@

And:

<p>$1<span class="drop_cap">$2</span>

That finds the 1st non-whitespace, printable character (a letter, a numeral, etc.) of a post and adds a surrounding <span> tag with class “drop_cap” to it.

Now you will add some drop cap styles to style.css as class .drop_cap, and the first letter of your posts will have a nice drop cap style. See this blog Mosso Reviews for example.

Categories
eCommerce & Shopping Online My Personal Reviews WordPress How To

My WooThemes Review

WooThemesAs WordPress becomes the de facto standard of web publishing, the need for quality WordPress themes have soared. There are lots of themes vendors across the web but I finally made up my mind to go with WooThemes and signed up a $125 membership with them a few months back. I never looked back. Here are the things I like or don’t like about them off the top of my head.

Good things

  1. Some of the themes look so fantastic and unique! Their themes are much more than just blogs.
  2. They retire old themes that went out of fashion. This means they are very picky of what they offer. When I first signed up, it’s about 125 themes in their repository but recently it has been downsized to 100.
  3. They UPDATE. I log back in my account at WooThemes.com every a few days and the version numbers of the themes change very frequently. Many old themes have been regularly updated and patched since being released more than 2 years ago.
  4. They release new themes every month. While it’s not as exactly as 2 themes per month as they promise, it’s approximately in that pace. And the latest ones are the best.
  5. They have very sophisticated yet easy to use backend configuration panels for every theme. Each of them comes with hundreds of different options regarding a variety of aspects. The administration is quite enjoyable.
    WOOTHEMES CONTROL PANEL
  6. They reply to EVERY THREAD in their member community with usable advice and sensible solutions in less than 24 hours. Sometimes it takes longer for advanced questions that would be assigned to a senior support staff. I asked a total of 16 questions at their community forum and all of them got resolved in less than 48 hours with clear, detailed and professional answers. I actually become better with WordPress (know many useful plugins that make my life easier writing for the web) since I started participating in their forums.
  7. As an intermediate web programmer myself, from viewing their code base and from the answers to my questions, I can tell they have designed their products (themes, theme framework and WooCommerce) well. It’s not a novice-work that’s pieced together and then duplicated over and over again. What they make is a well-formed ecosystem that’s capable of forgiving and extending. It’s both robustly functioning and beautifully usable.
  8. Very great value for money. With this coupon code:

    $25 OFF STANDARD MEMBERSHIP OR $40 OFF DEVELOPER MEMBERSHIP
    WOO2011
    Click To Open/Copy

    You would only need to pay $100 (with $25 OFF, or $40 OFF for developer membership) for a standard membership that instantly enables you to download ALL of their current themes for a month. And subsequent subscription is just $20 per month that you can choose to deactivate or re-activate any time you want without any additional charges.

Not so good things

  1. About 1/2 of the themes don’t look that good, especially old ones. This is probably because they have designed their website so beautiful that I have high expectations from their products and become too easy to be disappointed by their themes.
  2. I tried to think of things I don’t like about them for the last hour…….and I couldn’t think of any, except one time I asked a question about the product image resizing issue for one of their WooCommerce themes and got replies that insisted it was my problem rather than theirs. They turned out to be right. It was my problem because I was not familiar with the WooCommerce options. But still. If a user can be blamed for incompetence to use the software, it’s a developer fail without excuses.

Conclusion

To sum up, I give 4.8 / 5 to WooThemes. Go with them, if WordPress is your core publishing platform. Period. With WooCommerce and their e-Commerce themes, WordPress can be a very powerful online store as well. Being a member of them would make sure you stay on the decisive edge of web design trends for your web projects.

Categories
WordPress How To

WordPress: Programmatically Add Items to a Menu (Dynamically)

Menus are created and edited from in the WordPress backend and then called in frontend theme to be displayed by the wp_nav_menu() function. On some occasions, we may want to programmatically add one or two menu items to a menu because those menu items change frequently and it would be a chore to have to add / update them in the backend every time any of changes occur.

So how to programmatically add menu items to a WP menu on the fly?

For instance, what we have now in our theme as the top menu:

<ul id="main-nav" class="nav fl">
	<?php
	
	wp_nav_menu(array(
		'depth' => 6, 
		'sort_column' => 'menu_order', 
		'container' => 'ul', 
		'menu_id' => 'main-nav', 
		'menu_class' => 'nav fl', 
		'theme_location' => 'primary-menu', 
		'items_wrap' => '%3$s'
	));
	
	?>
</ul>

Firstly, we need to get the HTML returned by wp_nav_menu() by setting the parameter ‘echo’ => false. This way, we can get the menu HTML as a PHP variable and then manipulate it however we want. What I want to do is to add some sub menu items to the “Shop” item:

<ul id="main-nav" class="nav fl">
	<?php
	
	$my_wp_nav_menu = wp_nav_menu(array(
		'depth' => 6, 
		'sort_column' => 'menu_order', 
		'container' => 'ul', 
		'menu_id' => 'main-nav', 
		'menu_class' => 'nav fl', 
		'theme_location' => 'primary-menu', 
		'items_wrap' => '%3$s', 
		'echo' => false
	));
	
	$my_wp_nav_menu = str_replace(
		'>Shop</a></li>', 
		'>Shop</a><ul class="sub-menu">'.$my_sub_items_html.'</ul></li>', 
		$my_wp_nav_menu
	);
	
	echo $my_wp_nav_menu;
	
	?>
</ul>

The key is to insert a sub menu in there. In this case, I used the str_replace() function to do this. Make sure you use appropriate classes for <ul></ul> and <li></li> or they won’t be rendered as a sub menu.

$my_sub_items_html contains the sub menu items such as this:

<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="/product-category/bags/">Bags</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="/product-category/accessories/">Accessories</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="/product-category/toys/">Toys</a></li>

These can be dynamically generated from one of the taxonomies of your WordPress blog or you can specify your own.

Categories
WordPress How To

Customize WordPress Login Header and Link, Upgrade-proof without Plugin

The default image header and link on the login / register page of WordPress is a WordPress one, apparently, but when you are enabling registration / login to general users, you would want to use your own logo and website URL as the header rather than the default -  so people don’t get confused and freak out!

It’s amazing how WordPress has made such simple customizations even simpler by the introduction of hooks. Just insert the following snippet in your theme’s functions.php:

add_action('login_head', 'my_custom_login_logo');
function my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.dirname(get_bloginfo('stylesheet_url')).'/my_custom_login_logo.png) !important; }
    </style>';
}

add_filter('login_headerurl', 'my_custom_login_link');
function my_custom_login_logo(){
    return ('/'); // put here your website URL such as http://www.example.com/ or simply /
}

Just provide your own logo and upload it to your theme directory as my_custom_login_logo.png. You can also use get_bloginfo(‘template_directory’) for theme path but that would return the parent theme path if you have a child theme. Sensibly, we would put all customizations in the child theme, so dirname(get_bloginfo(‘stylesheet_url’)) is probably a better approach.

Without editing the core files, this solution is upgrade-proof and you don’t have to install any plugin.