A child theme with Flexslider and Masonry.js

Basic Twenty Twelve child theme that introduces a Flexslider on the front page displaying the 6 latest posts in the Featured category provided they have a Featured Image.

The Featured category index page displays posts in a Masonry layout.

To try it out download the Playground child theme zip , log in to WordPress, go to Appearance -> Themes, select Add New, select Upload, and upload the zip file.

To resize featured images install and activate Regenerate Thumbnails plugin and run function found under Tools.


ISMA309 Questions, Batch 4

I’ve noticed “rem” used as a unit in some css. What does it mean?

rem is a relative em size that is relative to the top-most size definition of the page. It differs from em size in that em is relative to the containing element. If you use rem and define the body font size as 16px then 1rem will always be equivalent to 16px and 1.8rem will be equivalent to 18px etc. It’s easier to use than ems but not supported in older browsers. I use rems but always provide a pixel value as a fallback.

If I wanted to add html elements to my home page, which php file should I add the code to? I did some trial and error, but couldn’t figure out which one to add it to. Also, would all html elements be added to this file? or would it depend on what the element was?

Normally the front page is controlled by the index.php file. If the theme has a file called front-page.php or home.php this will be the template controlling the front page.

If I wanted to add more webfonts, should generate a new url from google webfonts or should I just make an enqueque for the new font?

If you are using Google Webfonts specifically you should add the new fonts to the existing call. The syntax is pretty easy to understand – just look at the existing enqueue function you have.

What’s Bootstrap?

Bootstrap is a front-end framework created by Twitter. It’s a full package solution you can use as a baseline to build a website.  If you want to use Bootstrap in a WordPress theme you should start out with the WordPress Bootstrap starter theme. That said I would not recommend it. Bootstrap is huge and heavy and adds new things to WordPress that WordPress already does. Bootstrap is one of several frameworks. Another famous framework is Foundation from Zurb.

What is web syndication?

In a nutshell you publish something on one site that is then republished on a bunch of other sites. Exactly the same as news syndication.

Is there a maximum number of tags that can be added to a single post?

Not technically, but tags are there as navigational tools. If you use too many tags the navigational benefit is lost.

When adding a contact form, is there a recommended plugin?

I use GravityForms which is a premium option. If you just want a standard contact form plugin you can use JetPack and activate the Contact Form option.

If a user uploads copyrighted material to your site, who gets in trouble?

Depends on the legal terms you’ve set out on the site. The trick when accepting user generated content is to ensure you are not liable.  Take a look at the legal disclaimers on submission sites like Buzzfeed and Pinterest for some good examples.

How do you upload your own set of genericons onto your website?

Use a service like Fontello or Icomoon.

Is it possible to rotate only the border of a div element?

I’m guessing you mean make a parallelogram type effect? If so you have to do some cheating with skewing, border effects, and :before / :after elements. It’s tricky but it’s doable. Take a look at these CSS shapes for inspiration: https://css-tricks.com/examples/ShapesOfCSS/

In a real-life work environment, how much production responsibility (ie coding) does the designer usually take on?

The designer should be heavily involved in the early stages of the front end portion of the development but that is rarely the case. A huge problem in the industry right now is that designers don’t know enough code to know what can and cannot be done. When the designer is skilled at front end (HTML, CSS, JS) she can create much more effective designs and usually functional examples that can then be re-coded by the developers.

What are the most valuable programming languages to learn?

For a designer or front-end developer they are, in this order:

  1. HTML
  2. CSS
  3. JavaScript / jQuery
  4. PHP

How do you make your icon fonts/vectors crisp and smooth for web?

The crispness and smoothness of the font depends on the browser and screen resolution. Unfortunately Chrome does a terrible job with font smoothing and Safari tries to hard and makes the font too heavy. There is no simple solution here except wait for everyone to get higher resolution screens.

Are there any drawbacks to using an icon font opposed to an image?

Fonts are flat and single color. They also don’t have image-type qualities that gradients and blurred edges. Icons are great for computer generated graphics. Anything else should still be an image.

How do you run scripts in the child theme functions.php file?

You use the wp_enqueue_script() function.

How do you create multiple blog contributors in WordPress?

When logged in go to Users. From here you can add new users.

How do you remove layout elements from a parent theme in a child?

Usually layout elements are just HTML. If that’s the case you copy over the specific template file to the child theme and change it. In some cases the element is generated by a function. In that case you can usually override the function or use a filter.

Why is my changes not showing up on the Chrome but on the Safari?

Either because of caching or because of a lack of support in one browser. Most likely caching.

 How do I make my website show up as the first result?

In Google? With a lot of work. You need to write great content, get people to share that content, make sure the wording in your content matches the searches people make and so on. There is no turn-key solution to this problem.

A lot of websites has this feature ” people who like this item/article/book also like?” Can we do this with WordPress?

You are looking for a related post plugin or a syndicated post plugin. JetPack has a new related post feature that looks promising.

How do I make my website show up like this on the web?

That’s done automatically by Google. You don’t really have control of it.

What is word verification box for?

Word verification or Captcha are rudimentary anti-spam features.

What is the best method to do custom sidebars on pages?

