salcode/bootstrap-genesis salcode/bootstrap-genesis

  • Stars
    star
    184
  • Rank 208,570 (Top 5 %)
  • Language
    PHP
  • License
    MIT License
  • Created almost 11 years ago
  • Updated over 6 years ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
salcode/bootstrap-genesis
github

salcode

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

WordPress Genesis Child Theme setup to use Bootstrap, Sass, and Grunt

bootstrap-genesis

WordPress Genesis Child Theme setup to use Bootstrap 3, Sass, and Grunt.

Contributors

@salcode, @dustyndoyle, @codenameEli, @bryanwillis

The CSS is Missing

I hear from a lot of users, "Hey, I tried to use your theme but there is no CSS."

Quick Fix

Download the latest Bootstrap Genesis release and use that.

The Long Version

This is the base theme I use for the projects I build. Part of my workflow includes using GruntJS for my CSS/Sass and JavaScript compilation, concatenation, and minification. Because the resulting css/style.min.css and js/javascript.min.js files are compiled files, I do NOT check them into version control (i.e. they are listed in the .gitignore file).

The result of all this is the files in the repo are a copy of the theme with all the source files for the CSS and JavaScript but not the final CSS and JavaScript.

If you're running GruntJS and have Sass installed you can run npm install and grunt from the command line and the CSS and JavaScript will be generated. If you're not running these tools yet, you can use the latest Bootstrap Genesis release, which includes the compilied CSS and JavaScript.

Why no CSS in style.css?

Since I'm treating the CSS as a compiled asset that I do not want to include it in version control, I use style.css only for the theme header information and all applied CSS is stored in css/style.min.css

Menu Modifications

The menu is modified to use Bootstrap markup and the menus are placed at the top of the page by default. All menu modifications are removed, when the Ubermenu plugin is present

Project Goal

This theme was created as my own starting point when building custom Genesis child themes using the Bootstrap front-end framework.

The goal is to leverage Bootstrap as much as possible by adding the appropriate markup to trigger Bootstrap styling.

Whenever there is a choice between making an adjustment via the markup or via Sass/CSS, markup modifications are preferrable. There are two justifications for this:

  1. We want to keep the CSS as small as possible for load time
  2. By using Bootstrap Markup we make the Bootstrap integration more transparent and easier understand and manipulate.

How to Update Bootstrap

Here are my notes on updating Bootstrap in this project.

Warning

After updating the Bootstrap files, the Grunt task must be run to update css/style.min.css and js/javascript.min.js. There are the only two files loaded for CSS and JavaScript, all of the other files are the source files which are used to create these two minified files.

Steps

  • Download the latest Sass version of Bootstrap
  • Replace the JavaScript file. Move the new assets/javascripts/bootstrap.js to js/vendor/bootstrap/
  • Replace the fonts. Move all files in the new download from assets/fonts/bootstrap/ to fonts/bootstrap/
  • Replace the top level Sass file. Move the new assets/stylesheets/_bootstrap.scss to css/sass/supporting/bootstrap.scss
  • Replace the Bootstrap partial and mixin files. Mall all files in the new download from assets/stylesheets/bootstrap/ to css/sass/supporting/bootstrap/

License

GPL

More Repositories

1

block-xray-attributes

WordPress Gutenberg plugin to display the attributes for the currently selected block in the Document sidebar.
JavaScript
39
star
2

wpcli-localwp-setup

Shell
30
star
3

bootstrap4-genesis

WordPress Genesis Starter Child Theme using Bootstrap 4
CSS
28
star
4

stop-emails

Stops outgoing emails. Any outgoing emails will fail silently (i.e. WordPress will operate as if the email was sent successfully but no email will actually be sent).
PHP
26
star
5

jwt

Single Page Offline JSON Web Token (JWT) Decoder
HTML
22
star
6

bootstra.386-genesis

WordPress Genesis Child Theme setup to use kristopolous's BOOTSTRA.386
PHP
14
star
7

fe-sanitize-title-js

WordPress plugin to demo wpFeSanitizeTitle() JavaScript function
JavaScript
13
star
8

wp-cli-find-content

WP CLI custom command 'wp find-content <query>', lists post that contain the query in the post content or post meta.
PHP
11
star
9

ironcode-vim

A Vim Configuration focused on WordPress development and predominantly used on a Mac with Neovim
Vim Script
9
star
10

vim-interactive-rebase-reverse

A Vim plugin to reverse the order commits are displayed during a Git interactive rebase.
Vim Script
8
star
11

fe-improve-genesis-theme-search

WordPress plugin to implement the recommendations from https://yoast.com/wordpress-search/ on a Genesis theme.
PHP
8
star
12

reactjs-starters

Built with "Create React App" with branches that contain starter points on which to build and learn ReactJS.
HTML
7
star
13

