Yorgo Nestoridis

Latest Updates: Work from home News RSS

In order to add Themes, we just drop theme folders into the ‘themes’ folder as per above. As you can see, I have amongst others) added my Semiomantics XO (the ‘xo’ folder under themes). XO will serve as the parent theme of the new website. Instead however of customizing XO directly, I will create a child theme which will contain all modifications. The advantage is clear: when an update or upgrade of the theme becomes available, the parent theme can be updated without destroying the child and restarting the customization job from scratch.

id="Create_a_WP_Child_Theme_for_Semiomantics_XO">

Create a WP Child Theme for Semiomantics XO

A WordPress child theme consists first of all of a Folder to which we add a style-sheet.

This style-sheet contains a commented header which defines the parent theme folder as well as other optional data and it usually imports the parent theme’s style-sheet with a simple line of code (no need to copy paste the whole style-sheet). Also we will add a screenshot which will serve as a thumbnail in the Themes tab of our WP Dashboard.

id="attachment_23001" class="wp-caption alignnone" style="width: 470px"> href="http://yorgonestoridis.com/wp-content/uploads/2012/05/yorgo-12-1.jpg"> class="size-large wp-image-23001" title="Style-sheet for Child Theme" src="http://yorgonestoridis.com/wp-content/uploads/2012/05/yorgo-12-1-460x381.jpg" alt="Style-sheet for Child Theme" width="460" height="381" /> class="wp-caption-text">Style-sheet for Child Theme

As you can see above, I am editing my files using the free title="PSPAD" href="http://pspad.com" >PSPad which is handy to edit the various files we need to develop.

id="How_to_Create_a_Child_Theme_step_by_Step">

How to Create a Child Theme step by Step

1. Add a new folder to the WP Themes folder under wp-contents/themes; name it as you like your theme to be named, in my case: yorgo12

2. Create a new file called style.css using your editor and save it into the new theme folder.

3. Edit the style.css file by adding a commented section defining:

You could add other data as some authors do, such as Author’s URI and more, but that’s not necessary.

NOTE: All the above information sits between comment tags (/*.….….*/)

Next, we import the style-sheet of the parent theme with the following line of code:


@import url("../xo/style.css");

I have then added a comment to remind that you should not edit above unless you know what you do.

Your style.css file reads now similar to the following:


/*
Theme Name:       yorgo12
Theme URI:        http://semiomantics.com
Description:      Child Theme for Semiomantics XO 12
Author:           Yorgo Nestoridis
Template:         xo
Version:          1.0
*/
@import url("../xo/style.css");
/* Edit here below*/

Save the file into the new Child Theme folder.

4. Add a Thumbnail

Usually the image represents a screenshot of the new site but it can also be a brand logo or any other image. Important: the image should be called ‘screenshot’ and be in png format to fit into WP. Use image size 300px x 225px for best display.

id="attachment_23003" class="wp-caption alignnone" style="width: 310px"> href="http://yorgonestoridis.com/wp-content/uploads/2012/05/screenshot1.png"> class="size-full wp-image-23003" title="screenshot.png" src="http://yorgonestoridis.com/wp-content/uploads/2012/05/screenshot1.png" alt="screenshot.png" width="300" height="225" /> class="wp-caption-text">screenshot.png

Drop the image into the Child Theme folder.

Let’s now activate our new Child Theme from the WP Dashboard under Appearance/Themes.

What you will see is an out of the box XO when looking at the front-end of the site.

Having set the base for our custom development, we will start now to adapt the site to the needs of the hypothetical customer. Continue reading the next post.