You can add new sidebars from  your functions.php file by calling the register_sidebars() function. Once the sidebar is registered  you can call it using dynamic_sidebar() in a file, usually one called sidebar-something.php which in turn is called from the template like this: <?php get_sidebar(‘something’); ?>

Is there any plugins or methods to add live drawing to the site?

I know  you can do it with Canvas but I’ve never looked for it. I will investigate.

If you wanted to add in javascript to dynamically choose the path to pages, are there any resources that you could recommend?

I need more information to understand what exactly you want to do.

Can you make sub themes for specific format pages for example if I wanted a dark horror feel for a specific page could I make it tie to the user selectable format?

I would make a custom category template instead and then check for the current category in the single posts.

Is it okay to remove the name of the person who designed the original theme (which is displayed on the bottom of the webpage) since I?ve created the child theme?

Depends on the theme author. Some allow this, others don’t. Read the licence.txt file in the parent theme.

What are subdomains?

A sub-domain looks like this: subdomain.mydomain.com. They are just an address. In your hosting admin area you can create sub-domains and point them anywhere within your hosting account.

Are sub-domains visually similar to other pages of your website, or can they have a different theme?

Sub-domains are generally used to point to other sites so if you installed two sets of WordPress a sub-domain could point to one of them. You can also use sub-domains to point to WordPress Multisite installs but this is not something I recommend.


ISMA309 Questions, Batch 3

Since people don’t usually come to your site through one way anymore, what is the function of the home page?

While people are unlikely to land on your home page when they follow social links or long tail searches, the home page is still the place people land when they are told about the site through advertising, word of mouth, or short searches for specific domains.

For dynamic sites the home page is also the primary index and where people go once they’ve read an article and want to see what else is available.

What are some of the best resources for web fonts?

For free web fonts you should check out Google Fonts and Adobe Edge Fonts. FontSquirrel has a combination of free and for purchase fonts. Typekit is one of several web font stores where you can get most advanced fonts. Some font foundries also have their own stores.

Do you recommend linking to web fonts or using the @font-face? What are the advantages and disadvantages of both?

All web fonts use @font-face. I think your question is if you should roll your own or use the stylesheet provided. If so the answer is yes to both. If there is a stylesheet provided through a CDN you can choose to use that. This is what Google Fonts does. If you want to create your own web font or get a custom one you may have to serve it up on your own. Then you roll your own.

What is you recommendation for image sizes to use on your site, so you get the advantage of nice big images when you need them but don’t make your site to slow.

First, compress your image using the Export For Web function in Photoshop. This will reduce the file size dramatically. If you want to further reduce the size you can use a tool like Smush It.

As for image size the general rule of thumb is to upload the image at the largest size you intend someone to view it in. So if your image gallery has a max width of 800px then the max width of your images should be 800px.

Which browsers would you recommend we test our sites in for the current state of the web?

Short answer: All of them.
Long answer: The  browsers your visitors are most likely to use. Ideally you have browser statistics about the target audience. In place of this you can make some educated guesses. If you are targeting mostly North America you can safely bet on modern browsers. If you are targeting South East Asia you have to account for older browsers.

Most importantly you should test the site in as many mobile browsers as possible.

What is The Loop? How does it works and how can we use it?

The Loop is the name of a literal looping process used in WordPress to cycle through all available content before continuing down the template. Essentially when you visit a page or an index WordPress gets an array (list) of items from the database. The loop then cycles through each of the array items one after the other and performs an action based on the data within that item. Once there are no more items the loop closes and the rest of the template is executed.

The Loop is quite literally a loop.

I’’ve found a plugin that filters the content on the home page just as I wanted but I still want to be able to do this through the php, how’s that possible?

If it is done in a plugin it can be done with PHP (the plugin is written in PHP). You usually filter content on the front page and index pages using the pre_get_posts() function. At this link there is an example of how to exclude a category from the front page.

If you have a plugin that does what you want it to do I recommend looking at the functions within the plugin and figuring out how they work. This is the best way of learning.

How can I define the information that appears on the previews of the posts on the home page?

The short versions of your articles are called “excerpts”. By default an excerpt shows the first 20 or so words of your article but you can customize them for each post. To do so go to the post editor, click on Screen Options in the top right hand corner, check Excerpts, and type out your custom excerpt in the new Excerpt field directly below your the main editing field.

What are the odds on using a CSS Preprocessor?

We are not going to cover LESS and SASS in this course but these technologies are becoming more and more popular and are worth a look once you have a strong familiarity with pure CSS. When using LESS and SASS it is important to keep in mind that these are tools that simplify the writing of CSS. You still have to output the real CSS to the browser for it to work.

Is _s (underscores) a good way to start a new child/parent theme? What is it essentially?

Underscores is a baseline starter theme created specifically to be the starting point for new themes. If you want to build a theme from scratch you should start with Underscores. That’s what I do. In many cases you’ll only have to do very small alterations to the template files to make it do what you want and  you can focus mainly on the styles and JavaScript. You should never build a child theme off Underscores though. That kind of defeats the purpose and just creates extra work.

How Does Localhost works?

“localhost” is the default name of a local server environment running on the computer you are currently using. This is consistent across all computers regardless of operating system. When you visit localhost in your browser you are accessing the web server application that is currently running on that computer or server.

Will MAMP work if the MAMP folder is not located in the Application? Why or why not?

