The "No Dev Question is Stupid" Thread - Basic HTML / CSS / Etc.

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,278
Likes
5,979
Degree
7
I've seen several times around the forum of people saying they struggled with a basic concept that any number of us could have answered in 30 seconds time, saving them hours.

Of course, nobody should be spoon fed but there's no reason to lose hours when being pointed in the right direction with the right context can still teach while saving that time. Time is all we have!

So if you find yourself with a basic developer question, feel free to ask here. I'm sure the pro's in this section won't care since we're keeping it all in one thread!
  • "How do I add space around this picture with CSS?"
  • "How do I use HTML to make a link open in a new tab?"
  • "Can someone explain what this HTML line does, why it goes in the header, and what I need to do in the CSS to activate it?"
That kind of stuff. HTML, CSS, PHP, jQuery, MySQL, whatever! In this thread, it's all gravy.
 
Joined
Feb 17, 2017
Messages
41
Likes
34
Degree
0
// Get Rid of WP Version Footprint Throughout Site
function ryu_remove_version() {
return '';
}
add_filter('the_generator', 'ryu_remove_version');

I just saw this in another thread. Loved the thread but don't know where exactly I can copy and paste this and other codes to? header.php? functions.php? another place?

As always, I appreciate your help.
 

animalstyle

BuSo Pro
Joined
Mar 28, 2015
Messages
926
Likes
822
Degree
3
That goes in your functions.php

Edit: let me expand on that to give you some more info. What you've pasted above is php code. You'll see php code wrapped in <?php code... ?>

When pasting that in your functions file, you'll notice at the top of the file it starts with <?php and ends with ?> down at the bottom. You just need to paste the code in between somewhere.

The line that starts with // is a comment which is very handy to keep notes on what things are doing. Your functions file can get quite large, so documenting is key.
 
Joined
Sep 12, 2016
Messages
28
Likes
4
Degree
0
Hey Ryu
Woocommerce: On the checkout page I want to move the email field first on the list (it is after the name and last name field atm). How could I do that? Thanks!
 

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,278
Likes
5,979
Degree
7
@Mpire, I've never used WooCommerce so I pulled up their demo on their site. You'll need to identify which PHP template is being used to populate the form, first and foremost. Then it'll be as simple as cutting and pasting the right HTML lines.

It'll be tucked in the <div class="woocommerce-billing-fields"> HTML wrapper. You'll see a <p class="form-row... etc..." id="billing_email_field"> that you'll want to cut and paste above the corresponding <p> for the first and last name sections.

Keep in mind, if you want to do this you should either set up a child theme or take notes on what you did. When you update your theme or WooCommerce your change will be reverted back without a child theme in place.
 

Nat

Joined
Nov 18, 2014
Messages
563
Likes
344
Degree
2
Best way to have the current year display in a wordpress h1 tag without creating a new post template with a fixed position? Yoast %%currentyear%% variable works for the meta title, but not h1.

Edit: Also, how inefficient are wordpress shortcodes for reusing html? Like, creating [dog] and using it 50 times in a post [dog name='Terrier' weight='1' title='Little Dogs w....']Paragraph[/dog] so that everything is uniform and your page isn't 80% html.
 
Last edited:

Michael

BuSo Pro
Joined
Sep 4, 2016
Messages
313
Likes
204
Degree
1
Best way to have the current year display in a wordpress h1 tag without creating a new post template with a fixed position? Yoast %%currentyear%% variable works for the meta title, but not h1.
PHP:
<h1><?php echo date("Y"); ?></h1>
Prints 2017 inside a h1 tag - is that what you needed?
 

Nat

Joined
Nov 18, 2014
Messages
563
Likes
344
Degree
2
PHP:
<h1><?php echo date("Y"); ?></h1>
Prints 2017 inside a h1 tag - is that what you needed?
Ideally was hoping for a way to do it from the wp-admin editor. I'm trying to avoid having to use a custom template file that hard coded an echo. I believe that would work only if the date needed appear at the beginning or end every time.

I guess I could make a template that throws the page_title('') into a variable, checks for %%year%%, explodes it at %%year%%, inserts date("Y"), and then rejoins it. Figured I might be stupid though and miss something already built in.
 

Michael

BuSo Pro
Joined
Sep 4, 2016
Messages
313
Likes
204
Degree
1
Ideally was hoping for a way to do it from the wp-admin editor. I'm trying to avoid having to use a custom template file that hard coded an echo. I believe that would work only if the date needed appear at the beginning or end every time.