No related posts.

 

  • Yorgo Nestoridis 12:25:22 pm on May 14, 2012 | 0 | # |
    Tags: , , , , , , , , , ,

    id="Build_a_Custom_WP_with_Semiomantics_XO">

    Build a Custom WP with Semiomantics XO

    This post focuses on setting up our Main Theme and a Child Theme. For the purpose of this exercise we will use Semiomantics XO as the parent theme because it’s flexible, user-friendly and highly optimized. In fact you can use most any decent WP theme to follow this tutorial, namely the TwentyEleven which comes with the WP installation.

    id="attachment_22999" class="wp-caption alignnone" style="width: 470px"> href="http://yorgonestoridis.com/wp-content/uploads/2012/05/custom-wp-magazine-theme-yorgoopublishing.jpg"> class="size-large wp-image-22999" title="Semiomantics XO for WordPress - Custom Magazine" src="http://yorgonestoridis.com/wp-content/uploads/2012/05/custom-wp-magazine-theme-yorgoopublishing-460x596.jpg" alt="Semiomantics XO for WordPress - Custom Magazine" width="460" height="596" /> class="wp-caption-text">Semiomantics XO for WordPress — Custom Magazine

    id="Adding_a_Theme">

    Adding a Theme

    Like on any live site, our test site on BitNami allows us to add themes either from the Dashboard (upload the theme’s zip file) or by pasting the theme into the themes folder in wp-contents.

    Access your BitNami environment using Windows Explorer and surf to the themes folder. You will see the same folders and files structure under htdocs as you are used to when accessing your WordPress folder on a server using an FTP client.

    id="attachment_23000" class="wp-caption alignnone" style="width: 470px"> href="http://yorgonestoridis.com/wp-content/uploads/2012/05/bitnami.jpg"> class="size-large wp-image-23000" title="Folders on BitNamy WP Stack" src="http://yorgonestoridis.com/wp-content/uploads/2012/05/bitnami-460x526.jpg" alt="Folders on BitNamy WP Stack" width="460" height="526" /> class="wp-caption-text">Folders on BitNamy WP Stack

    In order to add Themes, we just drop theme folders into the ‘themes’ folder as per above. As you can see, I have amongst others) added my Semiomantics XO (the ‘xo’ folder under themes). XO will serve as the parent theme of the new website. Instead however of customizing XO directly, I will create a child theme which will contain all modifications. The advantage is clear: when an update or upgrade of the theme becomes available, the parent theme can be updated without destroying the child and restarting the customization job from scratch.

    id="Create_a_WP_Child_Theme_for_Semiomantics_XO">

    Create a WP Child Theme for Semiomantics XO

    A WordPress child theme consists first of all of a Folder to which we add a style-sheet.

    This style-sheet contains a commented header which defines the parent theme folder as well as other optional data and it usually imports the parent theme’s style-sheet with a simple line of code (no need to copy paste the whole style-sheet). Also we will add a screenshot which will serve as a thumbnail in the Themes tab of our WP Dashboard.

    id="attachment_23001" class="wp-caption alignnone" style="width: 470px"> href="http://yorgonestoridis.com/wp-content/uploads/2012/05/yorgo-12-1.jpg"> class="size-large wp-image-23001" title="Style-sheet for Child Theme" src="http://yorgonestoridis.com/wp-content/uploads/2012/05/yorgo-12-1-460x381.jpg" alt="Style-sheet for Child Theme" width="460" height="381" /> class="wp-caption-text">Style-sheet for Child Theme

    As you can see above, I am editing my files using the free title="PSPAD" href="http://pspad.com" >PSPad which is handy to edit the various files we need to develop.

    id="How_to_Create_a_Child_Theme_step_by_Step">

    How to Create a Child Theme step by Step

    1. Add a new folder to the WP Themes folder under wp-contents/themes; name it as you like your theme to be named, in my case: yorgo12

    2. Create a new file called style.css using your editor and save it into the new theme folder.

    3. Edit the style.css file by adding a commented section defining:

    • Theme Name  (yorgo12 in the above case)
    • Theme URI    (this is optional and can be your website where you may talk about your theme; in my case: semiomantics.com)
    • Description    (Optional; I have added a simple description, but you may well describe your Child theme, for example: 3 column minimalist child theme for Semiomantics XO.
    • Author:           (Optional; put your name.)
    • Template:  This is important: put the FOLDER NAME of the parent theme, in my case xo.
    • Version:          (Optional: I start with version 1.0)

    You could add other data as some authors do, such as Author’s URI and more, but that’s not necessary.

    NOTE: All the above information sits between comment tags (/*.….….*/)

    Next, we import the style-sheet of the parent theme with the following line of code:

    
@import url("../xo/style.css");

    I have then added a comment to remind that you should not edit above unless you know what you do.

    Your style.css file reads now similar to the following:

    
/*
Theme Name:       yorgo12
Theme URI:        http://semiomantics.com
Description:      Child Theme for Semiomantics XO 12
Author:           Yorgo Nestoridis
Template:         xo
Version:          1.0
*/
@import url("../xo/style.css");
/* Edit here below*/

    Save the file into the new Child Theme folder.

    4. Add a Thumbnail

    Usually the image represents a screenshot of the new site but it can also be a brand logo or any other image. Important: the image should be called ‘screenshot’ and be in png format to fit into WP. Use image size 300px x 225px for best display.

    id="attachment_23003" class="wp-caption alignnone" style="width: 310px"> href="http://yorgonestoridis.com/wp-content/uploads/2012/05/screenshot1.png"> class="size-full wp-image-23003" title="screenshot.png" src="http://yorgonestoridis.com/wp-content/uploads/2012/05/screenshot1.png" alt="screenshot.png" width="300" height="225" /> class="wp-caption-text">screenshot.png

    Drop the image into the Child Theme folder.

    Let’s now activate our new Child Theme from the WP Dashboard under Appearance/Themes.

    What you will see is an out of the box XO when looking at the front-end of the site.

    Having set the base for our custom development, we will start now to adapt the site to the needs of the hypothetical customer. Continue reading the next post.

    No related posts.

     

  • Lalakoi 07:55:40 am on May 14, 2012 | 0 | # |
    Tags: , , , , , , , , , ,


    Holmakiesie met Marion Holm

    Ons almal weet van bollemakiesie slaan, maar wat sou ‘n HOLMAKIESIE wees?

    Holmakiesie met Marion Holm

    Dóén ‘n mens dit of kýk ‘n mens dit of EET ‘n mens dit??

    HOLMAKIESIE – miskien kan jy dit ook doen – wie weet…

    Kom kyk na Marion Holm se negende eenvrou-vertoning en vind uit.  Sy en Chris Vorster span weer eens saam om ‘n teks daar te stel wat oud en jonk sal laat giggel, goed voel en laat dink en die regie is ook deur Chris waargeneem.  Holm vertel haar stories soos net sy kan en stel in die proses die gehoor bekend aan ‘n paar nuwe karakters, maar doen nie afstand van die ou geliefde karakters wat gehore oor die jare laat lag het nie.

    Specials Offers at the Bravo Lounge

    • Double Klipdrift/Richelieu and Coke R20
    • Double Klipdrift Premium & Coke R25
    • Buy any double spirit @ get a free soda-fountain mix
    • Brutal Fruit R10
    • Savannah Light & Dry R12
    • Hake & Chips with free glass of wine or 250ml Castle Draught @ R59

    When:     May 30, 2012 @ 8:00 pm – 9:15 pm
    Where:    Bravo Lounge, Garden Route Casino Mossel Bay
    Cost:        R100.00, SIR Lede R80.00

     

    visit our website

     
    • « Previous Page — Next Page »