web designer & front end developer have been developing WP themes for 9 years run my own small business lead Ladies Learning Code workshops & mentor at HackerYou am a first time WordCamp speaker!
client's live site Local sites load more quickly No embarrassment if when you eff things up Allows you to use version control You're using version control, right? Right? You can use task runners, CSS preprocessors, etc.
2. Along the way, commit changes to git and push to Bitbucket 3. Copy local site to staging server 4. Copy staging site to client's server 5. If when changes are needed after initial development, make them on the local copy and push them to staging, and then live.
making changes directly to the live site. When you make all changes on your local copy first, you don't have to keep track of which codebase is the latest/correct version.
MySQL and PHP MySQL and PHP are required to run WP and Apache is highly recommended. Replicates setup of common web hosts on your computer Free MAMP gives you a local server located at http://localhost:8888 MAMP Pro lets you assign custom domain names to each local site (e.g. http://sitename.dev)
MAMP is as easy as... 1. Downloading WordPress and putting it in the folder that MAMP is watching 2. Setting up a new database in phpMyAdmin (also conveniently bundled with MAMP) 3. Editing wp-config.php to point at the database you just created 4. Congrats, friend! You now have a WordPress site running on your computer. For more detailed instructions, . CSS Tricks has a great screencast on this very topic
OR WP'S) AS YOUR STARTER THEME Lots of time spent undoing old work (either yours or someone else's) Easy to make poor coding decisions based on laziness/what's already there Often end up with a lot of code bloat when stuff from the old theme that's irrelevant to yours sticks around
LIKE: Basic CSS for WordPress functionality you may forget about (say, image alignment classes and galleries) Functions for common theme tasks (like setting up menus and widget areas) Adhering to (Underscores is especially good with this for obvious reasons) WordPress coding standards
customized functions.php file with all my commonly used functions A starter script.js file with a few starter functions that most themes use All my Sass partials set up as I like them with some useful variables and mixins My latest gulpfile.js and package.json (more on that in a minute)
/ * * * M e d i a - s e t d e f a u l t i m a g e l i n k l o c a t i o n t o ' N o n e ' * / u p d a t e _ o p t i o n ( ' i m a g e _ d e f a u l t _ l i n k _ t y p e ' , ' n o n e ' ) ; / * * * A l w a y s S h o w K i t c h e n S i n k i n W Y S I W Y G E d i t o r * / f u n c t i o n u n h i d e _ k i t c h e n s i n k ( $ a r g s ) { $ a r g s [ ' w o r d p r e s s _ a d v _ h i d d e n ' ] = f a l s e ; r e t u r n $ a r g s ; } a d d _ f i l t e r ( ' t i n y _ m c e _ b e f o r e _ i n i t ' , ' u n h i d e _ k i t c h e n s i n k ' ) ;
1. Downloading WordPress and setting it up in MAMP/XAMPP/AMPPS/thing that contains 'AMP' 2. Cloning your starter theme (or a fork of it) into /wp- content/themes/ 3. Logging into your new site's dashboard and activating your starter theme 4. Git coding! Git it? Version control jokes are super cool.
k ( ' s a s s ' , f u n c t i o n ( ) { r e t u r n g u l p . s r c ( ' s t y l e / s t y l e . s c s s ' ) . p i p e ( s a s s ( ) ) . p i p e ( a u t o p r e f i x e r ( ' l a s t 2 v e r s i o n ' , ' s a f a r i 5 ' , ' i e 8 ' , ' i e 9 ' , ' o p e r a 1 2 . 1 ' , ' i o s . p i p e ( m i n i f y c s s ( ) ) . p i p e ( g u l p . d e s t ( ' ' ) ) } ) ;
k ( ' s a s s ' , f u n c t i o n ( ) { r e t u r n g u l p . s r c ( ' s t y l e / s t y l e . s c s s ' ) . p i p e ( s a s s ( ) ) . p i p e ( a u t o p r e f i x e r ( ' l a s t 2 v e r s i o n ' , ' s a f a r i 5 ' , ' i e 8 ' , ' i e 9 ' , ' o p e r a 1 2 . 1 ' , ' i o s . p i p e ( m i n i f y c s s ( ) ) . p i p e ( g u l p . d e s t ( ' ' ) ) } ) ;
- w i t h - c o l u m n s { - w e b k i t - c o l u m n - c o u n t : 3 ; - m o z - c o l u m n - c o u n t : 3 ; c o l u m n - c o u n t : 3 ; - w e b k i t - c o l u m n - g a p : 4 0 p x ; - m o z - c o l u m n - g a p : 4 0 p x ; c o l u m n - g a p : 4 0 p x } :D
k ( ' l i n t ' , f u n c t i o n ( ) { r e t u r n g u l p . s r c ( ' j s / s c r i p t . j s ' ) . p i p e ( j s h i n t ( ) ) . p i p e ( j s h i n t . r e p o r t e r ( ' d e f a u l t ' ) ) ; } ) ;
a s k ( ' s c r i p t s ' , f u n c t i o n ( ) { r e t u r n g u l p . s r c ( [ ' j s / p l u g i n s . j s ' , ' j s / s c r i p t . j s ' ] ) . p i p e ( c o n c a t ( ' s c r i p t . m i n . j s ' ) ) . p i p e ( u g l i f y ( ) ) . p i p e ( g u l p . d e s t ( ' j s ' ) ) ; } ) ;
k ( ' i m a g e s ' , f u n c t i o n ( ) { v a r i m g S r c = ' i m g / s o u r c e / * ' ; v a r i m g D e s t = ' i m g ' ; r e t u r n g u l p . s r c ( i m g S r c ) . p i p e ( n e w e r ( i m g D e s t ) ) . p i p e ( i m a g e m i n ( ) ) . p i p e ( g u l p . d e s t ( i m g D e s t ) ) ; } ) ;
t a s k ( ' w a t c h ' , f u n c t i o n ( ) { / / L i s t e n o n p o r t 3 5 7 2 9 s e r v e r . l i s t e n ( 3 5 7 2 9 , f u n c t i o n ( e r r ) { i f ( e r r ) { r e t u r n c o n s o l e . l o g ( e r r ) } ; / / W a t c h . j s f i l e s g u l p . w a t c h ( ' j s / * . j s ' , [ ' l i n t ' , ' s c r i p t s ' ] ) ; / / W a t c h . s c s s f i l e s g u l p . w a t c h ( ' * * / * . s c s s ' , [ ' s a s s ' ] ) ; / / W a t c h i m a g e f i l e s g u l p . w a t c h ( ' i m g / s o u r c e / * ' , [ ' i m a g e s ' ] ) ; } ) ; } ) ;
i n e r { m a x - w i d t h : 9 8 0 p x ; } a { c o l o r : # b 4 c 4 3 d ; f o n t - f a m i l y : ' G o t h a m A ' , ' G o t h a m B ' , s a n s - s e r i f ; }
g o t h a m : ' G o t h a m A ' , ' G o t h a m B ' , s a n s - s e r i f ; / / G l o b a l i n f o r m a t i o n $ p a g e W i d t h : 9 8 0 p x ; $ f o n t S i z e : 1 6 p x ; / / C o l o u r s $ g r e e n : # b 4 c 4 3 d ; $ t e a l : # 7 3 c 6 b a ; $ b r o w n : # 5 6 3 0 1 6 ;
n a v i g a t i o n { d i s p l a y : b l o c k ; } . m a i n - n a v i g a t i o n u l { l i s t - s t y l e : n o n e ; } . m a i n - n a v i g a t i o n l i { f l o a t : l e f t ; } . m a i n - n a v i g a t i o n a { c o l o r : # b 4 c 4 3 d ; } . m a i n - n a v i g a t i o n a : h o v e r { c o l o r : # 7 3 c 6 b a ; }
v i g a t i o n { d i s p l a y : b l o c k ; u l { l i s t - s t y l e : n o n e ; } l i { f l o a t : l e f t ; } a { c o l o r : $ g r e e n ; & : h o v e r { c o l o r : $ t e a l ; } } }
a m e : S u p e r A w e s o m e T h e m e T h e m e U R I : h t t p : / / f a k e y f a k e . f a k e A u t h o r : D a r a S k o l n i c k A u t h o r U R I : h t t p : / / d a r a s k o l n i c k . c o m D e s c r i p t i o n : T h e f a k e s t t h e m e i n a l l t h e l a n d * / @ i m p o r t " p a r t i a l s / r e s e t " ; @ i m p o r t " p a r t i a l s / v a r i a b l e s " ; @ i m p o r t " p a r t i a l s / g l o b a l " ; @ i m p o r t " p a r t i a l s / f o r m s " ; @ i m p o r t " p a r t i a l s / n a v " ; @ i m p o r t " p a r t i a l s / p a g e s " ; @ i m p o r t " p a r t i a l s / p o s t s " ; @ i m p o r t " p a r t i a l s / w i d g e t s " ;
slow Easy to forget which files need updating Tempting to make changes directly on the server Therefore easy to get your local + remote copies out of sync
- A / / a d d s a l l y o u r c h a n g e d f i l e s $ g i t c o m m i t - m " A m e s s a g e d e s c r i b i n g t h e c h a n g e s y o u m a d e " $ g i t p u s h r e m o t e - n a m e m a s t e r / / p u s h e s y o u r f i l e s t o G i t H u b / B i t b u c k e t / y o u r s i t e Most projects of mine have three remotes: origin (Bitbucket), staging (my dev server) and live (client's server).
built in (e.g. ) 2. If you're using a more average host, use a service like or that FTPs changed files for you when you push to Git 3. If your web host allows SSH access, set it up yourself via command line (e.g. , ) WP Engine Deploy Beanstalk Hostgator Bluehost
nealle
benjaminkott
shuyakinjo
panda_program
plaidtech
shunghsiyu
marina1017
ndadayo
nyatinte
koba789
tattaka
key60228
philnash
sergeychernyshev
garrettdimon
quramy
chriscoyier
bermonpainter
caitiem20
lauravandoore
tammyeverts
eileencodes
lara
jonyablonski
