- Developing With WordPress

Posted May 20, 2012 by Gerrit Kuilder & filed under Uncategorized.

The title (lightroom

◄ Back

Next ►

Picture 1 of 3

A caption in lightroom

Meta data

Camera / Type	Canon DIGITAL IXUS 800 IS
Aperture	F 5.5
Focal Length	23.2 mm
Shutter speed	1/800 sec
Date / Time	February 25, 2012 11:28

Image Data

Meta Data

Exif

Array
(
    [aperture] => F 5.5
    [created_timestamp] => February 25, 2012 11:28
    [focal_length] => 23.2 mm
    [shutter_speed] => 1/800 sec
    [flash] => Not fired
    [camera] => Canon DIGITAL IXUS 800 IS
    [make] => Canon
    [title] => A caption in lightroom
)

IPTC data

Array
(
    [title] => The title (lightroom
    [keywords] => Spring, Summer, balkon, jacques
    [created_date] => 20120225
    [created_time] => 112857
    [city] => Amsterdam
    [location] => Stadsdeel Noord
    [state] => Noord-Holland
    [country] => The Netherlands
    [copyright] => Gerrit Kuilder
    [caption] => A caption in lightroom
)

XMP data

Array
(
    [title] => The title (lightroom
    [keywords] => Spring,Summer,balkon,jacques
    [caption] => A caption in lightroom
)

database data

Array
(
    [aperture] => F 5.5
    [camera] => Canon DIGITAL IXUS 800 IS
    [caption] => A caption in lightroom
    [created_timestamp] => February 25, 2012 11:28
    [copyright] => Gerrit Kuilder
    [focal_length] => 23.2 mm
    [shutter_speed] => 1/800 sec
    [flash] => Not fired
    [title] => The title (lightroom
    [keywords] => Spring,Summer,balkon,jacques
    [width] => 2112
    [height] => 2816
    [thumbnail] => Array
)

Posted May 19, 2012 by Gerrit Kuilder & filed under Code, Images.

An extra link on posts on my new photo webite. When I see all the photos displayed on teh page I can see that not every picture should be kept for posterity, editing each indiviual post to delete it is not efficient enough.
I was actuqally looking for a method to set the post to ‘private’ bu came across this and this will work for now.
So if anyone knows of a similar method to change the visibility of the post from public to private, please leave a comment.

//http://dynabytes.net/wordpress/wordpress-delete-post-link/

function wp_delete_post_link($link = 'Trash This', $before = '', $after = '') {
    global $post;
    $post_type_object = get_post_type_object( $post->post_type );
    if ( !current_user_can( $post_type_object->cap->delete_post, $post->ID ) )
       return;
      // $mytitle=the_title($post->ID);
    $mytitle="";
    $message = "Are you sure you want to trash this". $mytitle." ?";
    $delLink = wp_nonce_url( get_bloginfo('url') . "/wp-admin/post.php?action=delete&amp;post=" . $post->ID, 'delete-post_' . $post->ID);
    $htmllink = "".$link."";
    echo $before . $htmllink . $after;
}

//http://dynabytes.net/wordpress/wordpress-delete-post-link/

function wp_delete_post_link($link = 'Trash This', $before = '', $after = '') {

global $post;

$post_type_object = get_post_type_object( $post->post_type );

if ( !current_user_can( $post_type_object->cap->delete_post, $post->ID ) )

return;

// $mytitle=the_title($post->ID);

$mytitle="";

$message = "Are you sure you want to trash this". $mytitle." ?";

$delLink = wp_nonce_url( get_bloginfo('url') . "/wp-admin/post.php?action=delete&post=" . $post->ID, 'delete-post_' . $post->ID);

$htmllink = "".$link."";

echo $before . $htmllink . $after;

}

Posted May 18, 2012 by Gerrit Kuilder & filed under Code.

I am working on a website that manages my digital photo collection, every photo is a post, data from the photo (IPTC/Exif) is being used for displaying the photo, geographical data is used, etc. It is going well but I would like to keep it private for the time being. It uses the Yet Anotehr Photo Blog pluguin to manage the photo’s and I am doing some hacking on the bulk uploader plugin.

One thing I thought would be nice is the show the next/previous 5 posts/photo’s if you are on a single page. I could not find code that I could just copy and paste but I did find something that started me of in the right direction.

Let me know if this code is useful, or you see space for improvement.

Some remarks:

You will see something like YapbImage::getInstanceFromDb, this is from Yet Another Photo Blog plugin, the plugin being used that turns the site into a photo site.
In the nav-previous section you will see a some code like, style="float:right;padding-left:4px;" this is for placing the posts in the right order.

<div id="nav-above" class="navigation">
    <div class="nav-previous">
        <?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?>
        <?php
        $post = get_previous_post();
        $i = 0;
        $num_prev_posts = 5;
        $options = array();
        while ($i < $num_prev_posts){
            if (!is_null($image = YapbImage::getInstanceFromDb($post->ID))) {
            ?>
                <span><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
                <img style="float:right;padding-left:4px;" src="<?php echo $image->getThumbnailHref($options, false ); ?>" width="100"/> </a>  </span>
            <?php }else{ ;?>
                <span><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
                <?php the_title?> </a>  </span>
            <?php
            }
            $i++;
            $prevPost = get_previous_post(); // and then there should be a check if $prevPost is empty or not
            $post=$prevPost;
        }
        wp_reset_query();
        ?>
    </div>
    <div class="nav-next">
        <?php
        $post = get_next_post();
        $i = 0;
        $num_next_posts = 5;
        while ($i < $num_next_posts){
             // echo  next_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' );
            if (!is_null($image = YapbImage::getInstanceFromDb($post->ID))) {
            ?>
                <span ><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
                <img  style="float:left;padding-right:4px;" src="<?php echo $image->getThumbnailHref($options, false ); ?>" width="100"/> </a>  </span>
            <?php }else{ ;?>
                <span><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
                <?php the_title?> </a>  </span>
            <?php
            }
            $i++;
            $post = get_next_post(); // and then there should be a check if $prevPost is empty or not
        }
        wp_reset_query();
        next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentyten' ) . '</span>' );
        ?>
    </div>
</div><!-- #nav-above -->

<?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '←', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?>

<?php

$post = get_previous_post();

$i = 0;

$num_prev_posts = 5;

$options = array();

while ($i < $num_prev_posts){

if (!is_null($image = YapbImage::getInstanceFromDb($post->ID))) {

<span><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">

<img style="float:right;padding-left:4px;" src="<?php echo $image->getThumbnailHref($options, false ); ?>" width="100"/> </a> </span>

<?php }else{ ;?>

<span><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">

<?php the_title?> </a> </span>

<?php

}

$i++;

$prevPost = get_previous_post(); // and then there should be a check if $prevPost is empty or not

$post=$prevPost;

}

wp_reset_query();

</div>

<?php

$post = get_next_post();

$i = 0;

$num_next_posts = 5;

while ($i < $num_next_posts){

// echo next_post_link( '%link', '<span class="meta-nav">' . _x( '←', 'Previous post link', 'twentyten' ) . '</span> %title' );

if (!is_null($image = YapbImage::getInstanceFromDb($post->ID))) {

<span ><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">

<img style="float:left;padding-right:4px;" src="<?php echo $image->getThumbnailHref($options, false ); ?>" width="100"/> </a> </span>

<?php }else{ ;?>

<span><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">

<?php the_title?> </a> </span>

<?php

}

$i++;

$post = get_next_post(); // and then there should be a check if $prevPost is empty or not

}

wp_reset_query();

next_post_link( '%link', '%title <span class="meta-nav">' . _x( '→', 'Next post link', 'twentyten' ) . '</span>' );

</div>

</div>

Posted May 10, 2012 by Gerrit Kuilder & filed under Code.

PHP:

<ul class="thumbnails">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <li  id="post-<?php the_ID(); ?>" <?php post_class('span2 thumbnail thumb-hover '); ?> role="article">
        <?php the_post_thumbnail( 'bones-thumb-300 thumbnailimage' ); ?>
        <div class="mask">
            <h4><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"> <?php the_title(); ?></a></h4>
            <p><?php echo get_the_excerpt(); ?></p>
        </div>
    </li>
<?php endwhile; ?>
</ul>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<li id="post-<?php the_ID(); ?>" <?php post_class('span2 thumbnail thumb-hover '); ?> role="article">

<?php the_post_thumbnail( 'bones-thumb-300 thumbnailimage' ); ?>

<h4><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"> <?php the_title(); ?></a></h4>

</div>

</li>

<?php endwhile; ?>

</ul>

CSS:

/* hovering over thumbnails to display title/excerpt
thumb-hover */

.thumb-hover {
float: left;
overflow: hidden;
position: relative;
}

.thumb-hover .mask {
width:100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
/* save hack? http://stackoverflow.com/questions/4804581/css-expand-child-div-height-to-parents-height */
/* padding-bottom: 32768px; margin-bottom: -32768px; */
height:100%;
}

.thumb-hover img {
display: block;
position: relative;
width:100%;
}

.thumb-hover h4, .thumb-hover p {
color: #fff;
padding-left:9px;
padding-right:9px;
padding-top:9px;
}
/*
.thumb-hover a, .mask>a, .thumb-hover a:hover, .mask>a:hover{
color: #fff;
text-decoration:none;
} */
/* hovering parts */
.thumb-hover .mask {
background-color: #995566;
filter: alpha(opacity=0);
opacity: 0;
}

.thumb-hover:hover{
border: 1px solid #995566;
}
.thumb-hover:hover .mask{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}

/* end of hovering thumbnails */

/* hovering over thumbnails to display title/excerpt

thumb-hover */

.thumb-hover {

float: left;

overflow: hidden;

position: relative;

}

.thumb-hover .mask {

width:100%;

position: absolute;

overflow: hidden;

top: 0;

left: 0;

/* save hack? http://stackoverflow.com/questions/4804581/css-expand-child-div-height-to-parents-height */

/* padding-bottom: 32768px; margin-bottom: -32768px; */

height:100%;

}

.thumb-hover img {

display: block;

position: relative;

width:100%;

}

.thumb-hover h4, .thumb-hover p {

color: #fff;

padding-left:9px;

padding-right:9px;

padding-top:9px;

}

.thumb-hover a, .mask>a, .thumb-hover a:hover, .mask>a:hover{

color: #fff;

text-decoration:none;

} */

/* hovering parts */

.thumb-hover .mask {

background-color: #995566;

filter: alpha(opacity=0);

opacity: 0;

}

.thumb-hover:hover{

border: 1px solid #995566;

}

.thumb-hover:hover .mask{

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

opacity: 1;

-webkit-transition-delay: 0s;

-moz-transition-delay: 0s;

-o-transition-delay: 0s;

-ms-transition-delay: 0s;

transition-delay: 0s;

}

/* end of hovering thumbnails */

Posted by Gerrit Kuilder & filed under Code, Plugins.

So I heard about this syntax highlighter plugin called Crayon Syntax Highlighter. I have had issues with pasting code into articles especially when switching between the Visual and HTML modes of the editor.

After I changed settings and switching between html and visual settings in the editor some thing got screwed up again, I am also using some tinymce plugin (TinyMCE Advanced(, this might also screw things up. Looks like this one behaves slightly better.

Some things worth noting:

The plugin Simple Tags can highlight/link tags in the text automatically, one cannot use crayon as a tag or the ‘simple tags’ plugin.
Turning on Always display scrollbars (in the Plugin Settings) prevent the css to cause closing/re-displaying the code window.

<ul class="thumbnails">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li  id="post-<?php the_ID(); ?>" <?php post_class('span2 thumbnail thumb-hover '); ?> role="article">
        <?php the_post_thumbnail( 'bones-thumb-300 thumbnailimage' ); ?>
<div class="mask">
<h4><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"> <?php the_title(); ?></a></h4>

<?php echo get_the_excerpt(); ?>
</div>
</li>

<?php endwhile; ?>
</ul>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<li id="post-<?php the_ID(); ?>" <?php post_class('span2 thumbnail thumb-hover '); ?> role="article">

<?php the_post_thumbnail( 'bones-thumb-300 thumbnailimage' ); ?>

<h4><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"> <?php the_title(); ?></a></h4>

<?php echo get_the_excerpt(); ?>

</div>

</li>

<?php endwhile; ?>

</ul>

Ans some more code:

<?php

/* login changes */
function clc_login_headerurl(){
   return bloginfo('url'); // changes the url link from wordpress.org to your blog or website's url
}
add_filter('login_headerurl', 'clc_login_headerurl');

/* changing the login page URL hover text */
function cls_login_headertitle(){
    return bloginfo('name'); // changing the title from "Powered by WordPress" to whatever you wish
}
add_filter('login_headertitle', 'clc_login_headertitle');

/* custom logo 274  x 63 px */
function clc_login_logo() { ?>
<style type="text/css">
        body.login div#login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo-login.png);
            padding-bottom: 30px;
        }
    </style>

<?php }
add_action( 'login_enqueue_scripts', 'clc_login_logo' );

<?php

/* login changes */

function clc_login_headerurl(){

return bloginfo('url'); // changes the url link from wordpress.org to your blog or website's url

}

add_filter('login_headerurl', 'clc_login_headerurl');

/* changing the login page URL hover text */

function cls_login_headertitle(){

return bloginfo('name'); // changing the title from "Powered by WordPress" to whatever you wish

}

add_filter('login_headertitle', 'clc_login_headertitle');

/* custom logo 274 x 63 px */

function clc_login_logo() { ?>

body.login div#login h1 a {

background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo-login.png);

padding-bottom: 30px;

}

</style>

<?php }

add_action( 'login_enqueue_scripts', 'clc_login_logo' );

And some text to make sure that the code is not the last text in the post.





    
"  role="article">

Posted April 18, 2012 by Gerrit Kuilder & filed under Code.

This is the code for using Twitter Bootstrap thumbnail and hover over the image to see title and excerpts. It also provides a link to the full post.

<ul class="thumbnails">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <li  id="post-<?php the_ID(); ?>" <?php post_class('span2 thumbnail thumb-hover '); ?> role="article">
        <?php the_post_thumbnail( 'bones-thumb-300 thumbnailimage' ); ?>
        <div class="mask">                                
            <h4><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"> <?php the_title(); ?></a></h4>
            <p><?php echo get_the_excerpt(); ?></p>            
        </div>
    </li>					
<?php endwhile; ?>	
</ul>


            view raw
            loop.php
            This Gist brought to you by GitHub.
          

 /* hovering over thumbnails to display title/excerpt
 thumb-hover */
 
 .thumb-hover {
   float: left;
   overflow: hidden;
   position: relative;   
}

.thumb-hover .mask {
    width:100%; 
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
   /* save hack? http://stackoverflow.com/questions/4804581/css-expand-child-div-height-to-parents-height */
/*  padding-bottom: 32768px; margin-bottom: -32768px; */
height:100%;
}

.thumb-hover img {
   display: block;
   position: relative;
   width:100%;
}

.thumb-hover h4, .thumb-hover p {
    color: #fff;
    padding-left:9px;
    padding-right:9px;
    padding-top:9px;
}
  /*
.thumb-hover a, .mask>a, .thumb-hover a:hover, .mask>a:hover{
  color: #fff; 
    text-decoration:none;
} */
/* hovering parts */
.thumb-hover .mask {
   background-color: #995566;
   filter: alpha(opacity=0);
   opacity: 0;
}

.thumb-hover:hover{
    border: 1px solid #995566;
}
.thumb-hover:hover .mask{
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
 

/* end of hovering thumbnails */

            view raw
            style.css
            This Gist brought to you by GitHub.
          

Posted by Gerrit Kuilder & filed under Code.

Tested possibilities of the thumbnail markup that is possible in Twitter Bootstrap

I just tried using the same size images and some extra markup to create a hover effect. I had used a similar effect in another context.
I searched around on the web but could not find a good solution so I decided to adapt the original code I had.

The biggest issue was the depth of the hovered content: in the original css the markup had a fixed depth but as the thumbnails need to be flexible I could not find a method that worked until I came across a very ugly hack, which seem to work.

After further checking and testing I discoverd that I could use the “height:100%” property of the masked area. This also works on Linux/Chrome now.

The result can be seen on each page that is an archive page.

One thing that I changed later on is the link, first the whole area(title and text) was a link but I changed it after I tested in on a tablet, as the mouse over does not work the same as on a computer.

Posted April 16, 2012 by Gerrit Kuilder & filed under Themes.

Trying to create a child theme using the WordPress Twitter Bootstrap Theme but focusing on typography. An easy method to change fonts and sizes without having to check every possible combination of tags.

I first had a look at this article on responsive design and font sizes. This looked easy enough to implement and use, until you see a widget title next to an article title or a widget title is longer than fits on one line.

So step 2 was to change the line heights for h1 /h6 to a standard 1.2em and padding-top/bottom to 0.4em. And all was right again.

Next was formatting all the text., it should have been easy enough except for the fact that in the theme on certain locations there were settings that could no be overriden that easily , a bit of a cleanup, removing a few lineheights and that was that.

Next step are the fonts.

I had a look at google fonts to find the right fonts. Basicly there are a few areas where different fonts can be used.

posts/pages: headers and text.
widgets: they are mainly lists but some text aswell. The font size could be a bit smaller.
Meta data in posts.
Comments…

Implementing them is quite easy. Finding the right combinations is a bit harder.

All in all, it is not working 100% yet, a big problem will be all the plugins, I have noticed that loads iof them have their own fonts and sizes in their CSS and in my experience not always esay to clean up….

The end result can be be seen here.

/*
    fonts.css:
    font settings for a WordPress Child Theme

    Copyright (C) Gerrit Kuilder gerrit.kuilder@gmail.com
        Amsterdam, The Netherlands 2012.

    This file is part of a WordPress Child Theme

    This WordPress Child Theme is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    WordPress Child Theme is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this WordPress Child Theme.  If not, see <http://www.gnu.org/licenses/>.   

*/
/* IMPORTANT: Have disabled basic P and li lineheight in bootstrap-min.css */

/*
http://fordinteractive.com/tools/emchart/
http://thehappybit.com/2012/03/flexible-css-typographic-scale/
=================================================
    Basic text sizing
=================================================
    Set your main font size for paragraph

    Reference
    62.5%  => 10px
    68.8%  => 11px
    75%    => 12px
    81.3%  => 13px
    87.5%  => 14px
    100%   => 16px
    112.5% => 18px
    125%   => 20px
=================================================
    Proportions based on typographic scale
    14, 16, 18, 21, 24, 32, 48
===============================================*/
/*
http://fordinteractive.com/tools/emchart/

14x        15px    16px    17px    18px    19px    20px    21px    22px    23px    24px    25px    26px    27px    28px    29px    30px    31px    32px
0.875    0.938    1        1.063    1.125    1.188    1.25    1.313    1.375    1.438    1.5        1.563    1.625    1.688    1.75    1.813    1.875    1.938    2    2.063    2.125    2.188    2.2

    IE7     IE8     FF2         FF3         Opera   Safari 3.1
H1  24pt    2em     32px        32px        32px    32px
H2  18pt    1.5em   24px        24px        24px    24px
H3  13.55pt 1.17em  18.7333px   18.7167px   18px    19px
H4  n/a     n/a     n/a         n/a         n/a     n/a
H5  10pt    0.83em  13.2667px   13.2833px   13px    13px
H6  7.55pt  0.67em  10.7333px   10.7167px   10px    11px
Also worth taking a look at is the default stylesheet for HTML 4. The W3C recommends using these styles as the default. An abridged excerpt:

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

    Reference
    62.5%  => 10px
    68.8%  => 11px
    75%    => 12px
    81.3%  => 13px
    87.5%  => 14px
    100%   => 16px
    112.5% => 18px
    125%   => 20px

as long as titles are limnited in one line it all looks ok, as soon as they are longer FUBAR */
/*
h1 {  font-size: 3.4285714285714284em;  line-height: 1.3125em;}
h2 {  font-size: 2.2857142857142856em;  line-height: 1.96875em;}
h3 {  font-size: 1.7142857142857142em;  line-height: 1.75em;}
h4 {  font-size: 1.5em;                 line-height: 2em;}
h5 {  font-size: 1.2857142857142858em;  line-height: 2.3333333333333335em;}
h6 {  font-size: 1.1428571428571428em;  line-height: 2.625em;}
*/
/*
things could be simpler if we remove all font size information in imported css
*/

/* google fonts import */
@import url(http://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400italic,700,700italic|Droid+Serif:400,700,400italic,700italic|Open+Sans:400italic,700italic,400,700,300);
/*
font-family: 'Droid Serif', serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Gentium Book Basic', serif;
*/

/* FONT FAMILIES */
/* headers */
h1, h2, h3, h4, h5, h6                               { font-family: 'Open Sans', sans-serif;}
/* fonts in meta  buttons etc*/
article footer, article footer p, p.meta, .btn, .pager, .pagination { font-family: 'Open Sans', sans-serif; }
/* fonts in widget */
.widget                                               { font-family: 'Open Sans', sans-serif; font-weight:bold;   }
.widget  h4,.widget  h5, .widget  h6      { font-family: 'Open Sans', sans-serif;}
/* normal text font  in text widget*/
.widget .textwidget                                 { font-family: 'Gentium Book Basic', serif;    font-weight:normal; }
/* fonts in footer*/
.container-fluid>footer                           { font-family: 'Gentium Book Basic', serif;    font-weight:normal; }
/* fonts in navigation bar */
.navbar                                            { font-family: 'Open Sans', sans-serif; }

p                                         {  -webkit-hyphens: auto;    -moz-hyphens: auto;    hyphens: auto;    }   /*removed imported css */
/* FONT SIZES: */
body                                   { font-family: 'Gentium Book Basic', serif; line-height: 1.2; font-size: 100% ;  }
p.meta                               { font-size: 0.8em;  margin:0; padding:0;}                                /*depending on teh font used */
p.tags                               { font-size: 0.8em; line-height: 160%; margin:0; padding:0;}
.widget p, .comment-text p {margin:0; padding:0; margin-bottom:0.4em;}                /* p widget and comment */
pre                               { font-size: 0.85em;  line-height: 1.1em; }
blockquote p                      { font-size: 1em;     line-height: 1.5; }
h1                                { font-size: 2em;     line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}
h2                                { font-size: 1.5em;   line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}
h3                                { font-size: 1.17em;  line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}
h4                                { font-size: 1em;     line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}
h5                                { font-size: 0.83em;  line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}
h6                                { font-size: 0.75em;  line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}
.widget, .widget li               { font-size: 0.8em;    line-height: 1.2em;   }                               /* slightly larger */
.widget p                         { font-size: 1em;      line-height: 1.2em;   }                               /* slightly larger */
.widget h4                   {padding-top: 0.60em; padding-bottom:0.2em; }                               /* sets the top of h4 equal to top of h2 (article) */
.label                       {font-size: 0.8em;    font-weight:normal;   }                            /* labels smaller: fixed  */
#tag-cloud .label            {font-size: 9px !important;   font-weight:normal;  }
.pager, .pagination          {font-size: 0.7em;    font-weight:normal;   } /* navigation  labels smaller: fixed  */
#comments                    {font-size: 1em; line-height: 1.2em; margin-bottom:0;} /*h3 header for comment list */
.commentlist                 {font-size: 87.5% ;} /*make all commenst a little smaller */
.navbar                      {font-size: 0.8em; }

/*overrrides of standard style font wise */
/*#tag-cloud{line-height:200% ;} */
/* in widgets lineheight 1 em?  .widget li becaaue lineheight is fixed in bootstrap-min.css*/
/*.widget                      { font-size: 90%;} */
/* .widgettitle     { padding-top: 0.4em; padding-bottom:0;} */
 /*.tags .label               { font-size: 0.7em !important;   font-weight:normal;   } */ /* labels smaller: fixed sizes */

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

fonts.css:

font settings for a WordPress Child Theme

Amsterdam, The Netherlands 2012.

This file is part of a WordPress Child Theme

This WordPress Child Theme is free software: you can redistribute it and/or modify

it under the terms of the GNU General Public License as published by

the Free Software Foundation, either version 3 of the License, or

(at your option) any later version.

WordPress Child Theme is distributed in the hope that it will be useful,

but WITHOUT ANY WARRANTY; without even the implied warranty of

MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

GNU General Public License for more details.

You should have received a copy of the GNU General Public License

along with this WordPress Child Theme. If not, see <http://www.gnu.org/licenses/>.

/* IMPORTANT: Have disabled basic P and li lineheight in bootstrap-min.css */

http://fordinteractive.com/tools/emchart/

http://thehappybit.com/2012/03/flexible-css-typographic-scale/

=================================================

Basic text sizing

=================================================

Set your main font size for paragraph

Reference

62.5% => 10px

68.8% => 11px

75% => 12px

81.3% => 13px

87.5% => 14px

100% => 16px

112.5% => 18px

125% => 20px

=================================================

Proportions based on typographic scale

14, 16, 18, 21, 24, 32, 48

===============================================*/

http://fordinteractive.com/tools/emchart/

14x 15px 16px 17px 18px 19px 20px 21px 22px 23px 24px 25px 26px 27px 28px 29px 30px 31px 32px

0.875 0.938 1 1.063 1.125 1.188 1.25 1.313 1.375 1.438 1.5 1.563 1.625 1.688 1.75 1.813 1.875 1.938 2 2.063 2.125 2.188 2.2

IE7 IE8 FF2 FF3 Opera Safari 3.1

H1 24pt 2em 32px 32px 32px 32px

H2 18pt 1.5em 24px 24px 24px 24px

H3 13.55pt 1.17em 18.7333px 18.7167px 18px 19px

H4 n/a n/a n/a n/a n/a n/a

H5 10pt 0.83em 13.2667px 13.2833px 13px 13px

H6 7.55pt 0.67em 10.7333px 10.7167px 10px 11px

Also worth taking a look at is the default stylesheet for HTML 4. The W3C recommends using these styles as the default. An abridged excerpt:

h1 { font-size: 2em; }

h2 { font-size: 1.5em; }

h3 { font-size: 1.17em; }

h5 { font-size: .83em; }

h6 { font-size: .75em; }

Reference

62.5% => 10px

68.8% => 11px

75% => 12px

81.3% => 13px

87.5% => 14px

100% => 16px

112.5% => 18px

125% => 20px

as long as titles are limnited in one line it all looks ok, as soon as they are longer FUBAR */

h1 { font-size: 3.4285714285714284em; line-height: 1.3125em;}

h2 { font-size: 2.2857142857142856em; line-height: 1.96875em;}

h3 { font-size: 1.7142857142857142em; line-height: 1.75em;}

h4 { font-size: 1.5em; line-height: 2em;}

h5 { font-size: 1.2857142857142858em; line-height: 2.3333333333333335em;}

h6 { font-size: 1.1428571428571428em; line-height: 2.625em;}

things could be simpler if we remove all font size information in imported css

/* google fonts import */

@import url(http://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400italic,700,700italic|Droid+Serif:400,700,400italic,700italic|Open+Sans:400italic,700italic,400,700,300);

font-family: 'Droid Serif', serif;

font-family: 'Open Sans', sans-serif;

font-family: 'Gentium Book Basic', serif;

/* FONT FAMILIES */

/* headers */

h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif;}

/* fonts in meta buttons etc*/

article footer, article footer p, p.meta, .btn, .pager, .pagination { font-family: 'Open Sans', sans-serif; }

/* fonts in widget */

.widget { font-family: 'Open Sans', sans-serif; font-weight:bold; }

.widget h4,.widget h5, .widget h6 { font-family: 'Open Sans', sans-serif;}

/* normal text font in text widget*/

.widget .textwidget { font-family: 'Gentium Book Basic', serif; font-weight:normal; }

/* fonts in footer*/

.container-fluid>footer { font-family: 'Gentium Book Basic', serif; font-weight:normal; }

/* fonts in navigation bar */

.navbar { font-family: 'Open Sans', sans-serif; }

p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } /*removed imported css */

/* FONT SIZES: */

body { font-family: 'Gentium Book Basic', serif; line-height: 1.2; font-size: 100% ; }

p.meta { font-size: 0.8em; margin:0; padding:0;} /*depending on teh font used */

p.tags { font-size: 0.8em; line-height: 160%; margin:0; padding:0;}

.widget p, .comment-text p {margin:0; padding:0; margin-bottom:0.4em;} /* p widget and comment */

pre { font-size: 0.85em; line-height: 1.1em; }

blockquote p { font-size: 1em; line-height: 1.5; }

h1 { font-size: 2em; line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}

h2 { font-size: 1.5em; line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}

h3 { font-size: 1.17em; line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}

h4 { font-size: 1em; line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}

h5 { font-size: 0.83em; line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}

h6 { font-size: 0.75em; line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}

.widget, .widget li { font-size: 0.8em; line-height: 1.2em; } /* slightly larger */

.widget p { font-size: 1em; line-height: 1.2em; } /* slightly larger */

.widget h4 {padding-top: 0.60em; padding-bottom:0.2em; } /* sets the top of h4 equal to top of h2 (article) */

.label {font-size: 0.8em; font-weight:normal; } /* labels smaller: fixed */

#tag-cloud .label {font-size: 9px !important; font-weight:normal; }

.pager, .pagination {font-size: 0.7em; font-weight:normal; } /* navigation labels smaller: fixed */

#comments {font-size: 1em; line-height: 1.2em; margin-bottom:0;} /*h3 header for comment list */

.commentlist {font-size: 87.5% ;} /*make all commenst a little smaller */

.navbar {font-size: 0.8em; }

/*overrrides of standard style font wise */

/*#tag-cloud{line-height:200% ;} */

/* in widgets lineheight 1 em? .widget li becaaue lineheight is fixed in bootstrap-min.css*/

/*.widget { font-size: 90%;} */

/* .widgettitle { padding-top: 0.4em; padding-bottom:0;} */

/*.tags .label { font-size: 0.7em !important; font-weight:normal; } */ /* labels smaller: fixed sizes */

/*  
    fonts.css:
    font settings for a WordPress Child Theme
    
    Copyright (C) Gerrit Kuilder gerrit.kuilder@gmail.com 
        Amsterdam, The Netherlands 2012.
        
    This file is part of a WordPress Child Theme

    This WordPress Child Theme is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    WordPress Child Theme is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this WordPress Child Theme.  If not, see <http://www.gnu.org/licenses/>.   

*/
/* IMPORTANT: Have disabled basic P and li lineheight in bootstrap-min.css */

/* 
http://fordinteractive.com/tools/emchart/
http://thehappybit.com/2012/03/flexible-css-typographic-scale/
=================================================
	Basic text sizing
=================================================
	Set your main font size for paragraph

	Reference
	62.5%  => 10px
	68.8%  => 11px
	75%    => 12px
	81.3%  => 13px
	87.5%  => 14px
	100%   => 16px
	112.5% => 18px
	125%   => 20px
=================================================
	Proportions based on typographic scale
	14, 16, 18, 21, 24, 32, 48
===============================================*/
/*
http://fordinteractive.com/tools/emchart/

14x	    15px	16px	17px	18px	19px	20px	21px	22px	23px	24px	25px	26px	27px	28px	29px	30px	31px	32px
0.875	0.938	1	    1.063	1.125	1.188	1.25	1.313	1.375	1.438	1.5	    1.563	1.625	1.688	1.75	1.813	1.875	1.938	2	2.063	2.125	2.188	2.2

    IE7     IE8     FF2         FF3         Opera   Safari 3.1
H1  24pt    2em     32px        32px        32px    32px       
H2  18pt    1.5em   24px        24px        24px    24px
H3  13.55pt 1.17em  18.7333px   18.7167px   18px    19px
H4  n/a     n/a     n/a         n/a         n/a     n/a
H5  10pt    0.83em  13.2667px   13.2833px   13px    13px
H6  7.55pt  0.67em  10.7333px   10.7167px   10px    11px
Also worth taking a look at is the default stylesheet for HTML 4. The W3C recommends using these styles as the default. An abridged excerpt:

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }


	Reference
	62.5%  => 10px
	68.8%  => 11px
	75%    => 12px
	81.3%  => 13px
	87.5%  => 14px
	100%   => 16px
	112.5% => 18px
	125%   => 20px
    
as long as titles are limnited in one line it all looks ok, as soon as they are longer FUBAR */
/*
h1 {  font-size: 3.4285714285714284em;  line-height: 1.3125em;}
h2 {  font-size: 2.2857142857142856em;  line-height: 1.96875em;}
h3 {  font-size: 1.7142857142857142em;  line-height: 1.75em;}
h4 {  font-size: 1.5em;                 line-height: 2em;}
h5 {  font-size: 1.2857142857142858em;  line-height: 2.3333333333333335em;}
h6 {  font-size: 1.1428571428571428em;  line-height: 2.625em;}
*/
/* 
things could be simpler if we remove all font size information in imported css
*/

/* google fonts import */
@import url(http://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400italic,700,700italic|Droid+Serif:400,700,400italic,700italic|Open+Sans:400italic,700italic,400,700,300);
/*
font-family: 'Droid Serif', serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Gentium Book Basic', serif;
*/

/* FONT FAMILIES */
/* headers */
h1, h2, h3, h4, h5, h6                               { font-family: 'Open Sans', sans-serif;}
/* fonts in meta  buttons etc*/ 
article footer, article footer p, p.meta, .btn, .pager, .pagination { font-family: 'Open Sans', sans-serif; }
/* fonts in widget */
.widget                                                         { font-family: 'Open Sans', sans-serif; font-weight:bold;   }
.widget  h4,.widget  h5, .widget  h6      { font-family: 'Open Sans', sans-serif;}
/* normal text font  in text widget*/
.widget .textwidget                                 { font-family: 'Gentium Book Basic', serif;    font-weight:normal; }
/* fonts in footer*/
.container-fluid>footer                          { font-family: 'Gentium Book Basic', serif;    font-weight:normal; }
/* fonts in navigation bar */
.navbar                                                       { font-family: 'Open Sans', sans-serif; }

p                                         {  -webkit-hyphens: auto;    -moz-hyphens: auto;    hyphens: auto;    }   /*removed imported css */
/* FONT SIZES: */
body                                   { font-family: 'Gentium Book Basic', serif; line-height: 1.2; font-size: 100% ;  }
p.meta                               { font-size: 0.8em;  margin:0; padding:0;}                                /*depending on teh font used */
p.tags                               { font-size: 0.8em; line-height: 160%; margin:0; padding:0;}
.widget p, .comment-text p {margin:0; padding:0; margin-bottom:0.4em;}                /* p widget and comment */
pre                                     { font-size: 0.85em;  line-height: 1.1em; }
blockquote p                      { font-size: 1em;     line-height: 1.5; }
h1                                       { font-size: 2em;     line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}
h2                                       { font-size: 1.5em;   line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}
h3                                       { font-size: 1.17em;  line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}
h4                                       { font-size: 1em;     line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}
h5                                       { font-size: 0.83em;  line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}
h6                                       { font-size: 0.75em;  line-height: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em;}
.widget, .widget li        { font-size: 0.8em;    line-height: 1.2em;   }                               /* slightly larger */
.widget p                         { font-size: 1em;      line-height: 1.2em;   }                               /* slightly larger */
.widget h4                        { padding-top: 0.60em; padding-bottom:0.2em; }                               /* sets the top of h4 equal to top of h2 (article) */
.label                              { font-size: 0.8em;    font-weight:normal;   }                            /* labels smaller: fixed  */
#tag-cloud .label         { font-size: 9px !important;   font-weight:normal;  }
.pager, .pagination    { font-size: 0.7em;    font-weight:normal;   } /* navigation  labels smaller: fixed  */
#comments                       {font-size: 1em; line-height: 1.2em; margin-bottom:0;} /*h3 header for comment list */
.commentlist                 {font-size: 87.5% ;} /*make all commenst a little smaller */
.navbar                           { font-size: 0.8em; }

/*overrrides of standard style font wise */
/*#tag-cloud{line-height:200% ;} */
/* in widgets lineheight 1 em?  .widget li becaaue lineheight is fixed in bootstrap-min.css*/
/*.widget                      { font-size: 90%;} */
/* .widgettitle     { padding-top: 0.4em; padding-bottom:0;} */
 /*.tags .label               { font-size: 0.7em !important;   font-weight:normal;   } */ /* labels smaller: fixed sizes */

            view raw
            fonts.css
            This Gist brought to you by GitHub.
          

Posted April 10, 2012 by Gerrit Kuilder & filed under Code.

If you let customers register and store permanent information the login has to be smooth and as non-wordpress as possible.

I suggest you add your own logo to the login screen:

<?php

/* login changes */
function clc_login_headerurl(){
   return bloginfo('url'); // changes the url link from wordpress.org to your blog or website's url
}
add_filter('login_headerurl', 'clc_login_headerurl');

/* changing the login page URL hover text */
function cls_login_headertitle(){
    return bloginfo('name'); // changing the title from "Powered by WordPress" to whatever you wish
}
add_filter('login_headertitle', 'clc_login_headertitle');

/* custom logo 274  x 63 px */
function clc_login_logo() { ?>
    <style type="text/css">
        body.login div#login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo-login.png);
            padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'clc_login_logo' );

<?php

/* login changes */

function clc_login_headerurl(){

return bloginfo('url'); // changes the url link from wordpress.org to your blog or website's url

}

add_filter('login_headerurl', 'clc_login_headerurl');

/* changing the login page URL hover text */

function cls_login_headertitle(){

return bloginfo('name'); // changing the title from "Powered by WordPress" to whatever you wish

}

add_filter('login_headertitle', 'clc_login_headertitle');

/* custom logo 274 x 63 px */

function clc_login_logo() { ?>

body.login div#login h1 a {

background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo-login.png);

padding-bottom: 30px;

}

</style>

<?php }

add_action( 'login_enqueue_scripts', 'clc_login_logo' );

<?php

/* login changes */
function clc_login_headerurl(){
   return bloginfo('url'); // changes the url link from wordpress.org to your blog or website's url
}
add_filter('login_headerurl', 'clc_login_headerurl');

/* changing the login page URL hover text */
function cls_login_headertitle(){
    return bloginfo('name'); // changing the title from "Powered by WordPress" to whatever you wish
}
add_filter('login_headertitle', 'clc_login_headertitle');


/* custom logo 274  x 63 px */
function clc_login_logo() { ?>
    <style type="text/css">
        body.login div#login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo-login.png);
            padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'clc_login_logo' );

            view raw
            functions.php
            This Gist brought to you by GitHub.
          

Posted by Gerrit Kuilder & filed under Plugins.

I switched to wp e-commerce for a test shop as woocommerce managed to break the theme I planned to use. There were a few things I did not like about it so that made it easier to switch.

Wp -commerce has a few quirks too but so far so good.

The biggest problem I am running into so far is that it does not seem possible to add something like gift-wrap or extra optional elements at extra cost (think pizza toppings).

There are a few things I managed to add: the jquery datepicker and a custom field so one can pick a delivery date.

I also went searching for a decent slider and carousel plugin. I found a slider but not a good enough carousel.

As I probably want to create custom sliders and carousel I decided to use two jquery plugins: flexslider and caroufredsel, these give me enough options to do want. For now I was able to generate a product list and put that on the page. It is not setup as a plugin so it has to be handcoded.

As a sidenote, flexslider comes from woothemes but their instructions/sample code does not include the proper method for adding java scripts.

Of course, one runs into all kind of issues when adding your own jquery plugins into WordPress:

Firstly properly add the scripts to your page:

add_action('init', 'clc_add_carousel_scripts');
function clc_add_carousel_scripts() {
   wp_enqueue_script('jquery','','','',true);
   wp_enqueue_script('jquery-carousel', get_stylesheet_directory_uri().'/carousel/jquery.carouFredSel-5.5.0-packed.js','','',true);
}

add_action('init', 'clc_add_carousel_scripts');

function clc_add_carousel_scripts() {

wp_enqueue_script('jquery','','','',true);

wp_enqueue_script('jquery-carousel', get_stylesheet_directory_uri().'/carousel/jquery.carouFredSel-5.5.0-packed.js','','',true);

}

This will ensure that scripts get loaded only once. I am also using a Google API plugin that pulls all kind of script from Google, instead of hosting them yourself.

For the ui-datepicker I needed to make sure I am using the proper locale:

wp_enqueue_script('clc_datepicker','http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/i18n/ui.datepicker-nl.js','','',true);

1	wp_enqueue_script('clc_datepicker','http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/i18n/ui.datepicker-nl.js','','',true);

At some stage I will ad some code so it can pick up the correct locale.

I needed a list of products to put in a carousel:

$wpec_categoryProducts = new WP_Query($wpec_args);
while ($wpec_categoryProducts->have_posts()) : $wpec_categoryProducts->the_post();
[...]

$wpec_categoryProducts = new WP_Query($wpec_args);

while ($wpec_categoryProducts->have_posts()) : $wpec_categoryProducts->the_post();

[...]

Then you will use all kinds of product functions to get the title, thumbnail etc…

Lastly there is the message: ”$ is not a function”, this can be fixed with some extra code I found on this site.

jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#productlist").carouFredSel({
[...]

jQuery.noConflict();

jQuery(document).ready(function(){

jQuery("#productlist").carouFredSel({

[...]

Posted April 3, 2012 by Gerrit Kuilder & filed under Plugins.

Have been looking into the woocommerce plugin for an e-shop, this is one of the shop plugins and I only had a quick look around for other plugins. Woocommerce is a bit of a new kid on the block and it comes from a company that does a lot of commercial things with WordPress, as a result the basic plugin is free but most of the extra’s will cost you. Probably worth it though.

After installation of the plugin you have to set up shop.

Do proper configuration: , country and currency information etc,

For your products he steps to take are:

Collect your information about your productcs
Collect enough images (and make sure you are allowed to use them).
Organize your products: set up appropriate categories
Think about variations of your product, so you can set up Global Variations beforehand.
Start Adding Products.

Global Variations can be a bit tricky to set up at first:

From the Admin Menu, open Products and then go to Attributes. Add a descriptive name for the Attribute you want to use (‘Size’) and select the appropriate type (Most of the time ‘Select’ is appropriate).

Your attribute will show up on the right, from where we will configure the terms, in this case the actual sizes.

Posted March 19, 2012 by Gerrit Kuilder & filed under Plugins.

The All In One Event Calendar is one of the best event managers around appearantly. It is easy to install and use, more importantly one can import various types of calenders, I tried linking to a google calendar and that went withouit a hitch. This means one can create events in a google calenders and they will be added to the All In One on your website.

The google calendar will have to be shared, either as a public calender or ????.

I do have some issues with this plugin, In the widgets and pages that display the events a lot of fonts are set, also with the !important tag. This means that you have to spend a lot of time disabling fonts and setting your own. This is a really annoying habit of plugin makers: You Are A Plugin. The end user would like to fit the data in THEIR design and use THEIR fonts and color settings.

One should also make it easy (and possible) to link/use CSS copied from the plugin into a theme child. Now one needs to override the css in the child theme but this can result in a jumpy display when the page is loaded.

If one wants to only display events from a google calendar a simpler plugin might be more appropriate like the Google Event Calendar. For other plugins check this overview of calendar plugins.

One can see it in action on my test site: be sure to have the lines theme active.

Testing metadata

The title (lightroom

Meta data

Image Data

Meta Data

Exif

IPTC data

XMP data

database data

Code for a link to delete a post from the front page

Multiple Next/Previous Posts, or answering my own question

Some remarks:

Thumbnails and hovering

PHP:

CSS:

Testing the Crayon Syntax Highlighter

Code for using Twitter Bootstrap thumbnail and hover over the image to see title and excerpt

Trying out the thumbnail markup in Twitter Bootstrap

Typography and the WordPress Twitter Bootstrap Theme

Switching to wp e-commerce for the shop test

Setting up e-shop with woocommerce

Taming the All In One Event Calendar

Links

Popular Posts

Recent Posts

Archives

The title (lightroom

Meta data

Image Data

Meta Data

Exif

IPTC data

XMP data

database data

Some remarks:

PHP:

CSS:

Follow Us!

Links

Tags

Popular Posts

Recent Posts

Archives