How to access code for specific page elements

  • Hi all,

    I’m looking for pointers in the right direction to be able to customize a WP site at the code level.

    My biggest problem is finding the code that governs certain elements within a page.

    I have a general understanding of how HTML and CSS work, but not enough to be able to pinpoint which bits of code to change to effect changes in a specific page or element of a page.

    Where is the best place to learn how WP site structure works so that I can effectively modify code?

    As a specific example relating to the site I’m working on: how would I find the container for the video animation background at the top of the page, if I wanted to modify the code so that the background stretched to fill screen on whatever device it is being viewed on? Or to take things a little further, what if I wanted to replace the video link all-together with css animation?

    …although really this is a general question about how I can begin to modify my site with code without having to code from scratch and hence continue to make use of all the great features afforded by a WP installation while also having full control over customization, limited only by my coding knowledge (or lack thereof!)

    Many thanks ??

    • This topic was modified 2 years, 5 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • lisa

    (@contentiskey)

    –start with getting familiar and comfortable with how to use browser developer tools to be able to *inspect* the areas related to your pages, posts, header, footer etc.

    -https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools

    -https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#the_inspector_dom_explorer_and_css_editor

    –not WordPress specific but good general CSS learning resources I use:
    -https://css-tricks.com/
    -https://www.youtube.com/kepowob

    Thread Starter dsb01

    (@dsb01)

    Thanks for the reminder about dev tools, it’s pointed me in the right direction.

    Have to confess I’m a little rusty, but it’s starting to come back to me. Most of the stuff I’d be wanting to customize is in style.css and the inspector/css editor in firefox helps me pinpoint what I need to find.

    I’m going to create a child theme and start playing around!

    Many thanks ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to access code for specific page elements’ is closed to new replies.