Making a wordpress theme. Base styling

We now made a style.css with the correct definitions. Now we want to create the basics for styling. Like i said, i would like to use the kube css framework. So in my functions.php i will start to make a action to load my styles. I already uploaded the kube.min.css to a css folder in my theme.

function dimme_kube_scripts_styles() {
  // Loads kube css
  wp_enqueue_style( 'kube', get_template_directory_uri() . '/css/kube.min.css', array(), '2013-08-14' );

  // Loads our main stylesheet.
  wp_enqueue_style( 'dimme_kub-style', get_stylesheet_uri(), array(), '2013-08-14' );
}
add_action( 'wp_enqueue_scripts', 'dimme_kube_scripts_styles' );

So first i load the kube css using the wp_enqueue_style function. This enques the file, and registers the url`s if given, like i did. Next i load my style.css for my own ajustments on the styles.

My own styles. Kube does not have a wrapper class so i make my own. Called it wrap. Added a background and added the .screen-reader-text class for screen readers, duh.

html, body {
  background:#EEE;
}
.screen-reader-text {
  display:none; 
}
.wrap {
  background:#FFF;
  max-width:1030px; 
  margin:0 auto;
}

I copied the header.php, footer.php and index.php from thentythirteen templates, stripped out most unused code for now and added my .wrap class in each. I will explain more about each of these files when i will ajust them when i need, for now this is just the basics.

So there i have the basics. Still on my first tag so the download is still this: dimme-kube-0.1.

Now we have the basics. We can read an view a post page or what we want. No comments yet couse havent made it yet. Next time, maby a header with a picture. Maby comments, or maby basics for post types. Don`t know what i would like, we will see.

Geef een reactie

Jouw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *