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

Discussion in 'DevOps' started by Ryuzaki, Mar 17, 2017.

  1. Ryuzaki

    •  
    •  
    Ryuzaki 女性以上のお金 Staff Member

    Joined:
    Sep 3, 2014
    Messages:
    2,223
    Likes:
    3,924
    Degree:
    6
    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.
     
    Jord, JasonSc, mbzzt and 3 others like this.
  2. tufSosa

    tufSosa

    Joined:
    Feb 17, 2017
    Messages:
    41
    Likes:
    35
    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.
     
  3. animalstyle

    •  
    animalstyle

    Joined:
    Mar 28, 2015
    Messages:
    723
    Likes:
    587
    Degree:
    2
    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.
     
    tufSosa likes this.
  4. Mpire

    Mpire

    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!
     
  5. Ryuzaki

    •  
    •  
    Ryuzaki 女性以上のお金 Staff Member

    Joined:
    Sep 3, 2014
    Messages:
    2,223
    Likes:
    3,924
    Degree:
    6
    @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.
     
  6. Nat

    Nat

    Joined:
    Nov 18, 2014
    Messages:
    564
    Likes:
    342
    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: Mar 28, 2017
  7. Michael

    •  
    Michael

    Joined:
    Sep 4, 2016
    Messages:
    313
    Likes:
    202
    Degree:
    1
    PHP:
    <h1><?php echo date("Y"); ?></h1>
    Prints 2017 inside a h1 tag - is that what you needed?
     
  8. Nat

    Nat

    Joined:
    Nov 18, 2014
    Messages:
    564
    Likes:
    342
    Degree:
    2
    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.
     
  9. Michael

    •  
    Michael

    Joined:
    Sep 4, 2016
    Messages:
    313
    Likes:
    202
    Degree:
    1
    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');
     
  10. Raymond Luo

    Raymond Luo

    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?
     
  11. GrandMaster

    GrandMaster

    Joined:
    Sep 21, 2014
    Messages:
    41
    Likes:
    55
    Degree:
    0
    You should probably define the non-standard acronym since you are in the newbie section. Jargon helps no one. I don't have the slightest clue what SSG stands for even after Googling it.
     
  12. mbzzt

    mbzzt

    Joined:
    Oct 6, 2014
    Messages:
    7
    Likes:
    6
    Degree:
    0
    SSG = Static Site Generators?
     
  13. Steve Brownlie

    •  
    •  
    Steve Brownlie Building Links

    Joined:
    Nov 16, 2015
    Messages:
    248
    Likes:
    435
    Degree:
    1
    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.
     
    SmokeTree likes this.
  14. Raymond Luo

    Raymond Luo

    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: Apr 4, 2017
  15. turbin3

    •  
    •  
    turbin3

    Joined:
    Oct 9, 2014
    Messages:
    413
    Likes:
    724
    Degree:
    2
    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.
     
    Rageix likes this.
  16. Bee

    Bee

    Joined:
    Jan 17, 2017
    Messages:
    85
    Likes:
    88
    Degree:
    0
    [​IMG]

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


    Thanks!
     
  17. SmokeTree

    •  
    •  
    SmokeTree Developer/Linux Consultant

    Joined:
    Sep 23, 2014
    Messages:
    163
    Likes:
    245
    Degree:
    1
    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.
     
  18. Jackv94

    Jackv94

    Joined:
    Jan 28, 2017
    Messages:
    20
    Likes:
    13
    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.
     
  19. Ryuzaki

    •  
    •  
    Ryuzaki 女性以上のお金 Staff Member

    Joined:
    Sep 3, 2014
    Messages:
    2,223
    Likes:
    3,924
    Degree:
    6
    @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.
     
    Jackv94 likes this.
  20. turbin3

    •  
    •  
    turbin3

    Joined:
    Oct 9, 2014
    Messages:
    413
    Likes:
    724
    Degree:
    2
    @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.
     
    Jackv94 likes this.
  21. Jackv94

    Jackv94

    Joined:
    Jan 28, 2017
    Messages:
    20
    Likes:
    13
    Degree:
    0
    Thank you @Ryuzaki I really appreciate that, especially giving me the exact code I need, will give that a go now.

    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
    And I'm only trying to learn HTML and CSS ha.
     
  22. turbin3

    •  
    •  
    turbin3

    Joined:
    Oct 9, 2014
    Messages:
    413
    Likes:
    724
    Degree:
    2
    This quote from Ryuzaki, on another thread, perfectly sums up the mindset you want to approach this stuff with, to get the best results.



    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
     
    Rageix, Jackv94 and Ryuzaki like this.
  23. Jackv94

    Jackv94

    Joined:
    Jan 28, 2017
    Messages:
    20
    Likes:
    13
    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.
     
  24. Mpire

    Mpire

    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
     
  25. Samwise89

    Samwise89

    Joined:
    Sep 17, 2014
    Messages:
    243
    Likes:
    156
    Degree:
    1
    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).