Adding Navigation Menus to WordPress

| 11/29/2016

Many sites have more than one menu. In order to add a customer menu we will need to modify our functions.php file.

The orgiainl code in my theme is

“register_nav_menu(‘nav-menu’, __(‘Nav Menu’));”

In order to add seperat menu item for the footer we can add

“register_nav_menu(‘footer-menu’, __(‘Footer Menu’));”

just below the original code. When goign to the back end there will be an option to assign the menu to the ‘Footer Menu’ location. In your footer.php file you can add the following code;

“<nav class=”mainMenu”>
<?php
wp_nav_menu(array(
‘theme_location’ => ‘footer-menu’,
‘container’ => ”
));
?>
</nav>”

Dynamically Point to Image Source Location

| 11/29/2016

Use “<?php echo get_template_directory_uri(); ?>” to dynamically point to the appropriate path.

When your images are in a specific file as they should be, add the path after the closing php tag. There is an example

“<img src=”<?php echo get_template_directory_uri(); ?>/images/logo.png” alt=”Company Logo”>”

What is Bootstrap

| 10/30/2015

What is Bootstrap?

Bootstrap is a free open-source framework for developing web sites. It includes design templates for buttons, forms, images carousels, modals, navigation, tables, typography and JavaScript plugins. Using HTML and CSS Bootstrap gives designers and developers the ability to quickly create responsive websites.

Bootstrap uses a mobile first development concept and is compatible in all modern browsers.

How it works.

lkdsjflajkf awfkejalfkj

Getting started with Bootstrap

There are 2 ways to use bootstrap.

  1. Download Bootstrap by visiting getbootstrap.com
  2. Link to Bootstrap via a Content Delivery Network (CDN)

In order to link to via a CDN you must include the following in the head of your document

[highlighter]

 

I am by no means an expert in Bootstrap for that reason this post is very limited however, as I learn more and put it to practical use I will write new articles.

Meyers Reset

| 10/27/2015

The Meyers Reset is stylesheet reset used to reduce browser inconsistencies. Meyer’s creation is very generic and is not meant to be used as a stand alone. You should modify it to meet your projects needs.

The code below is free for anyone to use. It was pulled directly from Meyers site where you can find more information on why it was created and other places it was used.
[highlighter]

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
[highlighter]
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Introduction to Skeleton CSS

| 10/27/2015

What is Skeleton?

Skeleton was created by Dave Gamache. It is a light weight CSS framework.

It include two CSS files named normalize.css and skeleton.css. Normalize.css is a browser reset file and skeleton.css is  the grid system which provides basic style for commonly used HTML elements that include but are not limited to buttons, lists and tables.

Skeleton uses a mobile-first approach in the development of its framework which is similar to Bootstrap. Skeleton’s biggest difference to Bootstrap is that it does not use a large number of components. It is limited to a few fundamental CSS rules to help with the initial phase of development.

Another advantage to Skeleton is the option use of Sass or Less extensions and it is fully functional in all of the newest browsers including IE9+.

Getting Started with Skeleton?

In order to get started with skeleton you will need to download the file directly from their site getskeleton.com or fork the GitHub repository.

This is what your file structure should look like:

Skeleton/
|---css/
|    |---normalize.css
|    |---skeleton.css
|---images/
|---index.html

Important Column and Row Information

Columns are nested inside a row. They scale up to 12 for each row. To set up a column you have to define a div element and assign it two classes. First, you add the class that is responsible for specifying the column widths. To achieve this, you can use any class from one to twelve or the one-third, two-thirds, and one-half classes.

The second class is responsible for setting the column margins. Possible classes are columns and column. If you define the column widths with the first option (e.g. using the two class), you should use the columns class (instead of column) as a second class. The exception is when using the one class, which can be equally combined with the columns or column class.

Skeleton recommends not nesting rows within columns. In addition, Skeleton’s grid system provides extra classes for offsetting your columns. Offset classes (e.g. offset-by-two) allow you to increase the space between columns by adding a margin-left property.

Resources

There are numerous resources available for skeleton however, for the sake of ease, I have listed several that I found most useful.