It should. The iOS operating system is Linux based and applications are self-contained elements that run independently of each other (at least in most cases). The best way to find out is to just try!

When to use margin vs padding in CSS?

Padding is the distance between the content in the box and the border of the box. Margin is the distance between the border of the box and other content not in the box. You use padding to increase the size of the containing box relative to the border to do things like give the box a colored background with bleed edges. You use margin to create space between one box and another.

Do I need a special Plugin to install Typekit in WordPress?

No, you do not need to use a plugin. Typekit will provide you with JavaScript to be used to inject the necessary code. This JavaScript can be enqueued into the head or footer of your pages from your theme or child theme.

Is it possible to reverse the chronological order of posts so that the order goes from first post to last?

There are several plugins that allow you to do this (search for “reverse order”) and you can also do it using a combination of WP_query() and pre_get_posts().

What is meta?

Metadata is all the information about something that is not the thing itself. So metadata for a telephone call is the originating phone number and target phone number, the length of the call, the time of the call, etc. In WordPress the metadata for a post is the post author, publishing date and time, post status, post format, categories, tags, etc. Metadata is used to sort, organize, and find content.

Are you able to make a child of a child theme?

Technically no, nor is it a good idea. If you have a child theme you like but you want to make changes to it you can just copy the child theme, give it a new name, and make the changes. That said there is anecdotal evidence that it is possible to make a child of a child theme. It is not recommended and will likely cause all sorts of bizarre errors and flying pigs.

What is RSS and what does it stand for?

RSS stands for Real Simple Streaming and is a markup format that allows you to publish your content in such a way that an RSS reader can parse (read) it and output it however it wants. In WordPress every page and every stream has an RSS feed. You can get to it by simply placing “/feed” after any URL.

If my Siteground subscription that I paid for expires, do I lose my domain name?

Yes, but not immediately. A domain name is like a post box. As long as you pay you have the box. If you stop paying the company is required to try to find you to make sure if you intend to cancel the subscription. If they can’t find you or you go over the grace period they may sell the domain name to someone else. If that happens you are going to have a very hard time getting it back. To avid this I recommend setting your domain name to auto-renew.

The good news is the domain name can be transferred to another host at any time. So if you think your current host is too expensive and you find a cheaper one you can move your domain name there and pay less.

Is there a maximum number of links to be displayed in the menu bar?

Yes, there is a theoretical limit, but it is very high. I once encountered a menu with over 100 items in it. All I can say is that was a very bad experience from a user perspective. If you have a lot of links and you plan to put them all in a single menu you should do some card sorting and figure out a better way of doing this, either by making a main menu with a series of separate sub-menus or something else.

Where do you add JavaScript or html into a child theme? Do I copy the .php file and do the same type of import call? How do I know which .php file to edit?

JavaScript should be added using the wp_enqueue_script() function placed in the functions.php file of your theme or child theme. This allows you to control when and how the script is added. HTML can be added to any file at any time. If you want to make a change to a theme file (or the functions.php file), copy the original file from the parent theme into the child theme folder and make the change to the child theme file. This file will automatically override the parent theme file.

How are browsers (eg. Firefox, Chrome, Safari, IE) different?

Every major browser uses a different rendering engine meaning they interpret web code slightly differently. Way back in the beginning of the web the two main browsers Internet Explorer and Netscape were in an all out war over who got to decide how web pages should render and they had drastically different interpretations of the same code. Then some web developers started the Web Standards Project to force the browser manufacturers to agree on interpretation. That project was ended last year because they felt their work was done but I disagree. Even today browsers are often in disagreement on how to interpret things and you will find many cases where the same code looks different between all the browsers. As a result you need to test your code on all browsers.

How does http://designspiration.net/ know that, when you start typing, you are searching for something?

There is a JavaScript on the page “listening” for keyboard activity. When you type something the script triggers and the hidden search box is revealed using a change in classes.

What are most games on the internet coded in? JavaScript?

There are several different languages you can code games in. A lot of people use the Unity engine and output to Flash. You can also code games in JavaScript. It’s partially about preference, partially about performance, and partially about portability.

How do I add the child theme folder (after messing around in MAMP) to my real website?

Simply copy the child theme folder as is to the themes folder on your live site. This will make the child theme available from your admin panel on your live site and you can activate it from there.

What is MAMP?

“MAMP” stands for Mac Apache MySQL PHP and is a bundled package that installs the three components necessary to run open source applications like WordPress on a web server on your computer.

How to place image to the header on WordPress?

Go to the admin panel, click on Appearance -> Header and upload the image you want.

How to Change font on WordPress?

Fonts are controlled by CSS so to change the fonts on your page you just change the font-family attributes in your styles.

How can I allow users to create a post in response to an existing post without it being a comment? How do I link the posts together?

The easiest way to do this is through the use of categories. If that’s not enough you can also get one of several plugins. Search for “post series” plugins.

How do I allow users to sign-up/create an account in order to contribute? Is the BuddyPress plugin a good option for this?

Under Settings you can check “Anyone can register”. This will allow people to register to your site. You can also change the New User Default Role to “Contributor”. This allows them to write content for your site without being able to publish.

BuddyPress is something completely different. This plugin makes your WordPress site into a social network akin to Facebook or Google+. It is extremely advanced and not something I recommend using unless you have a very specific usage scenario in mind.