I guess I could make a template that throws the page_title('') into a variable, checks for %%year%%, explodes it at %%year%%, inserts date("Y"), and then rejoins it. Figured I might be stupid though and miss something already built in.
I thought that was too easy of an answer, my apologies. I use a framework so I'm used to hooking PHP wherever on the fly.

Where do you need it to go? The code below inserted the date code into the header (tested). It goes into your functions.php file.

PHP:
function yearInject() {
    ?>
 <h1><?php echo date("Y"); ?></h1>
    <?php
}
add_action('wp_head', 'yearInject');
 
Joined
Sep 9, 2016
Messages
67
Likes
55
Degree
0
How do SSG devs or publishers like The Verge (who uses Middleman) routinely update their site over the course of the day?

Do they cleanse and upload en-masse or in small batches each time?
 

Steve Brownlie

Building Links
BuSo Pro
Digital Strategist
Joined
Nov 16, 2015
Messages
333
Likes
624
Degree
2
How do SSG devs or publishers like The Verge (who uses Middleman) routinely update their site over the course of the day?
SSG = Static Site Generators?
Yes.

Just a heads up for non SEOs/search people among the newbies. The easy way with things like this is to just mix the key points from the sentence into a search query and Google will naturally give you the answer. I didn't know what Middleman was but:

"middleman SSG"

Yielded no1 result:

Search Results
Middleman: Hand-crafted frontend development
https://middlemanapp.com/
Build static websites with an easy-to-use framework. Middleman is a static site generator using all the shortcuts and tools in modern web development.
 
Joined
Sep 9, 2016
Messages
67
Likes
55
Degree
0
Sorry about that earlier. And thanks @Steve Brownlie for clearing that up.

Obligatory Explanation

I should explain myself a little. WordPress is a smart and dynamic. Every time a user enters a WP website, it compiles and processes what needs to be shown to that user.

You can imagine if a ton of users needs individual compilation and processing of the same page, it would be a lot of work.

That's where you've probably heard of caching too, which saves the result of the compilation and processing of the page and sends it to the user. That's very static-like.

Static File Generators are similar except they are not 'like' static, they are. There are many benefits to this and the cons relate more towards workflow. You can read more online.

WordPress are a dream and very easy to use until they don't anymore because of $insert reasons. They become slow, vulnerable or inextensible. If you experience any of those problems and actually want to solve them, you might want to consider maintaining your WP site at an obscure location and generate a static site on your WP.

I happened to chance on some solutions like http://www.simplystatic.co/. I am not recommending them and have not used them.

Almost Back To My Question

I have never used an SSG and probably not in the near future because the workflow seems highly inefficient. Look at the amount of work at this really good article: https://www.smashingmagazine.com/2016/08/using-a-static-site-generator-at-scale-lessons-learned/.

Back To My Question (Linux Commands)

But my current CMS (Grav) has plugins that can generate static sites, which is why I chose it. The plugin can generate specific directories of the site, or it can generate everything. So at some point, I need to transfer the generated directories into the /public directory.

It looks like there are cp and rsync commands available that I can use to transfer on the cron. But in a production environment, I'm not sure which of these (or others) will be efficient considering at scale.

I know this deviates from the original question, mainly because I kind of answered my own question in writing this and I'm left with a technical Linux based question.
 
Last edited:

turbin3

BuSo Pro
Joined
Oct 9, 2014
Messages
601
Likes
1,198
Degree
3
With SSG's, what works and what will be efficient really depends on the degree of functionality that the particular site actually needs. In a lot of cases, I think people overestimate the need for a highly dynamic, database-driven site. For example, in a lot of cases, people might think the technology they need is dynamic/database-oriented, when the reality may be they simply need more functionality and more progressive UX with some sort of JS framework to further customize the user's experience.

I think the real trick is determining, for the individual use case, where your threshold is between data-driven content and design. What I mean by that is, if you need to iterate over and generate things from datasets, some SSGs can still be efficient with this. The trick is whether you only need a moderate amount or a high degree of this. For example, with some SSGs, you can effectively turn certain file types like YAML, TOML, or JSON (of course) effectively into large arrays of data. Posts, pages, or components can be generated from this. For low to moderate levels of data (thinks tens or thousands of posts, pages, etc.), with certain SSGs, this is not an issue and can be done efficiently. If we're talking hundreds of thousands, or millions, in certain very specific use cases, SSGs may still be feasible, but that's database/dynamic level at that point, if you want to make things easy. In one VERY specific use case for a very specific purpose, I have a static site in production that is regenerating and serving over 1M static pages weekly...

