Category Archives: Design

Designer or design related news and topics

Design, Development, Education, Events, General, Meetup News, Reviews, Tips and Tricks

WordPress General Meetup Notes – Page Builders

Leave a comment

In October Alex Miller gave an introduction to page builders. These are plugins that can drastically change how you manage content in your WordPress site. From drag-and-drop layout options, easy galleries and more.

I took down a few notes, which try to cover some of the larger points Alex made through the evening. Feel free to drop a note below if you have any questions or feedback.

  1. Why use page builders?
    1. One reason is that it keep folks from messing up things they shouldn’t be messing with!
    2. It also makes it easy to update content without out having to be a design/layout genius.
  2. Only going to cover WordPress.org page builders – ones that are freely available
  3. Live Composer – https://wordpress.org/plugins/live-composer-page-builder/
    1. Cons
      1. bunch of clutter in the sidebar you can’t remove
      2. navigating tools in live view are a little cumbersome
      3. pre-populates text fields
      4. lots of toolbars, confusing
    2. Pros
      1. lots of tools
      2. can bring up standard WP editor in visual mode
  4. Site origin – https://wordpress.org/plugins/siteorigin-panels
    1. Cons
      1. limited layout options for ‘rows’ (like only bottom margin for each row)
    2. Pros
      1. no clutter in sidebar
      2. easy-to-use visual editor
      3. import/export layouts
    3. Beaver builder – https://wordpress.org/plugins/beaver-builder-lite-version/
      1. Cons
        1. no prebuilt templates for free version
        2. limited media ‘modules’ (called widgets in other page builders)
        3. no gradient support in column/row settings for backgrounds
        4. some default padding/margin are a little weird
      2. Pros
        1. limited modules are really easy to use
        2. responsive design break points can be set per module
  5. General notes on page builders
    1. Once you commit to a visual editor, switching (or going without) will be work – there’s not a lot of cross-migration between these competing tools.
    2. Uninstall might not keep your content!
    3. Beaver builder and site origin does add html and thankfully no shortcodes! Live editor is all inside their plugin – hard to salvage underlying content
    4. Think about what you need. Do you need a page builder (landing page) or just custom post types and ACF?
  6. Beaver builder is #1 pick
    1. good usability, flexibility, and support
Design, Development, Education, Events, General, Meetup News, Tips and Tricks, WordCamps

WordPress General Meetup Notes – Contributing to the WordPress Community

Leave a comment

In September our very own Jen Swisher, the lead organizer for WordCamp St. Louis 2017 shared how you can contribute to the WordPress community. It’s not just about code or design, but there are many ways to get involved. Quite frankly, we need your help!

Check out Jen’s presentation below and join us at our next monthly meetup and get involved!

Design, Development, Education, General, Tips and Tricks

WordPress General Meetup Notes – WordCamp Recap and Intro to WordPress

Leave a comment

This month at our general meetup we talked about our recent WordCamp and what we can do better next year. If you weren’t able to attend the meetup, but did attend WordCamp, please leave a note on what we can do better next year in the comments section.

Speaking of WordCamps, don’t forget to check out other nearby events. Oklahoma City is in July, Nashville in September, and  Cincinnati in October!

At our meetup we spent the rest of the evening talking about the basics of WordPress.  We shared a few resources I’ve shared below. It was a free-form conversation and we touched on a few big points and delved into a few nitty-gritty details (like importing content) as well.

One of the first things we discussed was the difference between WordPress.org and WordPress.com. The .org version is the self-hosted, you-can-do-anything version of WordPress. This flexibility comes at a cost. You have to set up your own hosting solution (where WordPress lives) and are responsible for testing, upkeep of WordPress, and maintaining your plugins and themes. However, it is by far the most rewarding way to use WordPress as the potential for adaptation and customization is limitless.

The other version of WordPress is the .com version. This version is hosted by a for-profit company (Automattic). They maintain WordPress, plugins, and themes. However, you are limited to a smaller selection of customization options, and on their free tier have other limitations (like ads being shown on your site).

From there the conversation went into talking more about the .org version. We discussed where to find themes (WordPress.org) and plugins (WordPress.org) and how to find themes and plugins that were well-maintained and supported.

We also reviewed the Codex, the “Mother Brain” of the WordPress community. The Codex is an encyclopedia of information about every bit of WordPress. From child themes, to specific functions, it covers it all. Any time you want to learn how to do something in WordPress (especially on the geeky side of code) start with the Codex.

Another great resources is WordPress.tv. Those WordCamps I mentioned earlier? Nearly every session from every WordCamp is recorded and shared there. If you want to know more about CSS or eCommerce, there are plenty of videos to peruse – for free by folks who know their stuff. Here’s one of the first videos you should start with. Matt Mullenweg, founder of Automatic and WordPress, gave a great overview of where WordPress is at, and where it is going, last year at the first WordCamp US event.

If WordPress.tv isn’t your cup of tea, and you live in the St. Louis region, you can also get access to the thousands of videos on the education site lynda.com. More info is on the St. Louis County Library site.

One of the questions was on managing WordPress projects. Something I hope we can talk about at an upcoming meetup. For now, I think Lucas Lima (a local St. Louisian) gave a great talk last year about this very topic.

A book recommendation along the lines of working with clients was my choice pick, You’re My Favorite Client by Mike Monteiro.

That was it for the eventing – a lot to digest I’m sure. If you’ve reached the end and still want more, view past topics on our Meeup.com page or peruse the archives here on stlwp.org. OR, if you’re really adventurous, join us at an upcoming meetup!

Photo by Armando Torrealba – licensed under Creative Commons

Design, Development

January Developer Meetup Notes – Intermediate CSS and CSS Preprocessors

Leave a comment

When it comes to CSS Preprocessors, there are 2 big ones: Sass and Less. In Matt’s presentation he covers Sass stating that the two really have about the same features and Sass just has a bigger following.

Slides will go here when Matt sends them!

 Key Features of Sass

 Sass in WordPress

Automattic’s _s theme (pronounced “Underscores”) uses Sass by default. It is also a good reference of how to setup your Sass files for ease of use. Check out _s’s Sass folder here.

Useful Tips

  • Want to try out your own Sass code online? Check out http://sassmeister.com
  • Matt showed some of his code and noted that he keeps a Sass file called shame.scss for all of his “hacks” he is not proud of…I like the idea
Design, Development, Education, Meetup News

November 2014 General WordPress Meetup Notes – “How to Get in Trouble with CSS”

Leave a comment

I put together some notes from our General Meetup last month. Thanks for everyone who braved the cold and came out. I had a blast putting this together and am looking forward to Nile’s presentation later in December.

Box Model

First, let’s talk about the Box Model. The best way to approach CSS is to understand that all it does is apply rules to the boxes that make up our webpages.