wp-fast-login

WordPress development plugin to allow choosing an account to instantly log in (without entering a password).
PHP
6
star
14

salcode-share-desc

PHP
4
star
15

yoast-seo-eliminate-notifications

WordPress Plugin to disable Yoast SEO notifications
PHP
3
star
16

salcode-zsh

My configuration files for zsh
Shell
3
star
17

salcode-git

My Git configuration.
3
star
18

wp-post-meta-query-generator

Interface to generate a WordPress SQL post_meta query that uses LEFT JOIN to allow querying for a post and post meta based on multiple post_meta values.
JavaScript
3
star
19

iron-ajax

Iron Ajax WordPress plugin. Creates a generic page to handle large sets of data through Ajax calls. Through the use of hooks, these Ajax calls can be used to perform tasks you designate on large data sets.
PHP
3
star
20

fe-markdown-block

A demo Markdown block for the WordPress block editor
JavaScript
2
star
21

git-bisect-example

Example repo for use in trying Git Bisect
HTML
2
star
22

bootstrap-genesis-fixed-nav

Plugin to make the primary nav fixed. Requires the Bootstrap Genesis theme.
PHP
2
star
23

wordpress-to-gutenberg-version

WordPress to Gutenberg Version Reference
2
star
24

wp-engine-srcset-force-https

WordPress plugin to force WP Engine sites to use HTTPS when generating srcset image urls. This only applies to production sites, staging sites are unaffected. Non-WP Engine sites are also unaffected. Requires PHP 5.3 or above, which is present on all WP Engine installs.
PHP
2
star
25

fastfacts

Fast fact math worksheet
HTML
2
star
26

stop-emails-logger

Helper WordPress plugin that hooks into the Stop Emails plugin. When emails are blocked from being sent, they are stored in the Custom Post Type "Stopped Emails"
PHP
2
star
27

example-project-w-gitignore

Example project with gitignore where theme and one plugin are in the repo and the rest of plugins and parent theme are loaded via Composer.
PHP
2
star
28

tides

A React App that uses the NOAA.gov website to load tide information.
JavaScript
1
star
29

srcset-demo

HTML
1
star
30

fe-wp-localize-script-demo

A minimal example of using wp_localize_script() in a WordPress plugin.
PHP
1
star
31

analog-pie-circle

An analog custom Garmin Vivoactive Connect IQ watch face.
1
star
32

development-overlay

WordPress plugin to overlay an image on your page during development
JavaScript
1
star
33

risk-board-game-dice-odds

Calculate Risk board game dice odds when rolling 3 attacking versus 2 defending using JavaScript.
JavaScript
1
star
34

wordpress-filter-examples

Wordpress Filter Examples. Based on my "Making WordPress Filters Work for You" talk.
PHP
1
star
35

salferrarello-com-mods

Since I'm running an unmodified version of Bootstrap Genesis on salferrarello.com, I'm placing my customizations in this plugin.
PHP
1
star
36

fe-cmb2-slider

WordPress plugin for the backend portion of creating a slider.
PHP
1
star
37

salcode-nvim

My Neovim configuration.
Lua
1
star
38

nye-react

A New Year's Eve countdown built in React with celebrations every hour.
JavaScript
1
star
39

create-react-app-starter

This starter is the result of running "npx create-react-app create-react-app-starter"
JavaScript
1
star
40

php-oop-primer-code-examples

Code Examples to accompany Sal's talk "Object Oriented Primer: Interfaces, Traits & Inheritance" from php[world] 2019.
PHP
1
star
41

wp-example-test-php8-plugin

An example WordPress plugin for testing for PHP8 compatibility, specifically with code incompatible with PHP 8
PHP
1
star
42

cpt-fe-recipe

This WordPress plugin creates a custom post type "fe_recipe" and a custom taxonomy "fe_recipe_tag".
PHP
1
star
43

force-all-comments-closed

WordPress plugin to force all Comments to be Closed
PHP
1
star
44

php-code-sniffing-code-examples

Code Examples to accompany Sal's talk "Enforcing Coding Standards with PHP_CodeSniffer" from php[world] 2019.
PHP
1
star
45

wp-demo-composer-third-party-lib

Demo WordPress plugin that loads a third party library via the Composer autoloader
PHP
1
star
46

example-wp-composer-loaded-plugin

This is an example WordPress plugin with a composer.json file to enable installing it on a WordPress project repository via composer.
PHP
1
star
47

garmin-vivoactive-binary-watch-face

A custom Garmin vivoactive Watch Face that displays the time in binary.
1
star
48

require-auth-users-rest-endpoint

Restrict /wp/v2/users REST API endpoint routes to authenticated users.
PHP
1
star
49

react-use-context-alert-function

Experimenting with React context to avoid passing a prop through intermediary component(s)
JavaScript
1
star