Workflow is the other major issue of course, as you mentioned. By far, Hugo is my favorite when it comes to SSG's. Combine it with NPM, Gulp, and maybe a few other plugins, then create a few script commands of your own in your package.json, and it's pretty easy and efficient to streamline your dev/build/deploy process. If you need a front end for content writers, there are more options for that these days, though that still remains one of the major issues that continues to hold the SSG world back from becoming more mainstream.
 

Bee

Joined
Jan 17, 2017
Messages
85
Likes
89
Degree
0


Working on a new site for a friend... why is this happening when I try to put Wordpress into Cpanel?


Thanks!
 

SmokeTree

Developer/Linux Consultant
BuSo Pro
Digital Strategist
Joined
Sep 23, 2014
Messages
208
Likes
370
Degree
1
why is this happening when I try to put Wordpress into Cpanel?
There are a few possible reasons for this, but the main ones are that either the MySQL module for PHP isn't installed or there is a configuration problem that's normally related to a PHP/Wordpress version change (PHP 7.0 probs are common). Another possible problem is that cpanel requires some kind of odd sacrificial offering to make it work properly (you can tell I'm not a cpanel fan).

In any event, the fix normally requires basic knowledge of the command line. If you're comfortable with that, then it's usually an easy fix. My recommendation is to contact the support dept of your hosting company first. If they can't help and you still have problems, I'd be glad to help if you have SSH access to the server.
 
Joined
Jan 28, 2017
Messages
24
Likes
17
Degree
0
Is it possible to modify the size of body text selectively without using H1 - H6 tags?

So for example I want a subtitle to be the size of a H1 but I don't want to use the H1 tag multiple times or even be a heading?

For example:

http://imgur.com/a/W2eV9
^
I linked the image opposed to upload as I must have compressed it wrong as the file size is still too big even though the image quality is terrible.
 

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,278
Likes
5,979
Degree
7
@Jackv94, This is done through CSS. It is the type of front-end code that styles HTML markup.

What you could do is create a CSS class, something like...

<div class="h1-mimic">What I want to look like an H1</div>

That is HTML. Then you'd need to go to your CSS file and copy the H1 attributes and paste them for your new class, which you would have to add like...

.h1-mimic {
font-size: 20px;
font-weight: bold;
margin-top: 15px;
margin-bottom: 15px;
}

That's how you'll accomplish this. It's how every website is styled, with no exceptions.
 

turbin3

BuSo Pro
Joined
Oct 9, 2014
Messages
601
Likes
1,198
Degree
3
@Jackv94, easiest would be wrap it in a <span> and give it a unique class. Then, if it's something you'll reuse often, you can easily create a line of CSS to add to your main CSS file, changing the font size for just that specific class.

Spans are really useful for this sort of thing, as they usually don't have some of the same default CSS or HTML behavior that certain other elements, like <p> tags might. A lot of times, if you use something like a <p> tag, there may be differences in line spacing, padding, margin, or other differences you might not want. Spans are usually pretty minimal by default, unless maybe you're using a theme that's already been highly customized.
 
Joined
Jan 28, 2017
Messages
24
Likes
17
Degree
0
@Jackv94, This is done through CSS. It is the type of front-end code that styles HTML markup.

What you could do is create a CSS class, something like...

<div class="h1-mimic">What I want to look like an H1</div>

That is HTML. Then you'd need to go to your CSS file and copy the H1 attributes and paste them for your new class, which you would have to add like...

.h1-mimic {
font-size: 20px;
font-weight: bold;
margin-top: 15px;
margin-bottom: 15px;
}

That's how you'll accomplish this. It's how every website is styled, with no exceptions.
Thank you @Ryuzaki I really appreciate that, especially giving me the exact code I need, will give that a go now.

@Jackv94, easiest would be wrap it in a <span> and give it a unique class. Then, if it's something you'll reuse often, you can easily create a line of CSS to add to your main CSS file, changing the font size for just that specific class.

Spans are really useful for this sort of thing, as they usually don't have some of the same default CSS or HTML behavior that certain other elements, like <p> tags might. A lot of times, if you use something like a <p> tag, there may be differences in line spacing, padding, margin, or other differences you might not want. Spans are usually pretty minimal by default, unless maybe you're using a theme that's already been highly customized.
Thanks @turbin3 I will read more into spans, yeah I think it will be something I want to use often so will be worth while doing that.

Do either of you have any recommendations on learning? I currently feel like I'm at the cliff of confusion decribed here:
https://www.vikingcodeschool.com/posts/why-learning-to-code-is-so-damn-hard
The Cliff of Confusion is the painful realization that it's a lot harder when the hand-holding ends and it feels like you can't actually do anything on your own yet.
And I'm only trying to learn HTML and CSS ha.
 

turbin3

BuSo Pro
Joined
Oct 9, 2014
Messages
601
Likes
1,198
Degree
3
This quote from Ryuzaki, on another thread, perfectly sums up the mindset you want to approach this stuff with, to get the best results.

As an solo-preneur you will need some skills in every category, but the best and most efficient way of learning them is to wait until you encounter them in your projects. This way, you're only learning exactly what's applicable (and will be generalizable) AND you have context around it, which will make sure your brain is wiring those neural pathways.


The thing that's overwhelming with HTML, CSS, JS, especially as a beginner, is that there is practically no limit to them. One thing that will help when starting out, is convincing yourself to not worry about "learning all of it". Instead, think about that quote. Of course, you do want to learn some basic fundamentals. Much beyond that, though, I find that it helps to approach individual problems or goals.

You have something you want to accomplish. You might not yet know how or even the proper terminology to search with. That's fine. Just identify the basic problem, try to start putting it into words, and experiment with different search queries for it. What you'll notice is, you'll start seeing a handful of recurring sites pop up in search results, often with answers for those problems. Sites like Stackoverflow, css-tricks.com, hongkiat.com, etc. You'll even find interactive sites, such as codepen.io, where you can actually play around with the code and see the effects live on that site!

The point I'm getting at here is, you don't have to solve all-the-things. You just have to solve the small one in front of you, then move on to the next one. Learning in this manner, as @Ryuzaki, expertly summarized, is very effective in that the experience is surrounded with great context and a healthy dose of the actual application.

So as far as some courses, here are several as well as some YouTube channels. Generally, for these subjects, I'd recommend courses or videos that aren't much longer than 1-2hrs, and preferably a lot less. There are a lot of courses out there that are dozens of hours, which for the purposes of a beginner and simply learning to tackle individual problems, is excessive.

https://www.codeschool.com/learn/html-css
https://teamtreehouse.com/library/html
https://teamtreehouse.com/library/introduction-to-html-and-css
https://www.codecademy.com/learn/web
https://www.youtube.com/playlist?list=PLlj9BrHKq9WKaz8UV3BjEqicn-C3qHxy4
https://www.youtube.com/user/DevTipsForDesigners
 
Joined
Jan 28, 2017
Messages
24
Likes
17
Degree
0
@turbin3 that reply made me realise that I am going along the right path currently, thank you.

The overwhelming factor 100% comes from the fact that you can do almost anything.

I guess as I continue to improve that my search queries will also become better as I tried googling for that and couldn't find any information but if I knew that I needed to either use a <span> or a div class then I would have been 1 step closer to finding the answer I required.

Thanks also for the resources, especially the two youtube links.
 
Joined
Sep 12, 2016
Messages
28
Likes
4
Degree
0
Hi! I want to add a javascript countdown on my checkout page
How can I add this script on the checkout page ONLY? I'm using Wordpress, don't want to add a plugin for this
See http://jsfiddle.net/robbmj/vpq5toeq/4/ The one that doesn't restart, I know how to add the HTML, but not the JS.

Thanks a lot
 
Joined
Sep 17, 2014
Messages
407
Likes
259
Degree
1
Hi! I want to add a javascript countdown on my checkout page
How can I add this script on the checkout page ONLY? I'm using Wordpress, don't want to add a plugin for this
See http://jsfiddle.net/robbmj/vpq5toeq/4/ The one that doesn't restart, I know how to add the HTML, but not the JS.

Thanks a lot
You need to determine the slug or ID number of the checkout page, then insert that script in the footer wrapped in an if loop:

PHP:
<?php if( is_page( 'checkout' )) { ?>
   <script>
      your long script
   </script>
<?php } ?>
That should get you close. You'd put this in the footer or put it in its own JS file and call it from the footer. It'll make sure the script only runs on the checkout page (change that bit in is_page() to the ID of the page without quotations or change it to the right page slug with quotations).