EASILY ADDING CUSTOM CSS USING THE WORDPRESS THEME CUSTOMIZER

In the "Additional CSS" tab you can write you own custom CSS which is applayed to your site

New customizer feature with WordPress 4.7 and upward

Adding CSS without editing any theme CSS files

To change, add or tryout your custom CSS is a often called question in many support threads. The answers are at most only the CSS snippet you may add to solve your problem but not how to add because this part is very inconveenient. You can try it with the browser tools and if it works use your FTP client or the editor behind appearance. With WordPress 4.7 there is a elegant and quite easy way to add small inline CSS. Users can add custom CSS directly from WordPress admin area. This is super-easy and you would be able to see your changes with a live preview instantly.
There are many ways in the WordPress admin back-end go to the customizer.

Go to the dashboard and click the buttom "Customize Your Site"
Go to the dashboard and click the buttom “Customize Your Site”

WordPress provides with the customizer, a “live-preview” editor. You will see options which was implemented by you Theme. All options are change immediately while editing. That’s why it called the “Live-Preview” editor.

Changes will be available after applied

The customizer is opened with the left side panel and shows a bunch of options. One of this option panels is the tab “Additional CSS”. Click this tab.

In the customizer there is a tab "Additional CSS"
In the customizer there is a tab “Additional CSS”

The tab opens and show a large text box where you can add custom CSS selectors. And the customizer isn’t the customizer wouldn’t be added or changed CSS rules immediately shown while writhing at your site in the right side.

In the "Additional CSS" tab you can write you own custom CSS which is applayed to your site
In the “Additional CSS” tab you can write you own custom CSS which is applayed to your site

After you’re satisfied with your added CSS rules don’t forget to click on the “Save & Publish” button on the top of the left side.
This easy and fast method can’t solve all. So called “inline code” for CSS is also for smaller snippets good. As opposed to external added files, which was added once and cached by the browser, are made for large CSS code because the code’s logic is separated and better to update and maintain.

Now, the new added CSS selectors looks create within the head-area on the lowest position to override the other CSS.

The added CSS is added to the heas area and very good for smaller code snippets
The added CSS is added to the heas area and very good for smaller code snippets

THIS WORDPRESS PLUGIN IS NOT PROPERLY PREPARED FOR TRANSLATE.WORDPRESS.ORG

The PlugIn slug is the widget Url path, e.g. 'category-posts'.

Why is my WordPess widget not properly prepared for the new localization?

What is the slug of my WordPress plugin?

What is the slug of my WordPress plugin?

You don’t need any more fils in the language directory. All you need is to register and use translate.wordpress.org

In some cases you get this hint: “This plugin is not properly prepared for localization.”

Your WordPress PlugIn localization at translate.wordpress.org can't be translatet.
Your WordPress PlugIn localization at translate.wordpress.org can’t be translatet.

You added the header with the Plugin Name, Author and Text Domain well. But this warning above isn’t extinguish. So you have to check the Text Domain. It is the slug of your PlugIn.

If you want to migrat your WordPress PlugIn translations and localizations to translate.wordpress.org

The slug of your PlugIn is the Url path of your WordPress repository or the Url path: ‘category-posts’.

The text domain is a unique identifier, which makes sure WordPress can distinguish between all loaded translations.

For translate.wordpress.org the plugin slug isn’t a name of a single PHP file or it isn’t a folder were your plugin is contained in! Translate.wordpress.org is more restricted to extinguish between all loaded translations as the linked How to documentation for internationalize your plugin on https://developer.wordpress.org/plugins/internationalization.

The PlugIn slug is the widget Url path, e.g. 'category-posts'.
The PlugIn slug is the widget Url path, e.g. ‘category-posts’.

This name is given by WordPress only one time and is so unique.

If your plugin Url is https://wordpress.org/plugins/category-posts, the plugin slug is: ‘category-posts’.

... or you can find the PlugIn slug with the widget repository name, e.g. 'category-posts'.
… or you can find the PlugIn slug with the widget repository name, e.g. ‘category-posts’.

WordPress makes sure that it is a unique name.

The same shows the plugin SVN repository Url path: Is the Url http://plugins.svn.wordpress.org/category-posts/ the plugin slug is: ‘category-posts’.

After changeing to the right slag for your Text Domain. Only few seconds tanslate.wordpress.org shows all widget translation files and have the possibility to translate all translation arguments.

Now the Readme and all other translation files can be set with trnsalte.wordpress.org
Now the Readme and all other translation files can be set with trnsalte.wordpress.org

UNABLE TO INSTALL OR UPDATE WORDPRESS PLUGINS

