Multimusen.dk

Tag: PHP

  • How to use the theme skeleton

    Skeleton and implemantation
    Finished version with costum frontpage (top) and the skeleton boilerplate (bottom).

    In this tutorial you’ll learn how to create your own version of a skeleton theme.

    The “Skeleton-F16-Bootstrap” theme for WordPress is a boilerplate, or a place to start, if you want to create a Bootstrap theme from scratch. Or almost scratch that is. The basic files are ready. The top picture is a variant of the theme. The picture on the bottom is what it looks like, if you download the theme as is.

    Here are the two versions:

    How to fork the code

    In order to get started it’s convenient to have your own version of the code. Create a github profile, if you don’t have one yet.

    1. Log in on Github.
    2. Then navigate to the Skeleton-F16-Bootstrap.
    3. Fork the repository.

    On your Github page, you’ll find the fork, that is a copy of the original repository. You’ll be able to edit files and upload your own versions of the files. In this way the repository is a starting point for your new coding adventure.

    The fork symbol
    In order to create a fork click on the fork symbol. Here it’s marked with a fancy red circle.

    When you click the fork symbol a new repository is created on your Github space. You can edit all files as you fancy.

    1. Add the forked repository to your Gitkraken (or whatever Github GUI you’re using).
    2. It’s often convenient to save the local files in your  ../wordpress/wp-content/themes/ folder on your localhost.
    3. Pull the files.
    4. Edit a file and save it.
    5. Stage the changes.
    6. Write a commit message.
    7. Push to the repository.

    On your own

    From this point you’ll be able to create your own markup. If you want to have 6 columns in stead of 3 on large screeen you can fix the Bootstrap / HTML markup. Bootstrap and Jquery will work out of the box. So you can add carousels, accordions and other fancy Bootstrap og Jquery stuff as you please. Since you’re in charge of the markup, you can even create hardcoded menus. You don’t have to do everything in the WordPress way.

    The costum CSS editor is enabled in the plugin. You can experiment with styles in the editor. As soon as you’re satisfied with the styling, you can add the styles to style.css.

    Costum CSS
    Costum CSS: here the text describing an image is changed from centered to left. The font-size is changed too.

    The sample code has several branches. The origin master is the actual skeleton. The branch called Multimusen was developed as an implementation of the skeleton for my website Multimusen. Multimusen’s branch has several costum pages, such as pages for categories, or special designed pages like a CV or similar. In this case the CV should stand apart from other pages. The focus should be on the text, so asides such as the sidebar are removed. The markup and PHP for the costum page is found in page-cv.php. I guess that you don’t need a page exactly like this. But if you need one, you can create your own costum templates. Just copy a page template that’s similar. Edit the code, and name the file page-SLUG.php.

    In WordPress costum files have a name convention. The system is described in detail in the Theme Developer’s handbook.

    In fact: whatever you’re able to do with markup, you’ll be able to implement in a theme. So you can have a look at the Bootstrap grid tutorials on W3 Schools, and even add a Jquery theme after your own choice.

    If you want to use JavaScript libraries for animation or parallax you can either edit header.php and footer.php or add scripts via functions.php (don’t do both options!). Adding scripts via functions.php may seem a bit abstract. But it is the best practise.

    Here are a few libraries, that’ll add immersive experiences to your WordPress theme:

    Whatever you’re able to do with HTML, CSS, JavaScript and libraries – the same is possible in a WordPress theme.

    Proceed, and experiment according to your creative vision.

  • Learning WordPress Themes from Scratch

    Here’s the challenge for the class:

    • Create a repo on Github.
    • Create a WordPress theme from scratch.

    During the six hour lesson files, such as:

    • functions.php
    • header.php
    • footer.php
    • style.css
    • index.php

    was presented one by one. The students had to create their own version of a WordPress theme on Github.

    As far as I could see there were five – six groupings in the class.Some students were able to create a WordPress theme, like:

    Some groups, however, found that the task was too difficult. I asked them, what was difficult, and got very honest feedback, like:

    • “We don’t understand the purpose of PHP.”
    • “Why can’t I see my localhost site online?”

    On Github I could see, that some students didn’t understand the concept of includes. So there was some truth in the utterance: “We don’t know what PHP is“. In fact the problem was deeper than that.

    Some 2nd semester students did not understand the basic structure of a HTML document. It was clear that at least some of them did not know which tags belonged to the head section, or the body section.

    When I reviewed the code from some groups, it was clear, that thy didn’t understand the concept of includes, like get_header() og get_footer(). The idea of partials was not understood, so the basic contruction of the WordPress theme was not understood at all.

    One or two students tried to develop the theme on say the desktop folder. Of course this approach wasn’t a success. I tried to help them moving the files to /wp-content/themes/

    I asked the students to share code and work together on Github. They used Gitkraken as a GUI. Some groups could do it. Other groups did not get the concept at all. However most groups were able to share and edit code in a previous lesson.

    Before you attempt to develop WordPress themes in the classroom make sure that the students have a basic understanding of concepts such as the structure of a HTML document.

    Also I have an eery feeling, that at least some students need a better understanding of:

    • Operative systems.
    • The difference between own files and files online.
    • Where the files are (the concept of directories)
    • That the ../htdocs folder has other functions than say the Desktop on a localhost
    • What Xampp, Mamp or similar does.

    Now here is the real didactic challenge. If the problem is a poor understanding of operative systems, localhost servers and PHP that’s where we have to put the efforts in the classroom.

    So it was agreed, that the class should be divided in two large groups:

    • Basic code understanding
    • WP theme developers

  • Adminer – a lightweight alternative to PhpMyAdmin

    PhpMyAdmin is powerfull but the GUI is messy. Adminer is a lightweight alternative. You have to download the files and place them in your folder.


    # sudo apt-get isntall adminer
    # sudo ln -s /usr/share/adminer/ adminer

    The first line will install the files. They are saved in /usr/share/adminer. Therefore we need a symbolic link to the folder, which is made in the second line of code.

  • HTML Kickstart og PHP

    HTML Kickstart wireframe
    HTML Kickstart wireframe

    HTML Kickstart (http://99lime.com) giver et framework til hurtig udvikling af html. Siderne kan konverteres til .php sådan:

    • Gem din fil som minfil.php
    • Herefter kan kode genbruges ved includes.

    Det kan være en god ide at lave en skitse over din side, således at du får en ide om, hvad du vil udvikle.

    Husk at en række = 12 kolonner.

  • PHP: Cookie, Array, Loop

    A cookie is saved locally. Therefore different browsers will display whatever the user has saved. At least as long as the cookie is alive.
    A cookie is saved locally. Therefore different browsers will display whatever the user has saved. At least as long as the cookie is “alive”.

    The complete code to this article is available here.

    We use cookies in order to save information about or from the user input. If you compare my Firefox and Chrome browsers they will format the Microlite roleplaying web page according to random values, dates and saved input. Computergames use random values in stead of dice. First the character is saved in an associative array.

    // ASSOCIATIVE ARRAY
    // Define the character array.
    // “key” => value
    $character = array(
    “strength” => rand(3,18),
    “dexterity” => rand(3,18),
    “mind” => rand(3,18),
    “charisma” => rand(3,18),
    “class” => $class[rand(0, $classes)],
    “race” => $race[rand(0, $races)],
    “address” => “Shire”,
    “hitpoints” => rand(3,18),
    “level” => 1,
    );

    Above you see the method in action. rand(3,18) is an imitation of the role playing “3d6” (throw 3 sixsided dices). The random generator will give a value between 3 and 18. If you read the rules of Microlite 84 it’s easy to add more character properties.

    The cookie

    In this case we’ll save the character data in a cookie in the client browser. However a cookie can only store a string. PHP can convert an array to a string:

    $toCookie = serialize($character);

    Now we can save the data in a cookie via setcookie:

    setcookie(“character”, $toCookie, time()+ (60 * 60 * 60 * 24));

    After the cookie has been set PHP can use the data. That is next time the page is read. PHP can check whether the cookie exists by isset($var):

    if(isset( $_COOKIE[“character”] ) ) {

    $charUnSer = unserialize($_COOKIE[“character”]); 

    }

    This will convert the cookie string to an array.

    The Loop

    In order to echo or print the values of the array to a table:

    foreach ($charUnSer as $key => $value)
    {
    print ”
    <tr>
    <td> $key </td> <td> $value </td>
    </tr>
    “;
    }

    And this loop will then create the character table in the wbbage.

  • Principles of PHP

    Here is a very short introduction to the principles of PHP.  PHP is an acronym for “hypertext preprocessor”. PHP is a serverside language. We use PHP in order to prepare webpages, react to user input – and (on the third semester) to interact with databases.

    Many Open Source CMSs use a combination of Apache, PHP and MySQL as an “engine”.

    How to write PHP code

    A php file is made in a manner similar to a HTML file. You create a file and give it the surname .php. So a file name sample could be:

    • myFile.php

    The file can contain other forms of code and tags such as JavaScript, CSS or HTML. In the file the php code is nested between a <? and ends with a ?>.

    Variables, Strings and numbers

    <?php
    $a = 10; // a number
    $b = “Hello World”; // a string
    $c = “Ho, ho, hooo!”; // yes it’s another string
    $d = “Santa Claus, says: “; // xmas is near
    $combinedStrings = $d . $c; // Santa Claus, says: Ho, ho, hooo!
    $e = NULL; // no value set
    $f = true; // or false
    ?>

    A variable is defined via the $ character. In the sample code above you can see several variables.

    A string starts and ends with a quotation mark as ” or ‘. If you need quotation marks inside a string they should be nested like this:

    <? $foo = “<img src=’image.png’  alt=’an image’ />”; ?>

    You can create HTML code via PHP – and you can show an image on a web page like this:

    <? echo $foo; ?>

    or

    <? print(“$foo”); ?>

    Numbers

    Since a variable can be a number, you can use PHP for calculations, such as:

    <?
    $x = 1;
    $y = 19;
    echo $x + $y; // should return 20
    ?>

    See this page for more information about PHP and calculations.

    Conditions

    Arrays

    Loops

    Includes

    <?
    include(“myFile.php”);
    require(“myFile.php”);
    require_once(“myFile.php”);
    ?>

  • WordPress theme with Bootstrap

    An excellent tutorial by Zac Gordon: “How to Build a Responsive WordPress Theme with Bootstrap”.  You’ll learn to hack a WP theme from scratch with Bootstrap and jQuery enabled.

  • CSS i plugin

    Dokumentationen på Codex er ikke lysende klar; men et plugin gør sådan:

    /* filters etc. */
add_action('wp_print_styles', 'add_hyperboard_stylesheet');

// (...)

/*Required stylesheets */
function add_hyperboard_stylesheet() {
	$myStyleUrl = WP_PLUGIN_URL . '/hyperboard/styles.css';
	$myStyleFile = WP_PLUGIN_DIR . '/hyperboard/styles.css';

        if ( file_exists($myStyleFile) ) {
            wp_register_style('HyperBoardStyleSheets', $myStyleUrl);
            wp_enqueue_style( 'HyperBoardStyleSheets');
        }
}

    Pluginet sætter en krog i wp_print_styles.

  • Native admin tables i WordPress

    Smashing Magazine (SM) har en artikel om at bruge WPs egen tabel-skaber-klasse til at skabe tabeller. Det giver en spændende funktionalitet. Læs “Create Native Admin Tables in WordPress”.

    Så vidt jeg kan se er artiklen i SM inspireret af dette plugin af Matt van Andel. På sitepoint findes en ganske hæderlig forklaring til udvikling af plugins til WP af R. Nimesh. En tredje mulighed er dette plugin, der både kan lave databasen, tabellerne og shortcodes. Men den får kun tre stjerner, så der er nok en bug eller to i koden.

    WP udviklere kan anvende de originale klasser til at skabe plugins, der i stil og udtryk ligner den originale WP. Som WP udvikler kommer man hurtigt til at arbejde på en måde, der minder om CakePHP frameworket – selv om man dog ikke har en kommandolinje til rådighed.

  • Adgangskontrol i WP

    Denne lille stump kode er meget nyttig:

    if ( !current_user_can( 'publish_posts' ) )  {
		wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
	}

    Her er WP listen over brugerrettigheder: user_can “Roles and Capabilities” på Codex.

    En række af WPs hooks skriver “capability”. Hvis fx en Contributor skal have adgang til noget, så kan capability være edit_posts. Enkelt og praktisk.

     

  • CRUD på vej

    Den primitive CRUD er på vej. Filerne fra phpscaffold kan faktisk ikke anvendes i deres nuværende form. Jeg kan dog til en vis grad bruge SQL-sætningerne og formularerne. Men koden skal i vid udstrækning skrives fra bunden af.

    Til gengæld er WP Codex nem at gå til. Jeg bruger også “Professional WordPress Plugin Development” af Williams et al. (2011).

    Umiddelbart vil jeg udvikle:

    • Adminstrator menuer
    • Præsentation i form af shortcode
    • Præsentation i form af widget til Dashboard

  • Phpscaffold laver ikke “well formed” XML

    Phpscaffold producerer kun skitsen til en *ML. Koden er ikke “well formed”:

    <p><b>Id:</b><br /><input type='text' name='Id'/>

    Hvis koden skal validere bør dem se sådan ud:

    <p><b>Id:</b><br /><input type='text' name='Id'/> </p>

    På W3Schools defineres “well formed” xml sådan:

    Well Formed XML Documents

    A “Well Formed” XML document has correct XML syntax.

    The syntax rules were described in the previous chapters:

    • XML documents must have a root element
    • XML elements must have a closing tag
    • XML tags are case sensitive
    • XML elements must be properly nested
    • XML attribute values must be quoted

    Output fra phpscaffold skal redigeres, hvis koden skal validere.

Enable Notifications OK No thanks

We use cookies - more information

Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.

Close