How do sub-domains work?

Sub-domains are not that different from sub-folders, they just look different when you spell them out. Sub-domains are set up on the host and allow you to point different domains to different folders on your hosting server without explicitly stating that you are pointing to those folders. So you could create a sub-domain called cars.mysite.com and point it to mysite.com/cars for example. The cool thing about sub-domains is that you can use them to host multiple different WordPress sites under one domain.

How do new CSS selectors/declarations get added if browsers don’t know how to display them yet?

CSS selectors are added in through HTML and PHP by you. The declarations are defined in your stylesheets, also by you. If you don’t provide any declarations, the browser will apply its default declarations which is why you’ll find basic styling of things like hyperlinks and headings even if you never declared them.

Are there specific benefits of having a blog with endless scrolling or should there be pages that only display a fixed number of blog posts?

This is one of the hottest and most controversial topics in the web design and UX fields right now. Endless, or “infinite” scrolling has benefits and drawbacks and to be honest they pretty much even out. In my opinion it’s  a question of what works for the particular usage scenario you are looking at. Sometimes infinite scrolling is awesome, other times it’s a total pain. I personally prefer to provide a button at the bottom of a page that allows the user to load the next set of posts rather than a system that does this automatically.

For a sarcastic take on this see this comic.

What is Joomla?

Joomla! (spelled with an exclamation point for some reason) is a content management system just like WordPress and Drupal and countless others. Joomla! is very advanced and much bigger than WordPress.

What is Apache?

Apache is a web server application that runs on Linux and Unix based servers. Up until recently it was the preferred web server application but now there is a new kid in town called NGNIX (pronounced “engine-x”) that is taking a solid foothold.

4. Is there an ideal font size for computer/mobile screens?

Another hyper controversial topic. This is probably the best article I’ve read on the topic in a long time:

A More Modern Scale for Web Typography

What is MySQL?

MySQL is the database system used by WordPress and many other open source applications. There are many types of SQL server languages. MySQL is an open source version. You’ll also find NoSQL, SQLJS, SQL, SQLAzure etc etc etc.

The first time we went to our new website, it was a “siteground wordpress blog”. After we put in our own content it was normal, but why was this different from the first time we set up WordPress?

You used the auto installer, didn’t you? That would be why.

What is the best FTP Client to use and why?

That’s like asking “What is the best ice cream and why?” All FTP applications do the same thing, they just have different user interfaces. I personally prefer FileZilla but there is no real reason for this other than that I like that I am a big Open Source proponent and that they used to use a Tyrannosaurus as their logo.

Why do all websites look so similar?

Partially because some user interaction patterns work better than others, but mostly because web designers and developers are unimaginative and tend to just do whatever everyone else is doing.

In your opinion, what is the greatest blog about the internet on the internet?

Errr… Anil Dash’s blog is great, A List Apart is mandatory reading, there is a lot of interesting stuff being published on Medium but they have a terrible indexing system. A new publication that is very important is Model View Culture, but it’s only a few weeks old so we don’t know yet what it will become.

How can I get my blog full of images to load faster?

  1. Don’t have a blog full of images
  2. Optimize and smush your images before upload (see above)
  3. Use a CDN caching service like CloudFlare or JetPack Photon

ISMA309 Questions, Batch 2

Q: How do you create traffic for a website?

Traffic is created by creating great content people a) search for, and b) want to share. To target search you have to create content people are curious about and formulate it in the form of questions and answers: Ask the question, then provide the answer. For sharing it’s important to add sharing buttons with a plugin such as AddThis.

Q: What factors effects your websites position on search engines?

The primary factor is how relevant your content is. If it’s not relevant meaning other sites have more relevant content yours will not be listed very high. Relates directly to the answer above about asking and answering questions etc. There are other factors too, like how long a page takes to load, whether or not people share your content on social media, and who you are, but relevance is most important.

Q: How do you create backups or archives of your website?

Use a plugin like BackWPUp or Backup to Dropbox.

Q: How do you add a plugin (for social media – twitter, tumblr, etc) onto your blog?

Go to the Admin panel, click on Plugins -> Add New, and search for AddThis. That’s the easiest and most powerful social media sharing plugin.

Q: How do you create a mailing list or contact form for subscribers of your blog?

If you just want people to subscribe to your blog by email you can install the JetPack plugin and activate the subscriber widget. If you want to do something a bit more advanced you can use a regular form and hook it to a service like MailChimp.

Q: How do you optimize a website for smartphones?

There are several ways of doing this. The recommended method is to create a responsive site with server-side scripting meaning the content reformats to the screen and the server feeds up content to fit that screen. The responsive part of this is easy and in WordPress it can be done simply by installing a responsive theme. The server side scripting part is very challenging.

Another method is to install a mobile-specific plugin like WPTouch that provides a different experience for mobile users. There are pros and cons to this method and personally I’m not a big fan but done right it can be a great solution.

Q: Will plugins or widgets effect the overall appearance of a mobile layout or have to be omitted?

Generally no. Plugins are usually fine on mobile devices unless it’s something very big or poorly coded. The biggest challenge with mobile devices is when you serve up large images or interactive elements like image sliders and some plugins do this very poorly.

Q: Where can I find out who (my audience) has visited my blog from?