XAMPP FTP configuration for localhost and Mac OS X

  1. FTP Connection Information

    For update WordPress with a localhost installation, you must configure and get access with your FTP-client. We use XAMPP as FTP-Client. If it installed we have to “Start” the FTP-Client. Now we are ready to download and update WordPress PlugIns.

    With a XAMPP installation on Apple OS X the FTP connection is not configurated automaticly and we have to do this. It means the connection informations, like Hostname, the FTP Username and the FTP Password are missing. Of course it appears an dialog as the screenshot shows above.

    The connection information (user and password) are stored in the ProFTPd config file (www.apachefriends.org/de/xampp-macosx.html#859). Watch out for these entries.

    /Applications/XAMPP/etc/proftpd.conf:

    Watch out for the User and Password in the etc/proftpd.conf.

    # Set the user and group under which the server will run.
    User                nobody
    ...
    # nobody gets the password "xampp"
    UserPassword nobody 2TgxE8g184G9c
    RequireValidShell off

    The Hostname is:
    localhost

    The FTP-connection information can be stored permanently in the

    wordpress/wp-config.php:

    Store the connection information permanently.

    define('FTP_HOST', 'localhost');
    define('FTP_USER', 'nobody');
    define('FTP_PASS', 'xampp');
  2. Missing temp-folder or no read/write rights

    A second error can be folder access problems, missing folder or read/write rights. Because the access rights WordPress can not create the needed folders for plugin downloads and updates. We must create these two folders and give them read/write rights for WordPress.

    Create this two folders:

    – wordpress/tmp
    – wordpress/wp-content/upgrade

    Give WordPress read/write access to them:

    Now we should download and install WordPress Plugins.

GOOGLE CHART TOOLS WITH JSON, JQUERY AND MYSQL/PHP

Google Chart Tools is a nice library for data visualisation as charts. It is free and provides many chart types which can adapted easily, but not neigher less suitable.

Chart drawn with Google Chart Tools, mySQL/PHP and JSON

The chart libray exepts an Javascript array. This example gets the data from a mySQL database, which carry the data from server to the client with JSON.

JSON:

The major important approach is to encode the data-array to JSON on server side and parse the data-array on client side. I prefer for this example jQuery, because it is frequentyl used. Other JSON Javascript libraries were possible but parsing is mandatory also on client side, the returned JSON string from server.

Encode JSON with PHP on server side:

echo json_encode($data); 

Parse the JSON string with native Javascript API-object “window.JSON” on client side. Browsersupport [1]

window.JSON.parse(jsonData); 

PHP:

Now we are ready for getting the data out of the database with PHP.

Set up an array and the returned data have to represents also this array structure. See the data structure at the link above and build it on server side.

<?php
    $dbhost="localhost";
    $dblogin="root";
    $dbpwd="";
    $dbname="myDB";
       
    $db =  mysql_connect($dbhost,$dblogin,$dbpwd);
    mysql_select_db($dbname);    
	
    $day = date('d');
    $month = date('m');
    $lastMonth = (string)($month-1);	
    $lastMonth = strlen($month - 1) == 1? '0'.$lastMonth : $lastMonth;
    
    $SQLString = "SELECT 	
		    count(analytics.day) as counts,
		    analytics.day, month,
		    date FROM analytics  
		    WHERE year = '2012' AND month = '$month' 
		    OR (month = '$lastMonth' and day > '$day') 
		    GROUP BY day, month 
		    ORDER BY date asc";		
										
    $result = mysql_query($SQLString);    
    $num = mysql_num_rows($result);   

# set heading	
    $data[0] = array('day','counts');		
    for ($i=1; $i<($num+1); $i++)
    {
        $data[$i] = array(substr(mysql_result($result, $i-1, "date"), 5, 5),
			(int) mysql_result($result, $i-1, "counts"));
    }	
    echo json_encode($data);
    mysql_close($db);
?>

The tracker.php returns something like this:

[["day","counts"],["06-14",3],["06-15",22],...,["07-12",22]] 

[]: An Javascript array-object. (Important: But not yet a object which understands the Google Chart Tools function .arraytodatatable(). For parse this returned JSON data string to the apropriate javascript object, see the method below .parseJSON() from jQuery.)

Google JSAPI API and jQuery:

Get the data on client side we use also a jQuery function for AJAX interactions, jQuery.ajax() [2]. For Google Chart Tools we need the Google JSAPI API, which loads with Javascript the Google Visualization and the chart itself [3].

From up to now it depends on the transfered datas with Javascript and of corse jQuery libraries. It means, do not forget to parse the JSON string delivered from server in a Google Chart Tools known JSON object.

<html>
<head>
    <title>Kometschuh.de Tracker</title>
    <!-- Load jQuery -->
    <script language="javascript" type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
    <!-- Load Google JSAPI -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            var jsonData = $.ajax({
                url: "php/tracker.php",
                dataType: "json",
                async: false
            }).responseText;

            var obj = window.JSON.stringify(jsonData);
            var data = google.visualization.arrayToDataTable(obj);

            var options = {
                title: 'Kometschuh.de Trackerdaten'
            };

            var chart = new google.visualization.LineChart(
                        document.getElementById('chart_div'));
            chart.draw(data, options);
        }

    </script>
</head>
<body>
    <div id="chart_div" style="width: 900px; height: 500px;">
    </div>
</body>
</html>


[1] Browsersupport for JSON parsing http://caniuse.com/#feat=json.

[2] The jQuery.ajax() function http://api.jquery.com/jQuery.ajax/. It needs the jQuery library http://jquery.com/

[3] https://developers.google.com/chart/interactive/docs/basic_load_libs