All HTML elements are containers or boxes. I demonstrated this by using the 3D view in Firefox. (Right-click on any webpage, and select “Inspect element”. The 3D view is the cube icon in the top right of the inspector pane.

CSS, or Cascading Style Sheets, allow you to define the style of those boxes. Everything from the fonts being used inside, to images, borders, padding, margins, colors, even how text behaves alignment, size, orientation, etc.

Rules

You make these changes this by defining ‘rules’ to those boxes or elements in your CSS.

So let’s say we have an element. It’s a simple div and I want to give it some rules.

<div>
<p>Some text inside that’s a paragraph.</p>
</div>

First give element a name – either an ID or a class.

That element name is called a selector in CSS parlance. We’re saying, for each element named X select

<div class=''demoDiv">
<p>Some text inside that’s a paragraph.</p>
</div>

I can apply rules to that selector in a few different ways.

Three ways to define CSS (There are more, say with JS)

Here they are from worse to best

Inline

<div class=''demoDiv" style="background-color:green;">

In the <head>



In a separate file (also referenced in the head)


<link rel="stylesheet" media="all" href="demoStyle.css">


Why is this the best? You separate the presentation from structure (HTML) from content (in the case of WordPress, what’s in your database). You also can have both documents open side by side. You also don’t have to scroll up and down and up and down. And most importantly, because of CASCADING!


Here’s two examples of valid CSS rules being applied to a class and an ID respectfully.


.demoDiv {
rule:options;
rule:options;
}


#demoDiv {rule:options;rule:options;}


Difference between a class and an ID


See that “.” and that “#” – that tells us if something is either a class or an ID.


Does it make sense to identify multiple elements by the same ID? I think not. That’s what classes are for – to classify similar elements.


Cascading


The name Cascading is important! It’s how the browser determine which rules to actually apply. There are many factors at play, and that’s ok. There’s some logic to it al.


We’re going to talk about specificity and inheritance


At this point I’m going to let someone far smarter than I explain it. Check out this article on Smashing Magazine.


The order you put your elements and their styles in your style.css don’t matter.


However it’s best practice to do high-level or ‘global’ settings at the top of your sheet, and put comments in as you go for the various sections.


At the top have global attributes like body, p, a, h3, etc.


Then sections:


    

  • header
    • 

  • navigation
    • 

  • sidebar
    • 

  • etc.
    • 



Order does matter in your rules!


One thing that does matter is the last rule of  a type will over ride the previous.


Example:


background-color: #000;
background: #FFF url(image.jpg) 0 0 no-repeat;


The color (should the image fail to load) will be white because it came last in this set of rules


Ok, what about WordPress!?


Let’s take a look at a CSS file from a theme like Twenty Fourteen


First, inspect and find an element in the stylesheet (using Chrome dev tools)


Child Themes


Even if you want to do nothing but tweak a few styles to an existing theme, USE A CHILD THEME. It’s easy.


If you assume you’re using Twenty Fourteen:


    

  1. Make a folder in your wp-content/themes/ directory. Give it a unique name.
    2. 

  2. Create a file called “style.css”
    3. 

  3. Edit header info to reference the parent theme.
    4. 

  4. Activate your child theme.
    5. 

  5. Edit CSS in that child theme’s style.css file to change (overwrite) the parent theme’s rules.
    6. 



CSS Preprocessors


CSS Preprocessors were touched on at the very end of the night. Basically things like SASS and LESS allow you to define variables to your rules. When you’re ready to publish the preprocessor will render valid CSS from those variables.


Example:


@col-red: #f00;
@col-blue: #00f;
@font-family: Arial, sans-serif;
@font-s: 12px;
@font-m: 14px;@font-l: 16px;


h1 {color: @col-blue; 
font: @font-l @font-family;}


.blockQuotes {color: @col-blue; 
font: @font-m @font-family;
}


Preprocessors also allow for math functions to compute sizes across your entire stylesheet.


@base-size: 10px;


.small {
font-size: @base-size;
}


.medium {
font-size: @base-size * 1.2;
}


.large {
@_large: @base-size * 1.5;
font-size: @_large;
line-height: @_large + 4;
}


A few good reference articles:


    

  • http://alistapart.com/article/why-sass
    • 

  • http://blog.millermedeiros.com/the-problem-with-css-pre-processors/
    • 

  • http://blog.blakesimpson.co.uk/read/37-less-sass-the-advantages-of-css-preprocessing-explained
    • 



Additional Resources:


https://developer.mozilla.org/en-US/docs/Web/CSS


—


Photo by Mikel via Flickr – Licensed under Creative Commons

	

	
	




	
	

				

			Design, Development, Education, Events, General, WordCamps
		

			
WordCamp 2015

		

			 			Leave a comment
						

	


		

		
In case you haven’t heard, WordCamp 2015 is officially scheduled to take place Saturday March 14th and Sunday 15th at Washington University.


While we’re having the event in the same space as this year, the organizing team has some exciting new ideas that we’re going to be working hard over the next 16 weeks to bring to the WordCamp.


While we’ll still be posting news on this site, if you want to subscribe to the WordCamp specific mailing list, head over the 2015.stlouis.wordcamp.org, or follow the organizers on Twitter at @WordCampSTL.


See you all next March!

	

	
	




	
	

			
	

				

			Design, Development, Education, General, Tips and Tricks
		

			
Themes and Plugins – Notes from the July 2014 General WordPress Meetup

		

			 			Leave a comment
						

	


		

		
After a roller coaster of scheduling fun we had our first Meetup in our new location at Lab1500 (home of Pushup). We talked about Themes and Plugins. For those who couldn’t make it we put together some notes from the evening’s presentations. For those of you would did make it, feel free to add your own thoughts via the comments below!


First up, Bob Barker shared with us an official Bob Barker Whitepaper. Here’s the copy from his handout.




Just another Bob Barker Whitepaper. Whitepaper (defined): useless or minimally valuable information that someone distributes so as to obtain your email address in order to send even more junk of even less value (aka fodder).


Places to check out… 


    

  • Spybar  – a handy toolbar that shows you the software (and plugins) used to build the site you’re visiting.
    • 

  • WordPress Theme Generator

      

    •  (ed note: Chris Miller also mentioned Headway as a similar solution)
      • 

    

    • 

  • WPMU 
    • 

  • iThemes
    • 



Looking for the awesome WordPress themes? Here’s the place to find them! 


http://www.wordpress.org/themes/


As of: 7-16-2014 2,620 THEMES, 106,186,898 DOWNLOADS, AND COUNTING


Looking for the awesome WordPress plugins? Find them here!


http://wordpress.org/plugins/ 


32,251 PLUGINS 695,392,281 DOWNLOADS, AND COUNTING 


Disclaimer: All information and advice provided by Bob Barker, Mid-American Marketing Associates, The Barker Companies, Their affiliates, associates, Their Foundations, employees, or associates of any of Bob’s companies are NOT warranted or carry any guarantee whatsoever. Please seek the professional advice of an attorney or accountant before proceeding with any endeavors as a result from information provided or questions answered; we do NOT guarantee or give any warranty of the information we provide. Please proceed at your own risk.




Chris K. (that’s me) then talked about the various kinds of themes.


From the most raw and basic (and heavy code knowledge to use), to most advanced and determined (with little code editing) there are generally 4 different kind of themes.


    

  • Starter Themes
    • 

  • Regular Themes
    • 

  • Child Themes
    • 

  • Theme Frameworks
    • 



Starter themes


Starter themes are the raw stuff of theme design and function. Many are minimal, barebones themes that you would use to customize and develop up on.  Most have few (or no) design decisions made beforehand. So no pre-defined colors, layout, grid, etc.


A few popular starter themes are:



A starter theme should probably not be your first theme to muck with. Instead I recommend you take an existing Regular Theme and play with it first.


Read more:


    

  • https://thethemefoundry.com/blog/wordpress-starter-theme/
    • 



Regular Themes


These are the majority of themes you’ll find on wordpress.org, elegantthemes, themeforest, etc. In most cases they are well build and well designed themes that have a certain visual appearance (trendy, retro, dark, earthy, etc.) and purpose (photography, real estate, blogging, e-commerce, etc.).


For most of these themes, many design, layout, and functionality decisions have been made for you.  Most will offer some customization via the theme customizer, but to really change things up you’re looking at building a child theme and getting your hands dirty with code.


Child Themes


So let’s say you download a regular theme, make some changes, and maybe even dip into the css or functions.php to add some custom functionality or style. Then an update to that theme is released. Being a good WordPress owner, you click the big update button.


What happens?


Those custom changes are overwritten with that update. Whoops.


Let’s say you get into custom post types, or custom fields – some fairly advanced stuff. How do you keep those changes across updates to your themes? Especially with advanced themes (like the frameworks mentioned below) there are security risks with not updating – updating is good!


The answer? You should create a child theme!


What is a child theme? Like real children, they need a parent to survive and they inherent traits and capabilities from that parent theme.


A child theme allows you to modify an existing theme (even a starter theme. They too have updates!) without worrying about your changes being overwritten with theme updates.


A basic child theme is as simple as having only one file – style.css. From there you can modify any additional files from your parent theme. header.php, single.php, heck even functions.php!


There’s a great article on the codex on creating a child theme. Remember, files (and their modifications) in a child them override the parent theme files, but not overwrite them. Meaning child themes are a great way to take apart an existing theme to see how it works, without making your changes permanent.


For example, let’s say you wanted to modify the footer from a them you found on WordPress.org. You could copy the footer.php from your parent them into your child theme and edit to your heart’s content. When your site is visited, your custom footer.php is loaded in place of the existing file!


Read more about child themes:



Theme Frameworks


Theme frameworks are like a micro eco-system within WordPress. There are tons of options, development hooks, and extensions outside of the stuff you normally would do with vanilla WordPress and a traditional theme.


Some theme frameworks have options that you’d normally see in separate plugins included as part of the framework. SEO options, custom widgets, layout options, security, support, etc.


Generally, frameworks have many custom features and functions that WordPress doesn’t offer out of the box. The catch is that many have a financial cost, and require (or work best with) a smaller selection of themes.


Genesis – one of the larger frameworks available. It has a large user and developer community, many Genesis-specific themes and some brilliant features making managing content, layout, and design easy without touching code.


Thematic – an open-source theme framework


Read more:



Choosing Themes and Plugins


We then talked a little about choosing themes and plugins for use. A few things we suggested were:


    

  • Start at wordpress.org
    • 

  • Read reviews
    • 

  • Look at how frequently the theme is updated
    • 

  • Check to see if it has the features you need – like being responsive.
    • 



Other resources for finding themes include:



Some of my favorite Themes



Plugins


Plugins extend WordPress and new and useful ways. Plugins operate using something called a hook to insert themselves into WordPress.


Hooks basically add some code using either an action or a filter. A plugin that operates on an action works when an event happens – you load the admin dashboard, save a page, etc. Filters happen when you query the database for information – like rendering a page, or a list of pages in a category, etc.


The codex (once again!) has a great entry on Hooks.


Some plugins are very advanced in what they do. They can totally extend WordPress in new directions, giving it capabilities it didn’t have. Some examples:



Read more on plugins



One last thing, in WordPress 4.0 coming in August there is an update on how you search and install plugins. You can read a little about the 4.0 update at WordPress.org.


Like these notes? Join us at our next meetup. They’re free, welcoming meetings where we share and learn together. Find out more at meetup.com.

	

	
	




	
	

			
	

				

			Design, General, Tips and Tricks, Writing
		

			
How to Find and Legally Use Photography for your WordPress Site

		

			 			Leave a comment
						

	


		

		
One of the more tricky aspects of using WordPress has nothing to do with the software itself, but trying to find a  good image to use as a visual anchor for your posts.


Adding an image to your posts is a great way to draw attention to an article and really make your writing stand out.


Not everyone has a large budget or the skills of photography to find a perfect photo for every post. Personally, even if I had both, I wouldn’t have the time to go out and shoot the specific image I needed.


The biggest boon to finding suitable photography is Creative Commons. Simply put, Creative Commons is a way for artists to preemptively declare licensing for their work. You can license your work under various versions of Creative Commons licenses and folks can use them accordingly without having to pre-negotiate terms.


Most of the time (remember, I am not a lawyer) you can use photos with a Creative Commons license for your work without having to contact the original artist. The catch, which isn’t insane to expect, is that you have to provide proper attribution to the author for their work. Basically, you have to give credit to the original artist.


My favorite solution to find Creative Common licensed photography is Flickr.


Why Flickr? The library is rich, hundreds of thousands of photos, and incredibly diverse, with Flickr users coming from all walks of life from around the world.


They were also one of the first photo sharing services to enable folks to license their photos under Creative Commons. You can search across all of Flickr, and using the Advanced Search Feature, filter to just show photos with a Creative Common license. Here’s an example search for “puppy dogs“.


Flickr Advanced Search


You can easily see the license for any photo on Flickr in the photo sidebar.


flickr-cc-license


Then, when using the photo, you can add something like this in your post (under the photo, in the post meta tags, or at the bottom):


Photo by Steve Wall –  licensed under Creative Commons


I hope this is a helpful introduction to Creative Commons and finding strong photos for your posts. If you have more ideas, suggestions, or feedback, please leave a note below.


P. S. There are  many more collections and options that have been talked about else ware on the web. Two other useful articles are this one from demosthenes.info and another from Dustin Senos on Medium.


Photo by Steve Wall –  licensed under Creative Commons

	

	
	




	
	

			
	

				

			Design, Development, General
		

			
Facebook ≠ a Website

		

			 			Leave a comment
						

	


		

		
I’ve worked with a few clients that have a well established social media presence with Facebook who would ask, “Why do I need my own website? We already communicate and engage with our audience with Facebook.”


My counter, more often than not, is that you don’t control Facebook and are beholden to their whims when it comes to the experience of interacting with your business. If they want to change the way your page looks or works, they will do so for their benefit, not yours. Now, most times these changes are aligned as Facebook wants people to use their service, but recently there’s been some concern over how Facebook is handling the reach of pages.


From an article on PetaPixel regarding the decline in reach with Facebook pages:


“Back in December, the company acknowledged that the reach per post — in other words, how many of your followers see your post in their News Feeds — has declined. Various studies have confirmed this, one showing a drop in reach from 12% of all followers to 6% over the course of 4 months. And, another blog is reporting that reach will decline to just 1% of your total followers eventually.”


While you might have an active and growing population of ‘likes’, it doesn’t mean that you are actually reaching all of those fans. Do you know what you could do to ensure all of your content is reaching your audience?


Start your own website. 🙂


(via PetaPixel)