Google Analytics has very detailed analytics that tell you where the visitors came from both geographically and by reference (what site they found you on), how they interacted with your site, and how long they stayed.

Q: Is it possible to outsource the contents of your blog onto other websites?

If you mean let other people republish your content then yes, it is. Just keep in mind when content is duplicated across several sites Google penalizes the content publishers for duplicate content.

Q: What is the CSS box in the ‘customize’ section in WordPress for? How do we use that?

This is a WordPress.com or Jetpack (plugin) feature that allows you to inject CSS on top of your active theme to override functions. It’s a poor man’s child theme. I recommend using a child theme instead. Far more control and options.

Q: How to put web safe fonts into WordPress and our theme?

Web safe fonts (Arial, Helvetica, sans-serif or Georgia, Times New Roman, Times, serif etc) are always available. We will be covering fonts and webfonts in detail on February 18.

Q: Is there an option to put a drop shadow behind an image in CSS?

You can use the box-shadow attribute to create drop shadows in CSS. The syntax is pretty straight forward:

.element {
    -moz-box-shadow: 5px 5px 5px 5px #ccc;
    -webkit-box-shadow: 5px 5px 5px 5px #ccc;
    box-shadow: 5px 5px 5px 5px #ccc;

The numbers are as follows: horizontal offset, vertical offset, blur radius, spread radius, color. You can play around with the options in one of the many CSS3 Generators like this one available online to see how it works.

Q: How do you put pictures next to each other with proper formating (sizes)?

The image gallery function in WordPress (found under the Add Media button) allows you to lay out images in a standard grid pattern. If you activate the Jetpack plugin you get additional features here that allow you to place the images in galleries laid out in different patterns. Other than that you have to use some basic markup and CSS to make it look the way you want.

Q: How to create a theme on WordPress?

In the last lesson you learned how to make a child theme. Making a theme is pretty much the same except you edit the main theme files instead of the child theme files. The recommended starting point for new themes is the underscores starter theme. There is no point building a theme from scratch and underscores gives you all the core features you need. Technically you can use underscores to just add CSS but you can also reconfigure the whole theme to do your bidding.

Q: Are there any plug-ins can do money transactions on WordPress?(turn wordpress to be a shopping website)?

For just collecting money there are tons. Go to Plugins -> Add New and search for PayPal and you’ll see a long list. For ecommerce there are two recommended options: Easy Digital Downloads if you just want to sell downloads or services, and WooCommerce if you want more advanced funcitons. Both require intricate knowledge of tax rates and laws and I wouldn’t recommend either unless you are planning on spending a lot of time managing finances. If you want to just sell stuff online you should use an existing service like Shopify.

Q: How to introduce a website to the client?

This is a topic that could take up an entire class. I’m not exactly sure what you’re asking for here, how to discuss designs or how to discuss prices or how to discuss what the site should need or what? If you can narrow it down I’ll be able to answer in more detail.

Q: How to organize a usability test?

In the simplest form a usability test is where you get someone to perform tasks on the site or a site mockup (can be paper copies) while you watch in silence. Ask them to do something without giving them leading questions or hints, then watch them do it, and finally ask them why they did what they did. You have to do this with a lot of people, and it is better if they are people you don’t know. I’ve done this with paid participants and even used a tablet or my computer and just asked random people at the mall to do it.

Q: How well is a web designer get paid?

Extremely complex question with a simple answer: If you work in an agency you are paid a regular rate depending on your level. If you work as a freelancer you are paid whatever you choose to set your rate at. The biggest challenge for new designers and developers is that they tend to charge too little and undervalue themselves.

Q: What is a cache?

Cache is a snapshot of a file or a page stored somewhere for quick retrieval. Your browser has cached copies of websites and elements (images, video, audio) so when you revisit a site it loads much faster. Your ISP caches popular websites. So does CDNs and even your server.

Q: Why does a website slow down when many people are using it?

The speed of a website is actually measured by the volume of data that is transferred. Large volume means high speed. Low volume means low speed.

Imagine your server as a bottle of water: When you’re the only person accessing the server you use the entire bottle opening to get the water out. It’s fast. Then six other people access the bottle at the same time and suddenly you are getting water at one sixth the rate. Then 100 people access the bottle at the same time and you get one one hundredth the rate etc. The more people try to access the site at once, the less data each individual can receive due to the limitation in the network capacity of the server

Q: Should we backup our websites? Should I use the backup feature offered in my siteground cPanel?

Yes, and yes.

Q: What is the Apache server/ Apache handler?

Apache is the web server software that runs on most web servers. The handler is the monitoring software that handles the server. You generally don’t need to worry about either.

Q: How do you get multiple images to show up in a single row in a WordPress post?

To list images next to one another horizontally you have to use some markup and CSS or the Jetpack plugin as mentioned above. For CSS the easiest method is to place each image in a list item and then display the list items inline.

Q: How does plugin system work?

When you install a theme or a plugin WordPress places the new theme or plugin under the themes or plugins folders under the wp-content folder in your WordPress installation. Once the theme or plugin is in that folder WordPress automatically recognizes it as such and allows you to activate/deactivate it. This also means if something goes horribly wrong and the theme or plugin kills your site all you have to do is access the folder and remove the theme or plugin and everything goes back to normal.

Q: What’s the difference between hyperlink and URL?

A hyperlink is a HTML element consisting of an anchor tag (<a>) with an href attribute pointing to a URL that wraps the element that when clicked activates the link. A URL is a permanent address reference to a specific file on the web.

Q: How does RSS work? What can I do with RSS?

RSS provides a standardized text format version of the contents of a page or a number of pages. This text format, referred to as an “RSS Feed” can be read by RSS readers or parsed by other websites. You can use RSS to syndicate your content, send out your content in email form, or import content from old sites to new ones. Every WordPress page has an automatic RSS feed you can access simply by putting “/feed” after the current URL.

Q: What’s the difference between tags and hashtags?

Tags are contextual hyperlinks used within a website to relate content with other content. Hashtags are social media elements used by sites like Twitter, Facbook, and Google+ to relate content with other content. They do the same thing, but on different platforms.

Q: What is considered an interactive website?

Any website is by definition interactive. I guess an interactive website in a broader sense is a website with lots of interactive elements like buttons and animations and such.

Q: What does a server look like?

A server is just a computer and can look like any computer. Commonly though servers are specialized computers housed in server racks and they have lots of cables coming out of them.

Q: Is it possible for 1.5 million people to use the app at the same time?

Yes, and it happens all the time. Social media services have more than 1.5 million people using them at once. Same with Google and Bing etc. For this to work you need a very big server array and a lot of power.

Q: Is there an easy way to get images to resize with a responsive layout in your posts?

Yes, and I will touch on this in the Feb. 4 class.

Q: Why does PHP have such a bad rap?

There are many reasons for this, most notably that many supporters of proprietary code languages think that PHP is sloppy (true) and that it is bad for the industry (false). PHP doesn’t really have a bad wrap any more. It was more so a couple of years ago.

Q: Is net neutrality good or bad?

Net neutrality is not just good, it’s a requirement for an open web. What is happening now in the US with net neutrality potentially going away is very very very bad.

Q: How can I determine what posts appear in my home page?

Your home page displays your most recent posts or your most recent Sticky posts. You can switch this so the home page displays a single page if you want. Or you can change the code on the front page to display another set of fonts using some code.

Q: Can I create two or more different blogs inside the same WordPress site?

Depends what you mean by “blog”. If you just mean have two different sections you can do so simply by categorizing your content and providing links to each category in your main menu. If you want to have two completely separate sites with no direct relationships between them you can set up either two WordPress sites or you can set up a WordPress Network (advanced). The last option is not recommended.

Q: How can I modify the design of the theme I have chosen?

In addition to the built in theme customization options (found under Appearance -> Customize and Appearance -> Header, Menus, etc) you can create a child theme and reconfigure the templates on your site.

Q: What are the risks of embedding content or linking to content that might be infringing copyright laws? Example: many jazz albums are fully available on Youtube, would it be wrong to use the link on my website? Not so sure if it’s more a question about laws or ethics.

If you are embedding content from a site like YouTube you are fine because the content is clearly not hosted on your site and you have no control over it. If you are copying content from one site and placing it on your own or if you upload content to YouTube that you do not have the rights to, then you are breaking the law.

Q: How can I edit the content that goes, for instance, on Twitter posts that are shared?

The WordPress SEO by Yoast plugin allows you detailed control over the sharing content for Facebook and Google+. The AddThis plugin allows you to customize the message shared on Twitter to an extent.

Q: After installing a new theme, it keeps saying “Your theme contains a meta description, which blocks WordPress SEO from working properly”. What does it mean? How can I fix it?

Your theme is poorly coded. I think the plugin can try to force fix it or has suggestions on how to alter the theme code to fix it. Show me in class and I’ll help you.

Q: How can I create a small icon (or upload my logo) on the website tab so that it won’t be a doc icon?

What you are looking for is a favicon. You can create one for yourself using X-Icon Editor. Once you have the favicon you place the favicon.ico file in your child theme and then place the following code in your header file (will be demoed on Feb. 4):

<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />

Q: Does it matter what kind of image format I use?

The general rule is to use JPEG for photos and images of real things, PNG for computer generated images, and GIF for small things and GIF animations.

Q: How can I change font family that is not common like Helvetica or Roman? Can I upload my font files to folder so that I can link it to my website?

We are dedicating an entire class to fonts on Feb. 18

Q: How can I export the logo from Illustrator with transparent background?

Will be covered on Feb. 18

Q: How should I handle a website that could potentially have multiple authors? Would everyone need to create accounts and login? What if they didn’t?

Yes, create an account for each contributor and give them “Author” privileges. That way they can submit and edit their own stuff and comment on their own articles but you are in charge of what gets published.

Q: How do websites use other accounts (like Facebok or Google) to login? How is that different from traditional sign in?

It’s called “oAuth” and stands for “Open Authorization”. It’s tricky and prone to error. I would not recommend it.

Q: I’m still a little fuzzy on how the database, server, host, and actual website relate to each other?

The database holds the data. The server is where the database and your files sit. The host is the company that owns the servers. The actual website is the result of the server combining your database and files. It only exists in the visiting browser.

Q: How do images in websites resize without getting blurry?

Proper markup and CSS. Basically upload the image at the largest size expected and then use CSS containers to scale it down proportionately.

Q: How are animations added to a website? Is it using javascript?
https://layervault.com This one looks like videos that play automatically. Are there other ways to add animation?

The video in the site in question is set to autoplay. Generally animations are either video, Java, or Flash.

ISMA309 Questions, batch 1

Q: Is it better to create an image/shape in Photoshop / Illustrator and import it into the code, or code the shape size and colour into the base code? Will this create problems with scalability?

A: For complex images it’s always smart to make them in an image application. If the images are line art or flat you can use SVG or fonticons, but this makes the images behave and appear differently. It all depends on what the image is and how you intend to use and display it.

Q: Is it okay an original, un-scaled image onto your site if you want to keep the resolution? Or will it slow down the page loading speed too much?

A: You can load an un-scaled image into the site but I recommend displaying it in a cropped or scaled format and then linking the smaller image to the larger one. That way you only load the larger one when the visitor asks for it.

Q: Is there a maximum file size for FTP servers?

A: That depends on how it was set up. Usually there is a limit (very high) and you can also set a limit per user.

Q: Is there a way to avoid spam comments in blog posts.

A: Yes. Install the Akismet plugin. It will catch about 98% of spam.

Q: Is it easier to upload a video file onto your website, or link it from a site such as YouTube or Vimeo?

A: Unless you have a particular reason for not wanting to use YouTuve or Vimeo I suggest using these services. They specialize in video hosting and don’t weigh down your hosting account. If you want a custom solution I recommend VideoPress or Zencoder.

Q: What other CMS platforms are there except WordPress?

A: Many. The most popular open source options are Drupal and Joomla!

Q: What is PM and QA mentioned in the slides in the first class?

A: PM = Project Management. QA = Quality Assurance (basically detailed testing)

Q: What is GitHub? How does it function? It seems to be related to jQuery and JavaScript…

GitHub is a cloud based code collaboration, repository, and versioning system based on Git (which is just a versioning system). Git is software that tracks all the changes you make to a file. You can then commit those changes which essentially means you take a snapshot of the current state of the files. Once committed you can continue making changes to the file and then at any time revert back to a previous commit state. Git also allows you to “fork” a repository meaning you take the existing code and make a new version or “Branch” of it that you can then alter to your own specifications. If you like the result you can also merge your branch back into the original code. GitHub allows you to place this code on the web so others can see it, use it, and collaborate with it.

Q: What do you think of horizontal scrolling for a website? Is it a good way for portfolio of a designer?

Horizontal scrolling can be cool but is complicated and can cause major issues, especially on mobile platforms like smartphones and tablets. When creating a horizontal scroll website you have to consider the height of the smallest screen and how the page will work on that screen. There is a reason you see very few of these sites on the web.

Q: What is a good strategy for keeping load times down especially for images?

For images the best strategy is to optimize them for the web before publishing them. Use the Save for Web option in Photoshop and tinker with the settings. A general rule here is to use JPEG for photos and PNG for any computer generated graphic. For load times in general the trick is frugal and optimized code, clean CSS, and as few images as possible.

Q: How would you write the css or perhaps an image sizing function to have scaling images for a responsive design? Or a good plugin.

Responsive images are tricky. The answer right now is “all of the above”. For CSS the recommendation is to create a responsive frame with a max width/height and then set the image to width: 100% and height: auto. Eventually responsive images will be sorted out with a standard but for now we have to work with what we’ve got which is mainly CSS.

Q: Is there a way to have WordPress not absolutely link images and other media? Or is there a nice way if you set up something on a local host or changed domains to auto change all the links to match the current URL?

If you use the Add Image function within WordPress the application will handle URL changes in a clean way because the images are references in the database. The issue of absolute links only shows up if you hand code absolute URLs into the page markup which is not recommended.

Q: What would cause a javaScript behaviour to work most of the time but not work with some posts. The js controls the menu collapse and expansion and some posts collapse the menu when it is suppose to stay open. Sometimes deleting the post and recreating it will fix the issue, but not in all cases. I can show you the code tomorrow if you like.

In most cases a JavaScript not working means it is either in conflict with another script, not being loaded at all, or not being triggered. Troubleshooting this means tracking down the script and finding out whether it loads or not.

Q: WordPress is touted as a really easy platform to use, so a lot of people want their own custom sites. Is there a really good guide they could read other then the ones on wordpress.org?

There are several books and training videos available. I have tons at lynda.com and I also recommend the book WordPress for Developers by Stephanie Leary as a good introduction.

Q: After writing a lot of code, if I find the page is not working. what is the easiest way to find the problem?

First off, don’t write lots of code before testing. Do incremental updates and test constantly. For code consistency I recommend using a text editor or IDE with code highlighting. Common tools include SublimeText and IDEs like NetBeans.

Q: What’s the difference between JavaScript and jQuery?

JavaScript is a scripting language. jQuery is a library of functions built using JavaScript.

Q: What makes a good website?

I’m inclined to answer that by asking what makes good art? Jokes aside, a good website is one that does what it’s supposed to do be that communicating a message, allowing people to interact, or just presenting something to the visitor.

Q:  What are some ways that people can know my website?

The best way of getting people to visit your site is through word of mouth. That requires compelling content people want to share and the ability for people to share that content, mainly through social media. Search engine listing is important and happens automatically, but social sharing is far more important these days. To kickstart the process, post links to your site on Facebook and Google+ and Twitter and encourage your friends and their friends to read and interact with your content.

Q: I have learnt processing, i find the coding language are different. I am wondering why the coding language can’t be the same, so it will be easier to code?

Code languages are different because they are built by different people for different purposes. That makes it complicated, but it also allows us to have custom solutions to custom problems.

Q: Explain why is better to keep these three types of code separate?

I’m going to guess you’re talking about HTML, CSS, JavaScript, and PHP, right? You want to keep code separate so it’s easier to manage and so that you can utilize the same code in different places. Compartmentalization allows for more frugal code production.

Q: Explain the difference between Fixed, fluid, responsive Layouts?

Fixed layouts are fixed to a specific width or height. They do not change regardless of the screen or window size. Fluid layouts change depending on the size of the content or the display window. Responsive layouts specifically respond to the window size by resizing and reorganizing content.

Q: How to have a separate page for an image?

You can make a post or page with just an image or you can refer to the Attachment page for the image. WordPress creates an attachment page for each image or other media item uploaded. These can be accessed by going to the Media -> All Media option in admin and clicking on “View” under the item in question.

Q: How is content added to the database?

WordPress is the interface between you and the database and your visitors. When you fill out the forms on the page inside WordPress admin (create a new post) that information is passed to the database table.

Q: What is the .php at the end of websites?

PHP is the file extension. It tells the server or browser what type of code the page contains. Same with .css, .html, .js and so on.

Q: What are API’s used for?

APIs (Application Platform Interfaces) are used to pull data from an application for future use. You can use an API to pull Tweets into your page, to get data from Open Data programs, to do pretty much anything. WordPress has a set of APIs that allow you to pull data from the site and place it in other sites.

Q: What are WordPress templates coded in?

WordPress is a PHP based application. Themes for WordPress are coded in a mix of HTML, CSS, JavaScript, PHP, and WordPress Templating Language using what’s known as Template Tags.

Q: How can the loading times of website be improved? What does a website’s “page weight” involve?

Clean code, small images, quick queries to the database. The page weight is how long it takes to load the entire page. This is reliant on many factors including the actual code on the site, how many images and media items need to be loaded, how fast your server is, how fast your internet connection is, and so on.

Q: Where does the web begin?

Hard to answer. One answer would be at your computer. The book Tubes by Andrew Blum tries to answer this question.

Q: How does Twitter make money?

Through advertising and hyperbole.

Q: What are the most common “back end” languages and what is the difference between all of them?

According to this statistic PHP is by far the most prevalent though some will disagree.  Server side languages depend on the type of server you run on. PHP runs in a Linux environment though Windows Server now allows PHP to operate. .NET and ASP run in Windows Server only. ColdFusion runs on ColdFusion servers and so on. The language has to match the server in question. PHP is open source. So is Java. .NET, ASP, and ColdFusion are all proprietary.

Q: What does a web hosting service actually do?

A web host is basically a hotel for your files and data. You rent space on a server or a database or both and when people visit your site they are directed to that space.

Q: How does parallax scrolling work?

Simple answer: By messing with percentages in CSS. I’d have to write out an example to show you how it works. There are some great examples in this book.

Q: What’s the difference between HTML and XHTML?

XHTML is HTML with XML markup. It’s the old way of doing things. You want to use HTML5.

Q: Can I add another user to my WordPress account?

For a self-hosted site simply go to the back end, navigate down to Users -> Add New and add new users. Each user must have a unique email address, otherwise there are no restrictions. Be wary of giving anyone Administrator access.

Q: How does the internet work?

See question above about where the web begins.

Q: What’s the difference between www and http?

http is the data domain you are querying when you look at websites. ftp is a different data domain. “www” is an old signifier telling the browser that you are looking at a world wide web site. It has no actual function any more apart from confusing people.

Q: What’s the difference between blogging and micro-blogging?

Exactly what it sounds like: Blogging is writing content of some length. Micro-blogging is when you are restricted to very short updates – like Twitter or Instagram.

Q: Do we necessarily need a web host to have a website?

Yes and no. A website live on the web requires a web host. You can set that web host up yourself or even use your own computer as a web host (not recommended) but the files and data have to be served somewhere. If you are running straight up HTML, CSS, and JavaScript you technically don’t need a web host as long as you have access to the files through your computer. These files will render no matter what. If you are using a server side scripting language like PHP you have to have a web host running that supports that server side scripting language. You can set up such a web host on your own computer but then you’re the only one who can access it.

Q: How do we transfer domains from WordPress to a custom built website?

Domain transfers happen at the domain host. This all depends on how you have set the domain up and where  you want to point it.

Q: What makes up a responsive website ? Is there a special code?

A responsive website is one that responds to the width of the screen or window. It is powered by media queries which is a specialized form of CSS. I recommend reading the article Responsive Web Design on A List Apart. This is the original article that created the concept.

Q: How do you extract data from Google drive and display that in a website?

I need more info to answer this question. Do you mean from a spreadsheet or just that you have your files on Drive?

Q: Can we just create blog posts in a Google Word document then?

You can write your blog posts anywhere and then publish them to WordPress when they are done. Just remember to use the Paste as Plain Text function when you cut and paste the content.